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

package/src/register/components/ConfigurableRegistrationForm.jsx

@@ -1,244 +0,0 @@
-import { useEffect, useMemo } from 'react';
-
-import {
-  useAppConfig,
-  getSiteConfig, getLocale, useIntl
-} from '@openedx/frontend-base';
-import PropTypes from 'prop-types';
-
-import { getCountryList } from '../../data/countries';
-import { FormFieldRenderer } from '../../field-renderer';
-import { FIELDS } from '../data/constants';
-import messages from '../messages';
-import { CountryField, HonorCode, TermsOfService } from '../RegistrationFields';
-
-/**
- * Fields on registration page that are not the default required fields (name, email, username, password).
- * These configurable required fields are defined on the backend using REGISTRATION_EXTRA_FIELDS setting.
- *
- * Country and Honor Code/Terms of Services (if enabled) will appear at the bottom of the form, even if they
- * appear higher in order returned by backend. This is to make the user experience better.
- *
- * */
-const ConfigurableRegistrationForm = (props) => {
-  const { formatMessage } = useIntl();
-  const {
-    email,
-    fieldDescriptions,
-    fieldErrors,
-    formFields,
-    setFieldErrors,
-    setFormFields,
-    autoSubmitRegistrationForm,
-  } = props;
-  const {
-    ENABLE_DYNAMIC_REGISTRATION_FIELDS,
-    MARKETING_EMAILS_OPT_IN,
-  } = useAppConfig();
-
-  /**
-   * The reason for adding the entry 'United States' is that Chrome auto-fills the form with 'United
-   * States' instead of 'United States of America', which does not exist in the country dropdown list.
-   * So we added the United States entry in the dropdown list.
-   */
-  const countryList = useMemo(() => getCountryList(getLocale()).concat([{ code: 'US', name: 'United States' }]), []);
-
-  let showTermsOfServiceAndHonorCode = false;
-  let showCountryField = false;
-
-  const formFieldDescriptions = [];
-  const honorCode = [];
-  const flags = {
-    showConfigurableRegistrationFields: ENABLE_DYNAMIC_REGISTRATION_FIELDS,
-    showMarketingEmailOptInCheckbox: MARKETING_EMAILS_OPT_IN,
-  };
-
-  /**
-   * If auto submitting register form, we will check tos and honor code fields if they exist for feature parity.
-   */
-  useEffect(() => {
-    if (autoSubmitRegistrationForm) {
-      if (Object.keys(fieldDescriptions).includes(FIELDS.HONOR_CODE)) {
-        setFormFields(prevState => ({
-          ...prevState,
-          [FIELDS.HONOR_CODE]: true,
-        }));
-      }
-      if (Object.keys(fieldDescriptions).includes(FIELDS.TERMS_OF_SERVICE)) {
-        setFormFields(prevState => ({
-          ...prevState,
-          [FIELDS.TERMS_OF_SERVICE]: true,
-        }));
-      }
-    }
-  }, [autoSubmitRegistrationForm]); // eslint-disable-line react-hooks/exhaustive-deps
-
-  const handleErrorChange = (fieldName, error) => {
-    if (fieldName) {
-      setFieldErrors(prevErrors => ({
-        ...prevErrors,
-        [fieldName]: error,
-      }));
-    }
-  };
-
-  const handleOnChange = (event, countryValue = null) => {
-    const { name } = event.target;
-    let value;
-    if (countryValue) {
-      value = { ...countryValue };
-    } else {
-      value = event.target.type === 'checkbox' ? event.target.checked : event.target.value;
-      if (event.target.type === 'checkbox') {
-        setFieldErrors(prevErrors => ({ ...prevErrors, [name]: '' }));
-      }
-    }
-    setFormFields(prevState => ({ ...prevState, [name]: value }));
-  };
-
-  const handleOnBlur = (event) => {
-    const { name, value } = event.target;
-    let error = '';
-    if ((!value || !value.trim()) && fieldDescriptions[name]?.error_message) {
-      error = fieldDescriptions[name].error_message;
-    } else if (name === 'confirm_email' && value !== email) {
-      error = formatMessage(messages['email.do.not.match']);
-    }
-    setFieldErrors(prevErrors => ({ ...prevErrors, [name]: error }));
-  };
-
-  const handleOnFocus = (event) => {
-    const { name } = event.target;
-    setFieldErrors(prevErrors => ({ ...prevErrors, [name]: '' }));
-  };
-
-  if (flags.showConfigurableRegistrationFields) {
-    Object.keys(fieldDescriptions).forEach(fieldName => {
-      const fieldData = fieldDescriptions[fieldName];
-      switch (fieldData.name) {
-        case FIELDS.COUNTRY:
-          showCountryField = true;
-          break;
-        case FIELDS.HONOR_CODE:
-          if (fieldData.type === 'tos_and_honor_code') {
-            showTermsOfServiceAndHonorCode = true;
-          } else {
-            honorCode.push(
-              <span key={fieldData.name}>
-                <HonorCode
-                  fieldType={fieldData.type}
-                  value={formFields[fieldData.name]}
-                  onChangeHandler={handleOnChange}
-                  errorMessage={fieldErrors[fieldData.name]}
-                />
-              </span>,
-            );
-          }
-          break;
-        case FIELDS.TERMS_OF_SERVICE:
-          honorCode.push(
-            <span key={fieldData.name}>
-              <TermsOfService
-                value={formFields[fieldData.name]}
-                onChangeHandler={handleOnChange}
-                errorMessage={fieldErrors[fieldData.name]}
-              />
-            </span>,
-          );
-          break;
-        default:
-          formFieldDescriptions.push(
-            <span key={fieldData.name}>
-              <FormFieldRenderer
-                fieldData={fieldData}
-                value={formFields[fieldData.name]}
-                onChangeHandler={handleOnChange}
-                handleBlur={handleOnBlur}
-                handleFocus={handleOnFocus}
-                errorMessage={fieldErrors[fieldData.name]}
-                isRequired
-              />
-            </span>,
-          );
-      }
-    });
-  }
-
-  if (showCountryField) {
-    formFieldDescriptions.push(
-      <span key="country">
-        <CountryField
-          countryList={countryList}
-          selectedCountry={formFields.country}
-          errorMessage={fieldErrors.country || ''}
-          onChangeHandler={handleOnChange}
-          handleErrorChange={handleErrorChange}
-          onBlurHandler={handleOnBlur}
-          onFocusHandler={handleOnFocus}
-        />
-      </span>,
-    );
-  }
-
-  if (flags.showMarketingEmailOptInCheckbox) {
-    formFieldDescriptions.push(
-      <span key="marketing_email_opt_in">
-        <FormFieldRenderer
-          fieldData={{
-            type: 'checkbox',
-            label: formatMessage(messages['registration.opt.in.label'], { siteName: getSiteConfig().siteName }),
-            name: 'marketingEmailsOptIn',
-          }}
-          value={formFields.marketingEmailsOptIn}
-          className="form-field--checkbox"
-          onChangeHandler={handleOnChange}
-          handleBlur={handleOnBlur}
-          handleFocus={handleOnFocus}
-        />
-      </span>,
-    );
-  }
-
-  if (showTermsOfServiceAndHonorCode) {
-    formFieldDescriptions.push(
-      <span key="honor_code">
-        <HonorCode fieldType="tos_and_honor_code" onChangeHandler={handleOnChange} value={formFields.honor_code} />
-      </span>,
-    );
-  }
-
-  return (
-    <>
-      {formFieldDescriptions}
-      <div>
-        {honorCode}
-      </div>
-    </>
-  );
-};
-
-ConfigurableRegistrationForm.propTypes = {
-  email: PropTypes.string.isRequired,
-  fieldDescriptions: PropTypes.shape({}),
-  fieldErrors: PropTypes.shape({
-    country: PropTypes.string,
-  }).isRequired,
-  formFields: PropTypes.shape({
-    country: PropTypes.shape({
-      displayValue: PropTypes.string,
-      countryCode: PropTypes.string,
-    }),
-    honor_code: PropTypes.bool,
-    marketingEmailsOptIn: PropTypes.bool,
-  }).isRequired,
-  setFieldErrors: PropTypes.func.isRequired,
-  setFormFields: PropTypes.func.isRequired,
-  autoSubmitRegistrationForm: PropTypes.bool,
-};
-
-ConfigurableRegistrationForm.defaultProps = {
-  fieldDescriptions: {},
-  autoSubmitRegistrationForm: false,
-};
-
-export default ConfigurableRegistrationForm;

