@openedx/frontend-app-authn 1.0.0-alpha.0

package/src/register/data/tests/utils.test.js

@@ -0,0 +1,98 @@
+import { isFormValid } from '../utils';
+
+describe('Payload validation', () => {
+  let formatMessage;
+  let configurableFormFields;
+  let fieldDescriptions;
+
+  beforeEach(() => {
+    formatMessage = jest.fn(msg => msg);
+    configurableFormFields = {
+      confirm_email: true,
+    };
+    fieldDescriptions = {};
+  });
+
+  test('validates name field correctly', () => {
+    const payload = { name: ' ' };
+    const errors = {};
+    const { isValid, fieldErrors } = isFormValid(
+      payload,
+      errors,
+      configurableFormFields,
+      fieldDescriptions,
+      formatMessage
+    );
+
+    expect(fieldErrors.name).toBeDefined();
+    expect(isValid).toBe(false);
+  });
+
+  test('validates email field correctly', () => {
+    const payload = { email: 'invalid-email' };
+    const errors = {};
+    const { isValid, fieldErrors } = isFormValid(
+      payload,
+      errors,
+      configurableFormFields,
+      fieldDescriptions,
+      formatMessage
+    );
+
+    expect(fieldErrors.email).toBeDefined();
+    expect(isValid).toBe(false);
+  });
+
+  test('validates username field correctly', () => {
+    const payload = { username: 'invalid username' };
+    const errors = {};
+    const { isValid, fieldErrors } = isFormValid(
+      payload,
+      errors,
+      configurableFormFields,
+      fieldDescriptions,
+      formatMessage
+    );
+
+    expect(fieldErrors.username).toBeDefined();
+    expect(isValid).toBe(false);
+  });
+
+  test('validates password field correctly', () => {
+    const payload = { password: 'short' };
+    const errors = {};
+    const { isValid, fieldErrors } = isFormValid(
+      payload,
+      errors,
+      configurableFormFields,
+      fieldDescriptions,
+      formatMessage
+    );
+
+    expect(fieldErrors.password).toBeDefined();
+    expect(isValid).toBe(false);
+  });
+
+  test('validates multiple fields correctly', () => {
+    const payload = {
+      name: 'InvalidName!',
+      email: 'invalid-email',
+      username: 'invalid username',
+      password: 'short',
+    };
+    const errors = {};
+    const { isValid, fieldErrors } = isFormValid(
+      payload,
+      errors,
+      configurableFormFields,
+      fieldDescriptions,
+      formatMessage
+    );
+
+    expect(fieldErrors.name).toBeDefined();
+    expect(fieldErrors.email).toBeDefined();
+    expect(fieldErrors.username).toBeDefined();
+    expect(fieldErrors.password).toBeDefined();
+    expect(isValid).toBe(false);
+  });
+});

package/src/register/data/utils.js

