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

package/src/register/RegistrationPage.jsx

@@ -1,428 +0,0 @@
-import {
-  useEffect, useMemo, useState,
-} from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-
-import {
-  useAppConfig,
-  getSiteConfig,
-  sendPageEvent, sendTrackEvent,
-  useIntl
-} from '@openedx/frontend-base';
-import { Form, Spinner, StatefulButton } from '@openedx/paragon';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import { Helmet } from 'react-helmet';
-import Skeleton from 'react-loading-skeleton';
-
-import {
-  InstitutionLogistration,
-  PasswordField,
-  RedirectLogistration,
-  ThirdPartyAuthAlert,
-} from '../common-components';
-import { getThirdPartyAuthContext as getRegistrationDataFromBackend } from '../common-components/data/actions';
-import EnterpriseSSO from '../common-components/EnterpriseSSO';
-import ThirdPartyAuth from '../common-components/ThirdPartyAuth';
-import {
-  COMPLETE_STATE, PENDING_STATE, REGISTER_PAGE,
-} from '../data/constants';
-import {
-  getAllPossibleQueryParams, getTpaHint, getTpaProvider, isHostAvailableInQueryParams, setCookie,
-} from '../data/utils';
-import ConfigurableRegistrationForm from './components/ConfigurableRegistrationForm';
-import RegistrationFailure from './components/RegistrationFailure';
-import {
-  backupRegistrationFormBegin,
-  clearRegistrationBackendError,
-  registerNewUser,
-  setEmailSuggestionInStore,
-  setUserPipelineDataLoaded,
-} from './data/actions';
-import {
-  FORM_SUBMISSION_ERROR,
-  TPA_AUTHENTICATION_FAILURE,
-} from './data/constants';
-import getBackendValidations from './data/selectors';
-import {
-  isFormValid, prepareRegistrationPayload,
-} from './data/utils';
-import messages from './messages';
-import { EmailField, NameField, UsernameField } from './RegistrationFields';
-
-/**
- * Main Registration Page component
- */
-const RegistrationPage = (props) => {
-  const { formatMessage } = useIntl();
-  const dispatch = useDispatch();
-  const registrationEmbedded = isHostAvailableInQueryParams();
-  const platformName = getSiteConfig().siteName;
-  const {
-    handleInstitutionLogin,
-    institutionLogin,
-  } = props;
-  const {
-    ENABLE_AUTO_GENERATED_USERNAME,
-    ENABLE_PROGRESSIVE_PROFILING_ON_AUTHN,
-    MARKETING_EMAILS_OPT_IN,
-    USER_RETENTION_COOKIE_NAME,
-    SESSION_COOKIE_DOMAIN,
-  } = useAppConfig();
-  const flags = {
-    showMarketingEmailOptInCheckbox: MARKETING_EMAILS_OPT_IN,
-    autoGeneratedUsernameEnabled: ENABLE_AUTO_GENERATED_USERNAME,
-  };
-
-  const backedUpFormData = useSelector(state => state.register.registrationFormData);
-  const registrationError = useSelector(state => state.register.registrationError);
-  const registrationErrorCode = registrationError?.errorCode;
-  const registrationResult = useSelector(state => state.register.registrationResult);
-  const shouldBackupState = useSelector(state => state.register.shouldBackupState);
-  const userPipelineDataLoaded = useSelector(state => state.register.userPipelineDataLoaded);
-  const submitState = useSelector(state => state.register.submitState);
-
-  const fieldDescriptions = useSelector(state => state.commonComponents.fieldDescriptions);
-  const optionalFields = useSelector(state => state.commonComponents.optionalFields);
-  const thirdPartyAuthApiStatus = useSelector(state => state.commonComponents.thirdPartyAuthApiStatus);
-  const autoSubmitRegForm = useSelector(state => state.commonComponents.thirdPartyAuthContext.autoSubmitRegForm);
-  const thirdPartyAuthErrorMessage = useSelector(state => state.commonComponents.thirdPartyAuthContext.errorMessage);
-  const finishAuthUrl = useSelector(state => state.commonComponents.thirdPartyAuthContext.finishAuthUrl);
-  const currentProvider = useSelector(state => state.commonComponents.thirdPartyAuthContext.currentProvider);
-  const providers = useSelector(state => state.commonComponents.thirdPartyAuthContext.providers);
-  const secondaryProviders = useSelector(state => state.commonComponents.thirdPartyAuthContext.secondaryProviders);
-  const pipelineUserDetails = useSelector(state => state.commonComponents.thirdPartyAuthContext.pipelineUserDetails);
-
-  const backendValidations = useSelector(getBackendValidations);
-  const queryParams = useMemo(() => getAllPossibleQueryParams(), []);
-  const tpaHint = useMemo(() => getTpaHint(), []);
-
-  const [formFields, setFormFields] = useState({ ...backedUpFormData.formFields });
-  const [configurableFormFields, setConfigurableFormFields] = useState({ ...backedUpFormData.configurableFormFields });
-  const [errors, setErrors] = useState({ ...backedUpFormData.errors });
-  const [errorCode, setErrorCode] = useState({ type: '', count: 0 });
-  const [formStartTime, setFormStartTime] = useState(null);
-  // temporary error state for embedded experience because we don't want to show errors on blur
-  const [temporaryErrors, setTemporaryErrors] = useState({ ...backedUpFormData.errors });
-
-  const { cta, host } = queryParams;
-  const buttonLabel = cta
-    ? formatMessage(messages['create.account.cta.button'], { label: cta })
-    : formatMessage(messages['create.account.for.free.button']);
-
-  /**
-   * Set the userPipelineDetails data in formFields for only first time
-   */
-  useEffect(() => {
-    if (!userPipelineDataLoaded && thirdPartyAuthApiStatus === COMPLETE_STATE) {
-      if (thirdPartyAuthErrorMessage) {
-        setErrorCode(prevState => ({ type: TPA_AUTHENTICATION_FAILURE, count: prevState.count + 1 }));
-      }
-      if (pipelineUserDetails && Object.keys(pipelineUserDetails).length !== 0) {
-        const { name = '', username = '', email = '' } = pipelineUserDetails;
-        setFormFields(prevState => ({
-          ...prevState, name, username, email,
-        }));
-        dispatch(setUserPipelineDataLoaded(true));
-      }
-    }
-  }, [ // eslint-disable-line react-hooks/exhaustive-deps
-    thirdPartyAuthApiStatus,
-    thirdPartyAuthErrorMessage,
-    pipelineUserDetails,
-    userPipelineDataLoaded,
-  ]);
-
-  useEffect(() => {
-    if (!formStartTime) {
-      sendPageEvent('login_and_registration', 'register');
-      const payload = { ...queryParams, is_register_page: true };
-      if (tpaHint) {
-        payload.tpa_hint = tpaHint;
-      }
-      dispatch(getRegistrationDataFromBackend(payload));
-      setFormStartTime(Date.now());
-    }
-  }, [dispatch, formStartTime, queryParams, tpaHint]);
-
-  /**
-   * Backup the registration form in redux when register page is toggled.
-   */
-  useEffect(() => {
-    if (shouldBackupState) {
-      dispatch(backupRegistrationFormBegin({
-        ...backedUpFormData,
-        configurableFormFields: { ...configurableFormFields },
-        formFields: { ...formFields },
-        errors: { ...errors },
-      }));
-    }
-  }, [shouldBackupState, configurableFormFields, formFields, errors, dispatch, backedUpFormData]);
-
-  useEffect(() => {
-    if (backendValidations) {
-      if (registrationEmbedded) {
-        setTemporaryErrors(prevErrors => ({ ...prevErrors, ...backendValidations }));
-      } else {
-        setErrors(prevErrors => ({ ...prevErrors, ...backendValidations }));
-      }
-    }
-  }, [backendValidations, registrationEmbedded]);
-
-  useEffect(() => {
-    if (registrationErrorCode) {
-      setErrorCode(prevState => ({ type: registrationErrorCode, count: prevState.count + 1 }));
-    }
-  }, [registrationErrorCode]);
-
-  useEffect(() => {
-    if (registrationResult.success) {
-      // This event is used by GTM
-      sendTrackEvent('edx.bi.user.account.registered.client', {});
-
-      // This is used by the "User Retention Rate Event" on GTM
-      setCookie(USER_RETENTION_COOKIE_NAME, true, SESSION_COOKIE_DOMAIN);
-    }
-  }, [registrationResult]);
-
-  const handleOnChange = (event) => {
-    const { name } = event.target;
-    const value = event.target.type === 'checkbox' ? event.target.checked : event.target.value;
-    if (registrationError[name]) {
-      dispatch(clearRegistrationBackendError(name));
-    }
-    setErrors(prevErrors => ({ ...prevErrors, [name]: '' }));
-    setFormFields(prevState => ({ ...prevState, [name]: value }));
-  };
-
-  const handleErrorChange = (fieldName, error) => {
-    if (registrationEmbedded) {
-      setTemporaryErrors(prevErrors => ({
-        ...prevErrors,
-        [fieldName]: error,
-      }));
-      if (error === '' && errors[fieldName] !== '') {
-        setErrors(prevErrors => ({
-          ...prevErrors,
-          [fieldName]: error,
-        }));
-      }
-    } else {
-      setErrors(prevErrors => ({
-        ...prevErrors,
-        [fieldName]: error,
-      }));
-    }
-  };
-
-  const registerUser = () => {
-    const totalRegistrationTime = (Date.now() - formStartTime) / 1000;
-    let payload = { ...formFields };
-
-    if (currentProvider) {
-      delete payload.password;
-      payload.social_auth_provider = currentProvider;
-    }
-    if (flags.autoGeneratedUsernameEnabled) {
-      delete payload.username;
-    }
-
-    // Validating form data before submitting
-    const { isValid, fieldErrors, emailSuggestion } = isFormValid(
-      payload,
-      registrationEmbedded ? temporaryErrors : errors,
-      configurableFormFields,
-      fieldDescriptions,
-      formatMessage,
-    );
-    setErrors({ ...fieldErrors });
-    dispatch(setEmailSuggestionInStore(emailSuggestion));
-
-    // returning if not valid
-    if (!isValid) {
-      setErrorCode(prevState => ({ type: FORM_SUBMISSION_ERROR, count: prevState.count + 1 }));
-      return;
-    }
-
-    // Preparing payload for submission
-    payload = prepareRegistrationPayload(
-      payload,
-      configurableFormFields,
-      flags.showMarketingEmailOptInCheckbox,
-      totalRegistrationTime,
-      queryParams
-    );
-
-    // making register call
-    dispatch(registerNewUser(payload));
-  };
-
-  const handleSubmit = (e) => {
-    e.preventDefault();
-    registerUser();
-  };
-
-  useEffect(() => {
-    if (autoSubmitRegForm && userPipelineDataLoaded) {
-      registerUser();
-    }
-  }, [autoSubmitRegForm, userPipelineDataLoaded]); // eslint-disable-line react-hooks/exhaustive-deps
-
-  const renderForm = () => {
-    if (institutionLogin) {
-      return (
-        <InstitutionLogistration
-          secondaryProviders={secondaryProviders}
-          headingTitle={formatMessage(messages['register.institution.login.page.title'])}
-        />
-      );
-    }
-    return (
-      <>
-        <Helmet>
-          <title>{formatMessage(messages['register.page.title'], { siteName: getSiteConfig().siteName })}</title>
-        </Helmet>
-        <RedirectLogistration
-          host={host}
-          authenticatedUser={registrationResult.authenticatedUser}
-          success={registrationResult.success}
-          redirectUrl={registrationResult.redirectUrl}
-          finishAuthUrl={finishAuthUrl}
-          optionalFields={optionalFields}
-          registrationEmbedded={registrationEmbedded}
-          redirectToProgressiveProfilingPage={
-            ENABLE_PROGRESSIVE_PROFILING_ON_AUTHN && !!Object.keys(optionalFields.fields).length
-          }
-        />
-        {autoSubmitRegForm && !errorCode.type ? (
-          <div className="mw-xs mt-5 text-center">
-            <Spinner animation="border" variant="primary" id="tpa-spinner" />
-          </div>
-        ) : (
-          <div
-            className={classNames(
-              'mw-xs mt-3',
-              { 'w-100 m-auto pt-4 main-content': registrationEmbedded },
-            )}
-          >
-            <ThirdPartyAuthAlert
-              currentProvider={currentProvider}
-              platformName={platformName}
-              referrer={REGISTER_PAGE}
-            />
-            <RegistrationFailure
-              errorCode={errorCode.type}
-              failureCount={errorCode.count}
-              context={{ provider: currentProvider, errorMessage: thirdPartyAuthErrorMessage }}
-            />
-            <Form id="registration-form" name="registration-form">
-              <NameField
-                name="name"
-                value={formFields.name}
-                shouldFetchUsernameSuggestions={!formFields.username.trim()}
-                handleChange={handleOnChange}
-                handleErrorChange={handleErrorChange}
-                errorMessage={errors.name}
-                helpText={[formatMessage(messages['help.text.name'])]}
-                floatingLabel={formatMessage(messages['registration.fullname.label'])}
-              />
-              <EmailField
-                name="email"
-                value={formFields.email}
-                confirmEmailValue={configurableFormFields?.confirm_email}
-                handleErrorChange={handleErrorChange}
-                handleChange={handleOnChange}
-                errorMessage={errors.email}
-                helpText={[formatMessage(messages['help.text.email'])]}
-                floatingLabel={formatMessage(messages['registration.email.label'])}
-              />
-              {!flags.autoGeneratedUsernameEnabled && (
-                <UsernameField
-                  name="username"
-                  spellCheck="false"
-                  value={formFields.username}
-                  handleChange={handleOnChange}
-                  handleErrorChange={handleErrorChange}
-                  errorMessage={errors.username}
-                  helpText={[formatMessage(messages['help.text.username.1']), formatMessage(messages['help.text.username.2'])]}
-                  floatingLabel={formatMessage(messages['registration.username.label'])}
-                />
-              )}
-              {!currentProvider && (
-                <PasswordField
-                  name="password"
-                  value={formFields.password}
-                  handleChange={handleOnChange}
-                  handleErrorChange={handleErrorChange}
-                  errorMessage={errors.password}
-                  floatingLabel={formatMessage(messages['registration.password.label'])}
-                />
-              )}
-              <ConfigurableRegistrationForm
-                email={formFields.email}
-                fieldErrors={errors}
-                formFields={configurableFormFields}
-                setFieldErrors={registrationEmbedded ? setTemporaryErrors : setErrors}
-                setFormFields={setConfigurableFormFields}
-                autoSubmitRegisterForm={autoSubmitRegForm}
-                fieldDescriptions={fieldDescriptions}
-              />
-              <StatefulButton
-                id="register-user"
-                name="register-user"
-                type="submit"
-                variant="brand"
-                className="register-button mt-4 mb-4"
-                state={submitState}
-                labels={{
-                  default: buttonLabel,
-                  pending: '',
-                }}
-                onClick={handleSubmit}
-                onMouseDown={(e) => e.preventDefault()}
-              />
-              {!registrationEmbedded && (
-                <ThirdPartyAuth
-                  currentProvider={currentProvider}
-                  providers={providers}
-                  secondaryProviders={secondaryProviders}
-                  handleInstitutionLogin={handleInstitutionLogin}
-                  thirdPartyAuthApiStatus={thirdPartyAuthApiStatus}
-                />
-              )}
-            </Form>
-          </div>
-        )}
-
-      </>
-    );
-  };
-
-  if (tpaHint) {
-    if (thirdPartyAuthApiStatus === PENDING_STATE) {
-      return <Skeleton height={36} />;
-    }
-    const { provider, skipHintedLogin } = getTpaProvider(tpaHint, providers, secondaryProviders);
-    if (skipHintedLogin) {
-      window.location.href = getSiteConfig().lmsBaseUrl + provider.registerUrl;
-      return null;
-    }
-    return provider ? <EnterpriseSSO provider={provider} /> : renderForm();
-  }
-  return (
-    renderForm()
-  );
-};
-
-RegistrationPage.propTypes = {
-  institutionLogin: PropTypes.bool,
-  // Actions
-  handleInstitutionLogin: PropTypes.func,
-};
-
-RegistrationPage.defaultProps = {
-  handleInstitutionLogin: null,
-  institutionLogin: false,
-};
-
-export default RegistrationPage;