package/src/register/components/RegistrationFailure.jsx

@@ -1,80 +0,0 @@
-import { useEffect } from 'react';
-
-import { getSiteConfig, useIntl } from '@openedx/frontend-base';
-import { Alert } from '@openedx/paragon';
-import { Error } from '@openedx/paragon/icons';
-import PropTypes from 'prop-types';
-
-import { windowScrollTo } from '../../data/utils';
-import {
-  FORBIDDEN_REQUEST,
-  INTERNAL_SERVER_ERROR,
-  TPA_AUTHENTICATION_FAILURE,
-  TPA_SESSION_EXPIRED,
-} from '../data/constants';
-import messages from '../messages';
-
-const RegistrationFailureMessage = (props) => {
-  const { formatMessage } = useIntl();
-  const {
-    context, errorCode, failureCount,
-  } = props;
-
-  useEffect(() => {
-    windowScrollTo({ left: 0, top: 0, behavior: 'smooth' });
-  }, [errorCode, failureCount]);
-
-  if (!errorCode) {
-    return null;
-  }
-
-  let errorMessage;
-  switch (errorCode) {
-    case INTERNAL_SERVER_ERROR:
-      errorMessage = formatMessage(messages['registration.request.server.error']);
-      break;
-    case FORBIDDEN_REQUEST:
-      errorMessage = formatMessage(messages['registration.rate.limit.error']);
-      break;
-    case TPA_AUTHENTICATION_FAILURE:
-      errorMessage = formatMessage(
-        messages['registration.tpa.authentication.failure'],
-        {
-          platform_name: getSiteConfig().siteName,
-          lineBreak: <br />,
-          errorMessage: context.errorMessage,
-        }
-      );
-      break;
-    case TPA_SESSION_EXPIRED:
-      errorMessage = formatMessage(messages['registration.tpa.session.expired'], { provider: context.provider });
-      break;
-    default:
-      errorMessage = formatMessage(messages['registration.empty.form.submission.error']);
-      break;
-  }
-
-  return (
-    <Alert id="validation-errors" className="mb-5" variant="danger" icon={Error}>
-      <Alert.Heading>{formatMessage(messages['registration.request.failure.header'])}</Alert.Heading>
-      <p>{errorMessage}</p>
-    </Alert>
-  );
-};
-
-RegistrationFailureMessage.defaultProps = {
-  context: {
-    errorMessage: null,
-  },
-};
-
-RegistrationFailureMessage.propTypes = {
-  context: PropTypes.shape({
-    provider: PropTypes.string,
-    errorMessage: PropTypes.string,
-  }),
-  errorCode: PropTypes.string.isRequired,
-  failureCount: PropTypes.number.isRequired,
-};
-
-export default RegistrationFailureMessage;