@@ -0,0 +1,153 @@
+import { snakeCaseObject } from '@openedx/frontend-base';
+
+import { LETTER_REGEX, NUMBER_REGEX } from '../../data/constants';
+import messages from '../messages';
+import validateEmail from '../RegistrationFields/EmailField/validator';
+import validateName from '../RegistrationFields/NameField/validator';
+import validateUsername from '../RegistrationFields/UsernameField/validator';
+
+/**
+ * It validates the password field value
+ * @param value
+ * @param formatMessage
+ * @returns {string}
+ */
+export const validatePasswordField = (value, formatMessage) => {
+  let fieldError = '';
+  if (!value || !LETTER_REGEX.test(value) || !NUMBER_REGEX.test(value) || value.length < 8) {
+    fieldError = formatMessage(messages['password.validation.message']);
+  }
+  return fieldError;
+};
+
+/**
+ * It accepts complete registration data as payload and checks if the form is valid.
+ * @param payload
+ * @param errors
+ * @param configurableFormFields
+ * @param fieldDescriptions
+ * @param formatMessage
+ * @returns {{fieldErrors, isValid: boolean}}
+ */
+export const isFormValid = (
+  payload,
+  errors,
+  configurableFormFields,
+  fieldDescriptions,
+  formatMessage,
+) => {
+  const fieldErrors = { ...errors };
+  let isValid = true;
+  let emailSuggestion = { suggestion: '', type: '' };
+
+  Object.keys(payload).forEach(key => {
+    switch (key) {
+      case 'name':
+        if (!fieldErrors.name) {
+          fieldErrors.name = validateName(payload.name, formatMessage);
+        }
+        if (fieldErrors.name) {
+          isValid = false;
+        }
+        break;
+      case 'email': {
+        if (!fieldErrors.email) {
+          const {
+            fieldError, confirmEmailError, suggestion,
+          } = validateEmail(payload.email, configurableFormFields?.confirm_email, formatMessage);
+          if (fieldError) {
+            fieldErrors.email = fieldError;
+            isValid = false;
+          }
+          if (confirmEmailError) {
+            fieldErrors.confirm_email = confirmEmailError;
+            isValid = false;
+          }
+          emailSuggestion = suggestion;
+        }
+        if (fieldErrors.email) {
+          isValid = false;
+        }
+        break;
+      }
+      case 'username':
+        if (!fieldErrors.username) {
+          fieldErrors.username = validateUsername(payload.username, formatMessage);
+        }
+        if (fieldErrors.username) {
+          isValid = false;
+        }
+        break;
+      case 'password':
+        if (!fieldErrors.password) {
+          fieldErrors.password = validatePasswordField(payload.password, formatMessage);
+        }
+        if (fieldErrors.password) {
+          isValid = false;
+        }
+        break;
+      default:
+        break;
+    }
+  });
+
+  // Don't validate when country field is optional or hidden and not present on registration form
+  if (configurableFormFields?.country && !configurableFormFields.country?.displayValue) {
+    fieldErrors.country = formatMessage(messages['empty.country.field.error']);
+    isValid = false;
+  } else if (configurableFormFields?.country && !configurableFormFields.country?.countryCode) {
+    fieldErrors.country = formatMessage(messages['invalid.country.field.error']);
+    isValid = false;
+  }
+
+  Object.keys(fieldDescriptions).forEach(key => {
+    if (key === 'country' && !configurableFormFields?.country?.displayValue) {
+      fieldErrors[key] = formatMessage(messages['empty.country.field.error']);
+    } else if (!configurableFormFields[key]) {
+      fieldErrors[key] = fieldDescriptions[key].error_message;
+    }
+    if (fieldErrors[key]) {
+      isValid = false;
+    }
+  });
+
+  return { isValid, fieldErrors, emailSuggestion };
+};
+
+/**
+ * It prepares a payload for registration data that can be passed to registration API endpoint.
+ * @param initPayload
+ * @param configurableFormFields
+ * @param showMarketingEmailOptInCheckbox
+ * @param totalRegistrationTime
+ * @param queryParams
+ * @returns {*}
+ */
+export const prepareRegistrationPayload = (
+  initPayload,
+  configurableFormFields,
+  showMarketingEmailOptInCheckbox,
+  totalRegistrationTime,
+  queryParams,
+) => {
+  let payload = { ...initPayload };
+  Object.keys(configurableFormFields).forEach((fieldName) => {
+    if (fieldName === 'country') {
+      payload[fieldName] = configurableFormFields[fieldName].countryCode;
+    } else {
+      payload[fieldName] = configurableFormFields[fieldName];
+    }
+  });
+
+  // Don't send the marketing email opt-in value if the flag is turned off
+  if (!showMarketingEmailOptInCheckbox) {
+    delete payload.marketingEmailsOptIn;
+  }
+
+  payload.totalRegistrationTime = totalRegistrationTime;
+  payload = snakeCaseObject(payload);
+
+  // add query params to the payload
+  payload = { ...payload, ...queryParams };
+  return payload;
+};

package/src/register/index.js

@@ -0,0 +1,4 @@
+export { default as RegistrationPage } from './RegistrationPage';
+export { default as reducer } from './data/reducers';
+export { default as saga } from './data/sagas';
+export { storeName } from './data/reducers';

package/src/register/messages.jsx

