@openedx/frontend-app-authn 1.0.0-alpha.4 → 1.0.0-alpha.6

package/src/register/data/utils.js

@@ -1,153 +0,0 @@
-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/messages.jsx

@@ -1,206 +0,0 @@
-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

@@ -1,55 +0,0 @@
-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;

package/src/reset-password/ResetPasswordPage.jsx

@@ -1,224 +0,0 @@
-import { useEffect, useState } from 'react';
-import { connect } from 'react-redux';
-
-import { getSiteConfig, useIntl } from '@openedx/frontend-base';
-import {
-  Form,
-  Icon,
-  Spinner,
-  StatefulButton,
-  Tab,
-  Tabs,
-} from '@openedx/paragon';
-import { ChevronLeft } from '@openedx/paragon/icons';
-import PropTypes from 'prop-types';
-import { Helmet } from 'react-helmet';
-import { useNavigate, useParams } from 'react-router-dom';
-
-import BaseContainer from '../base-container';
-import { PasswordField } from '../common-components';
-import {
-  LETTER_REGEX, LOGIN_PAGE, NUMBER_REGEX, RESET_PAGE,
-} from '../data/constants';
-import { getAllPossibleQueryParams, updatePathWithQueryParams, windowScrollTo } from '../data/utils';
-import { resetPassword, validateToken } from './data/actions';
-import {
-  FORM_SUBMISSION_ERROR, PASSWORD_RESET_ERROR, PASSWORD_VALIDATION_ERROR, TOKEN_STATE,
-} from './data/constants';
-import { resetPasswordResultSelector } from './data/selectors';
-import { validatePassword } from './data/service';
-import messages from './messages';
-import ResetPasswordFailure from './ResetPasswordFailure';
-
-const ResetPasswordPage = (props) => {
-  const { formatMessage } = useIntl();
-  const newPasswordError = formatMessage(messages['password.validation.message']);
-
-  const [newPassword, setNewPassword] = useState('');
-  const [confirmPassword, setConfirmPassword] = useState('');
-  const [formErrors, setFormErrors] = useState({});
-  const [errorCode, setErrorCode] = useState(null);
-  const { token } = useParams();
-  const navigate = useNavigate();
-
-  useEffect(() => {
-    if (props.status === PASSWORD_RESET_ERROR) {
-      navigate(updatePathWithQueryParams(RESET_PAGE));
-    }
-    if (props.status === 'success') {
-      navigate(updatePathWithQueryParams(LOGIN_PAGE));
-    }
-    if (props.status !== TOKEN_STATE.PENDING) {
-      setErrorCode(props.status);
-    }
-    if (props.status === PASSWORD_VALIDATION_ERROR) {
-      setFormErrors({ newPassword: newPasswordError });
-    }
-  }, [props.status]);
-
-  const validatePasswordFromBackend = async (password) => {
-    let errorMessage = '';
-    try {
-      const payload = {
-        reset_password_page: true,
-        password,
-      };
-      errorMessage = await validatePassword(payload);
-    } catch (err) {
-      errorMessage = '';
-    }
-    setFormErrors({ ...formErrors, newPassword: errorMessage });
-  };
-
-  const validateInput = (name, value) => {
-    switch (name) {
-      case 'newPassword':
-        if (!value || !LETTER_REGEX.test(value) || !NUMBER_REGEX.test(value) || value.length < 8) {
-          formErrors.newPassword = formatMessage(messages['password.validation.message']);
-        } else {
-          validatePasswordFromBackend(value);
-        }
-        break;
-      case 'confirmPassword':
-        if (!value) {
-          formErrors.confirmPassword = formatMessage(messages['confirm.your.password']);
-        } else if (value !== newPassword) {
-          formErrors.confirmPassword = formatMessage(messages['passwords.do.not.match']);
-        } else {
-          formErrors.confirmPassword = '';
-        }
-        break;
-      default:
-        break;
-    }
-    setFormErrors({ ...formErrors });
-    return !Object.values(formErrors).some(x => (x !== ''));
-  };
-
-  const handleOnBlur = (event) => {
-    const { name, value } = event.target;
-    validateInput(name, value);
-  };
-
-  const handleConfirmPasswordChange = (e) => {
-    const { value } = e.target;
-
-    setConfirmPassword(value);
-    validateInput('confirmPassword', value);
-  };
-
-  const handleOnFocus = (e) => {
-    setFormErrors({ ...formErrors, [e.target.name]: '' });
-  };
-
-  const handleSubmit = (e) => {
-    e.preventDefault();
-
-    const isPasswordValid = validateInput('newPassword', newPassword);
-    const isPasswordConfirmed = validateInput('confirmPassword', confirmPassword);
-
-    if (isPasswordValid && isPasswordConfirmed) {
-      const formPayload = {
-        new_password1: newPassword,
-        new_password2: confirmPassword,
-      };
-      const params = getAllPossibleQueryParams();
-      props.resetPassword(formPayload, props.token, params);
-    } else {
-      setErrorCode(FORM_SUBMISSION_ERROR);
-      windowScrollTo({ left: 0, top: 0, behavior: 'smooth' });
-    }
-  };
-
-  const tabTitle = (
-    <div className="d-inline-flex flex-wrap align-items-center">
-      <Icon src={ChevronLeft} />
-      <span className="ml-2">{formatMessage(messages['sign.in'])}</span>
-    </div>
-  );
-
-  if (props.status === TOKEN_STATE.PENDING && token) {
-    props.validateToken(token);
-    return (
-      <Spinner animation="border" variant="primary" className="spinner--position-centered" />
-    );
-  } else {
-    return (
-      <BaseContainer>
-        <div>
-          <Helmet>
-            <title>
-              {formatMessage(messages['reset.password.page.title'], { siteName: getSiteConfig().siteName })}
-            </title>
-          </Helmet>
-          <Tabs activeKey="" id="controlled-tab" onSelect={(key) => navigate(updatePathWithQueryParams(key))}>
-            <Tab title={tabTitle} eventKey={LOGIN_PAGE} />
-          </Tabs>
-          <div id="main-content" className="main-content">
-            <div className="mw-xs">
-              <ResetPasswordFailure errorCode={errorCode} errorMsg={props.errorMsg} />
-              <h4>{formatMessage(messages['reset.password'])}</h4>
-              <p className="mb-4">{formatMessage(messages['reset.password.page.instructions'])}</p>
-              <Form id="set-reset-password-form" name="set-reset-password-form">
-                <PasswordField
-                  name="newPassword"
-                  value={newPassword}
-                  handleChange={(e) => setNewPassword(e.target.value)}
-                  handleBlur={handleOnBlur}
-                  handleFocus={handleOnFocus}
-                  errorMessage={formErrors.newPassword}
-                  floatingLabel={formatMessage(messages['new.password.label'])}
-                />
-                <PasswordField
-                  name="confirmPassword"
-                  value={confirmPassword}
-                  handleChange={handleConfirmPasswordChange}
-                  handleFocus={handleOnFocus}
-                  errorMessage={formErrors.confirmPassword}
-                  showRequirements={false}
-                  floatingLabel={formatMessage(messages['confirm.password.label'])}
-                />
-                <StatefulButton
-                  id="submit-new-password"
-                  name="submit-new-password"
-                  type="submit"
-                  variant="brand"
-                  className="reset-password--button"
-                  state={props.status}
-                  labels={{
-                    default: formatMessage(messages['reset.password']),
-                    pending: '',
-                  }}
-                  onClick={e => handleSubmit(e)}
-                  onMouseDown={(e) => e.preventDefault()}
-                />
-              </Form>
-            </div>
-          </div>
-        </div>
-      </BaseContainer>
-    );
-  }
-};
-
-ResetPasswordPage.defaultProps = {
-  status: null,
-  token: null,
-  errorMsg: null,
-};
-
-ResetPasswordPage.propTypes = {
-  resetPassword: PropTypes.func.isRequired,
-  validateToken: PropTypes.func.isRequired,
-  token: PropTypes.string,
-  status: PropTypes.string,
-  errorMsg: PropTypes.string,
-};
-
-export default connect(
-  resetPasswordResultSelector,
-  {
-    resetPassword,
-    validateToken,
-  },
-)(ResetPasswordPage);

package/src/reset-password/ResetPasswordSuccess.jsx

@@ -1,19 +0,0 @@
-import { useIntl } from '@openedx/frontend-base';
-import { Alert } from '@openedx/paragon';
-
-import messages from './messages';
-
-const ResetPasswordSuccess = () => {
-  const { formatMessage } = useIntl();
-
-  return (
-    <Alert id="reset-password-success" variant="success" className="mb-5">
-      <Alert.Heading>
-        {formatMessage(messages['reset.password.success.heading'])}
-      </Alert.Heading>
-      <p>{formatMessage(messages['reset.password.success'])}</p>
-    </Alert>
-  );
-};
-
-export default ResetPasswordSuccess;