@@ -0,0 +1,206 @@
+import { defineMessages } from '@openedx/frontend-base';
+
+const messages = defineMessages({
+  'register.page.title': {
+    id: 'register.page.title',
+    defaultMessage: 'Register | {siteName}',
+    description: 'register page title',
+  },
+  // Field labels
+  'registration.fullname.label': {
+    id: 'registration.fullname.label',
+    defaultMessage: 'Full name',
+    description: 'Label that appears above fullname field',
+  },
+  'registration.email.label': {
+    id: 'registration.email.label',
+    defaultMessage: 'Email',
+    description: 'Label that appears above email field on register page',
+  },
+  'registration.username.label': {
+    id: 'registration.username.label',
+    defaultMessage: 'Public username',
+    description: 'Label that appears above username field',
+  },
+  'registration.password.label': {
+    id: 'registration.password.label',
+    defaultMessage: 'Password',
+    description: 'Label that appears above password field',
+  },
+  'registration.country.label': {
+    id: 'registration.country.label',
+    defaultMessage: 'Country/Region',
+    description: 'Placeholder for the country options dropdown.',
+  },
+  'registration.opt.in.label': {
+    id: 'registration.opt.in.label',
+    defaultMessage: 'I agree that {siteName} may send me marketing messages.',
+    description: 'Text for opt in option on register page.',
+  },
+  // Help text
+  'help.text.name': {
+    id: 'help.text.name',
+    defaultMessage: 'This name will be used by any certificates that you earn.',
+    description: 'Help text for fullname field on registration page',
+  },
+  'help.text.username.1': {
+    id: 'help.text.username.1',
+    defaultMessage: 'The name that will identify you in your courses.',
+    description: 'Part of help text for username field on registration page',
+  },
+  'help.text.username.2': {
+    id: 'help.text.username.2',
+    defaultMessage: 'This can not be changed later.',
+    description: 'Part of help text for username field on registration page',
+  },
+  'help.text.email': {
+    id: 'help.text.email',
+    defaultMessage: 'For account activation and important updates',
+    description: 'Help text for email field on registration page',
+  },
+  // Form buttons
+  'create.account.for.free.button': {
+    id: 'create.account.for.free.button',
+    defaultMessage: 'Create an account for free',
+    description: 'Label text for registration form submission button',
+  },
+  'create.account.cta.button': {
+    id: 'create.account.cta.button',
+    defaultMessage: '{label}',
+    description: 'Label text for registration form submission button for those users who are landing through redirections',
+  },
+  // Institution login
+  'register.institution.login.page.title': {
+    id: 'register.institution.login.page.title',
+    defaultMessage: 'Register with institution/campus credentials',
+    description: 'Heading of institution page',
+  },
+  // Validation messages
+  'empty.name.field.error': {
+    id: 'empty.name.field.error',
+    defaultMessage: 'Enter your full name',
+    description: 'Error message for empty fullname field',
+  },
+  'empty.email.field.error': {
+    id: 'empty.email.field.error',
+    defaultMessage: 'Enter your email',
+    description: 'Error message for empty email field',
+  },
+  'empty.username.field.error': {
+    id: 'empty.username.field.error',
+    defaultMessage: 'Username must be between 2 and 30 characters',
+    description: 'Error message for empty username field',
+  },
+  'empty.password.field.error': {
+    id: 'empty.password.field.error',
+    defaultMessage: 'Password criteria has not been met',
+    description: 'Error message for empty password field',
+  },
+  'empty.country.field.error': {
+    id: 'empty.country.field.error',
+    defaultMessage: 'Select your country or region of residence',
+    description: 'Error message when no country/region is selected',
+  },
+  'invalid.country.field.error': {
+    id: 'invalid.country.field.error',
+    defaultMessage: 'Country must match with an option available in the dropdown.',
+    description: 'Error message when country is invalid',
+  },
+  'email.do.not.match': {
+    id: 'email.do.not.match',
+    defaultMessage: 'The email addresses do not match.',
+    description: 'Email not match to confirm email',
+  },
+  'email.invalid.format.error': {
+    id: 'email.invalid.format.error',
+    defaultMessage: 'Enter a valid email address',
+    description: 'Validation error for invalid email address',
+  },
+  'username.validation.message': {
+    id: 'username.validation.message',
+    defaultMessage: 'Username must be between 2 and 30 characters',
+    description: 'Error message for empty username field',
+  },
+  'name.validation.message': {
+    id: 'name.validation.message',
+    defaultMessage: 'Enter a valid name',
+    description: 'Validation message that appears when fullname contain URL',
+  },
+  'password.validation.message': {
+    id: 'password.validation.message',
+    defaultMessage: 'Password criteria has not been met',
+    description: 'Error message for empty or invalid password',
+  },
+  'username.format.validation.message': {
+    id: 'username.format.validation.message',
+    defaultMessage: 'Usernames can only contain letters (A-Z, a-z), numerals (0-9), underscores (_), and hyphens (-). Usernames cannot contain spaces',
+    description: 'Validation message that appears when username format is invalid',
+  },
+  // Error messages
+  'registration.request.failure.header': {
+    id: 'registration.request.failure.header',
+    defaultMessage: 'We couldn\'t create your account.',
+    description: 'error message when registration failure.',
+  },
+  'registration.empty.form.submission.error': {
+    id: 'registration.empty.form.submission.error',
+    defaultMessage: 'Please check your responses and try again.',
+    description: 'Error message that appears on top of the form when empty form is submitted',
+  },
+  'registration.request.server.error': {
+    id: 'registration.request.server.error',
+    defaultMessage: 'An error has occurred. Try refreshing the page, or check your internet connection.',
+    description: 'Error message for internal server error.',
+  },
+  'registration.rate.limit.error': {
+    id: 'registration.rate.limit.error',
+    defaultMessage: 'Too many failed registration attempts. Try again later.',
+    description: 'Error message that appears when an anonymous user has made too many failed registration attempts',
+  },
+  'registration.tpa.session.expired': {
+    id: 'registration.tpa.session.expired',
+    defaultMessage: 'Registration using {provider} has timed out.',
+    description: 'Error message that appears when a user has not registered in the required timeframe for the registration method they chose.',
+  },
+  'registration.tpa.authentication.failure': {
+    id: 'registration.tpa.authentication.failure',
+    defaultMessage: 'We are sorry, you are not authorized to access {platform_name} via this channel. '
+        + 'Please contact your learning administrator or manager in order to access {platform_name}.'
+        + '{lineBreak}{lineBreak}Error Details:{lineBreak}{errorMessage}',
+    description: 'Error message third party authentication pipeline fails',
+  },
+  // Terms of Service and Honor Code
+  'terms.of.service.and.honor.code': {
+    id: 'terms.of.service.and.honor.code',
+    defaultMessage: 'Terms of Service and Honor Code',
+    description: 'Text for the hyperlink that redirects user to terms of service and honor code',
+  },
+  'privacy.policy': {
+    id: 'privacy.policy',
+    defaultMessage: 'Privacy Policy',
+    description: 'Text for the hyperlink that redirects user to privacy policy',
+  },
+  'honor.code': {
+    id: 'honor.code',
+    defaultMessage: 'Honor Code',
+    description: 'Text for the hyperlink that redirects user to the honor code',
+  },
+  'terms.of.service': {
+    id: 'terms.of.service',
+    defaultMessage: 'Terms of Service',
+    description: 'Text for the hyperlink that redirects user to the terms of service',
+  },
+  // miscellaneous strings
+  'registration.username.suggestion.label': {
+    id: 'registration.username.suggestion.label',
+    defaultMessage: 'Suggested:',
+    description: 'Suggested usernames label text.',
+  },
+  'did.you.mean.alert.text': {
+    id: 'did.you.mean.alert.text',
+    defaultMessage: 'Did you mean',
+    description: 'Did you mean alert suggestion',
+  },
+});
+
+export default messages;

package/src/reset-password/ResetPasswordFailure.jsx

@@ -0,0 +1,55 @@
+import { useIntl } from '@openedx/frontend-base';
+import { Alert } from '@openedx/paragon';
+import { Error } from '@openedx/paragon/icons';
+import PropTypes from 'prop-types';
+
+import { FORM_SUBMISSION_ERROR, PASSWORD_RESET, PASSWORD_VALIDATION_ERROR } from './data/constants';
+import messages from './messages';
+
+const ResetPasswordFailure = (props) => {
+  const { formatMessage } = useIntl();
+  const { errorCode, errorMsg } = props;
+
+  let errorMessage = null;
+  let heading = formatMessage(messages['reset.password.failure.heading']);
+  switch (errorCode) {
+    case PASSWORD_RESET.FORBIDDEN_REQUEST:
+      heading = formatMessage(messages['reset.server.rate.limit.error']);
+      errorMessage = formatMessage(messages['rate.limit.error']);
+      break;
+    case PASSWORD_RESET.INTERNAL_SERVER_ERROR:
+      errorMessage = formatMessage(messages['internal.server.error']);
+      break;
+    case PASSWORD_VALIDATION_ERROR:
+      errorMessage = errorMsg;
+      break;
+    case FORM_SUBMISSION_ERROR:
+      errorMessage = formatMessage(messages['reset.password.form.submission.error']);
+      break;
+    default:
+      break;
+  }
+
+  if (errorMessage) {
+    return (
+      <Alert id="validation-errors" className="mb-5" variant="danger" icon={Error}>
+        <Alert.Heading>{heading}</Alert.Heading>
+        <p>{errorMessage}</p>
+      </Alert>
+    );
+  }
+
+  return null;
+};
+
+ResetPasswordFailure.defaultProps = {
+  errorCode: null,
+  errorMsg: null,
+};
+
+ResetPasswordFailure.propTypes = {
+  errorCode: PropTypes.string,
+  errorMsg: PropTypes.string,
+};
+
+export default ResetPasswordFailure;