\n
\n {formatMessage(messages['reset.password'])}
\n{formatMessage(messages['reset.password.page.instructions'])}
\n \n\n 
\n
\n )\n : (\n \n
\n )}\n {provider.name}\n \n {referrer === LOGIN_PAGE\n ? formatMessage(messages['sso.sign.in.with'], { providerName: provider.name })\n : formatMessage(messages['sso.create.account.using'], { providerName: provider.name })}\n \n \n ));\n\n // eslint-disable-next-line react/jsx-no-useless-fragment\n return <>{socialAuth};\n};\n\nSocialAuthProviders.defaultProps = {\n referrer: LOGIN_PAGE,\n socialAuthProviders: [],\n};\n\nSocialAuthProviders.propTypes = {\n referrer: PropTypes.string,\n socialAuthProviders: PropTypes.arrayOf(PropTypes.shape({\n id: PropTypes.string,\n name: PropTypes.string,\n iconClass: PropTypes.string,\n iconImage: PropTypes.string,\n loginUrl: PropTypes.string,\n registerUrl: PropTypes.string,\n skipRegistrationForm: PropTypes.bool,\n })),\n};\n\nexport default SocialAuthProviders;\n","import React from 'react';\n\nimport { getConfig } from '@edx/frontend-platform';\nimport { useIntl } from '@edx/frontend-platform/i18n';\nimport { Alert } from '@edx/paragon';\nimport PropTypes from 'prop-types';\n\nimport { LOGIN_PAGE, REGISTER_PAGE } from '../data/constants';\nimport messages from './messages';\n\nconst ThirdPartyAuthAlert = (props) => {\n const { formatMessage } = useIntl();\n const { currentProvider, referrer } = props;\n const platformName = getConfig().SITE_NAME;\n let message;\n\n if (referrer === LOGIN_PAGE) {\n message = formatMessage(messages['login.third.party.auth.account.not.linked'], { currentProvider, platformName });\n } else {\n message = formatMessage(messages['register.third.party.auth.account.not.linked'], { currentProvider, platformName });\n }\n\n if (!currentProvider) {\n return null;\n }\n\n return (\n <>\n { message }
\n{formatMessage(messages['registration.using.tpa.form.heading'])}
\n ) : null}\n \n );\n};\n\nThirdPartyAuthAlert.defaultProps = {\n currentProvider: '',\n referrer: LOGIN_PAGE,\n};\n\nThirdPartyAuthAlert.propTypes = {\n currentProvider: PropTypes.string,\n referrer: PropTypes.string,\n};\n\nexport default ThirdPartyAuthAlert;\n","import React from 'react';\n\nimport { getConfig } from '@edx/frontend-platform';\nimport { useIntl } from '@edx/frontend-platform/i18n';\nimport { Button, Hyperlink, Icon } from '@edx/paragon';\nimport { Institution } from '@edx/paragon/icons';\nimport PropTypes from 'prop-types';\n\nimport messages from './messages';\n\n/**\n * This component renders the Institution login button\n * */\nexport const RenderInstitutionButton = props => {\n const { onSubmitHandler, buttonTitle } = props;\n\n return (\n\n
\n \n
\n \n {headingTitle}\n
\n\n {formatMessage(messages['institution.login.page.sub.heading'])}\n
\n\n \n \n {secondaryProviders.map(provider => (\n
\n
\n \n );\n};\n\nconst LogistrationDefaultProps = {\n secondaryProviders: [],\n buttonTitle: '',\n};\nconst LogistrationProps = {\n secondaryProviders: PropTypes.arrayOf(PropTypes.shape({\n name: PropTypes.string.isRequired,\n loginUrl: PropTypes.string.isRequired,\n })),\n};\n\nRenderInstitutionButton.propTypes = {\n ...LogistrationProps,\n buttonTitle: PropTypes.string,\n onSubmitHandler: PropTypes.func.isRequired,\n\n};\nRenderInstitutionButton.defaultProps = {\n ...LogistrationDefaultProps,\n};\n\nInstitutionLogistration.propTypes = {\n ...LogistrationProps,\n headingTitle: PropTypes.string,\n};\nInstitutionLogistration.defaultProps = {\n ...LogistrationDefaultProps,\n headingTitle: '',\n};\n\nexport default InstitutionLogistration;\n","import { AsyncActionType } from '../../data/utils';\n\nexport const THIRD_PARTY_AUTH_CONTEXT = new AsyncActionType('THIRD_PARTY_AUTH', 'GET_THIRD_PARTY_AUTH_CONTEXT');\nexport const THIRD_PARTY_AUTH_CONTEXT_CLEAR_ERROR_MSG = 'THIRD_PARTY_AUTH_CONTEXT_CLEAR_ERROR_MSG';\n\n// Third party auth context\nexport const getThirdPartyAuthContext = (urlParams) => ({\n type: THIRD_PARTY_AUTH_CONTEXT.BASE,\n payload: { urlParams },\n});\n\nexport const getThirdPartyAuthContextBegin = () => ({\n type: THIRD_PARTY_AUTH_CONTEXT.BEGIN,\n});\n\nexport const getThirdPartyAuthContextSuccess = (fieldDescriptions, optionalFields, thirdPartyAuthContext) => ({\n type: THIRD_PARTY_AUTH_CONTEXT.SUCCESS,\n payload: { fieldDescriptions, optionalFields, thirdPartyAuthContext },\n});\n\nexport const getThirdPartyAuthContextFailure = () => ({\n type: THIRD_PARTY_AUTH_CONTEXT.FAILURE,\n});\n\nexport const clearThirdPartyAuthContextErrorMessage = () => ({\n type: THIRD_PARTY_AUTH_CONTEXT_CLEAR_ERROR_MSG,\n});\n","import { COMPLETE_STATE, PENDING_STATE } from '../../data/constants';\nimport { THIRD_PARTY_AUTH_CONTEXT, THIRD_PARTY_AUTH_CONTEXT_CLEAR_ERROR_MSG } from './actions';\n\nexport const defaultState = {\n fieldDescriptions: {},\n optionalFields: {},\n thirdPartyAuthApiStatus: null,\n thirdPartyAuthContext: {\n currentProvider: null,\n finishAuthUrl: null,\n countryCode: null,\n providers: [],\n secondaryProviders: [],\n pipelineUserDetails: null,\n errorMessage: null,\n },\n};\n\nconst reducer = (state = defaultState, action = {}) => {\n switch (action.type) {\n case THIRD_PARTY_AUTH_CONTEXT.BEGIN:\n return {\n ...state,\n thirdPartyAuthApiStatus: PENDING_STATE,\n };\n case THIRD_PARTY_AUTH_CONTEXT.SUCCESS: {\n return {\n ...state,\n fieldDescriptions: action.payload.fieldDescriptions.fields,\n optionalFields: action.payload.optionalFields,\n thirdPartyAuthContext: action.payload.thirdPartyAuthContext,\n thirdPartyAuthApiStatus: COMPLETE_STATE,\n };\n }\n case THIRD_PARTY_AUTH_CONTEXT.FAILURE:\n return {\n ...state,\n thirdPartyAuthApiStatus: COMPLETE_STATE,\n };\n case THIRD_PARTY_AUTH_CONTEXT_CLEAR_ERROR_MSG:\n return {\n ...state,\n thirdPartyAuthApiStatus: PENDING_STATE,\n thirdPartyAuthContext: {\n ...state.thirdPartyAuthContext,\n errorMessage: null,\n },\n };\n default:\n return state;\n }\n};\n\nexport default reducer;\n","import { AsyncActionType } from '../../data/utils';\n\nexport const BACKUP_REGISTRATION_DATA = new AsyncActionType('REGISTRATION', 'BACKUP_REGISTRATION_DATA');\nexport const REGISTER_FORM_VALIDATIONS = new AsyncActionType('REGISTRATION', 'GET_FORM_VALIDATIONS');\nexport const REGISTER_NEW_USER = new AsyncActionType('REGISTRATION', 'REGISTER_NEW_USER');\nexport const REGISTER_CLEAR_USERNAME_SUGGESTIONS = 'REGISTRATION_CLEAR_USERNAME_SUGGESTIONS';\nexport const REGISTERATION_CLEAR_BACKEND_ERROR = 'REGISTERATION_CLEAR_BACKEND_ERROR';\nexport const REGISTER_SET_COUNTRY_CODE = 'REGISTER_SET_COUNTRY_CODE';\nexport const REGISTER_SET_USER_PIPELINE_DATA_LOADED = 'REGISTER_SET_USER_PIPELINE_DATA_LOADED';\n\n// Backup registration form\nexport const backupRegistrationForm = () => ({\n type: BACKUP_REGISTRATION_DATA.BASE,\n});\n\nexport const backupRegistrationFormBegin = (data) => ({\n type: BACKUP_REGISTRATION_DATA.BEGIN,\n payload: { ...data },\n});\n\n// Validate fields from the backend\nexport const fetchRealtimeValidations = (formPayload) => ({\n type: REGISTER_FORM_VALIDATIONS.BASE,\n payload: { formPayload },\n});\n\nexport const fetchRealtimeValidationsBegin = () => ({\n type: REGISTER_FORM_VALIDATIONS.BEGIN,\n});\n\nexport const fetchRealtimeValidationsSuccess = (validations) => ({\n type: REGISTER_FORM_VALIDATIONS.SUCCESS,\n payload: { validations },\n});\n\nexport const fetchRealtimeValidationsFailure = () => ({\n type: REGISTER_FORM_VALIDATIONS.FAILURE,\n});\n\n// Register\nexport const registerNewUser = registrationInfo => ({\n type: REGISTER_NEW_USER.BASE,\n payload: { registrationInfo },\n});\n\nexport const registerNewUserBegin = () => ({\n type: REGISTER_NEW_USER.BEGIN,\n});\n\nexport const registerNewUserSuccess = (redirectUrl, success) => ({\n type: REGISTER_NEW_USER.SUCCESS,\n payload: { redirectUrl, success },\n\n});\n\nexport const registerNewUserFailure = (error) => ({\n type: REGISTER_NEW_USER.FAILURE,\n payload: { ...error },\n});\n\nexport const clearUsernameSuggestions = () => ({\n type: REGISTER_CLEAR_USERNAME_SUGGESTIONS,\n});\n\nexport const clearRegistertionBackendError = (fieldName) => ({\n type: REGISTERATION_CLEAR_BACKEND_ERROR,\n payload: fieldName,\n});\n\nexport const setCountryFromThirdPartyAuthContext = (countryCode) => ({\n type: REGISTER_SET_COUNTRY_CODE,\n payload: { countryCode },\n});\n\nexport const setUserPipelineDataLoaded = (value) => ({\n type: REGISTER_SET_USER_PIPELINE_DATA_LOADED,\n payload: { value },\n});\n","import { getConfig } from '@edx/frontend-platform';\nimport { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';\n\n// eslint-disable-next-line import/prefer-default-export\nexport async function getThirdPartyAuthContext(urlParams) {\n const requestConfig = {\n headers: { 'Content-Type': 'application/x-www-form-urlencoded' },\n params: urlParams,\n isPublic: true,\n };\n\n const { data } = await getAuthenticatedHttpClient()\n .get(\n `${getConfig().LMS_BASE_URL}/api/mfe_context`,\n requestConfig,\n )\n .catch((e) => {\n throw (e);\n });\n return {\n fieldDescriptions: data.registrationFields || data.registration_fields,\n optionalFields: data.optionalFields || data.optional_fields,\n thirdPartyAuthContext: data.contextData || data.context_data,\n };\n}\n","import { logError } from '@edx/frontend-platform/logging';\nimport { call, put, takeEvery } from 'redux-saga/effects';\n\nimport { setCountryFromThirdPartyAuthContext } from '../../register/data/actions';\nimport {\n getThirdPartyAuthContextBegin,\n getThirdPartyAuthContextFailure,\n getThirdPartyAuthContextSuccess,\n THIRD_PARTY_AUTH_CONTEXT,\n} from './actions';\nimport {\n getThirdPartyAuthContext,\n} from './service';\n\nexport function* fetchThirdPartyAuthContext(action) {\n try {\n yield put(getThirdPartyAuthContextBegin());\n const {\n fieldDescriptions, optionalFields, thirdPartyAuthContext,\n } = yield call(getThirdPartyAuthContext, action.payload.urlParams);\n\n yield put(setCountryFromThirdPartyAuthContext(thirdPartyAuthContext.countryCode));\n yield put(getThirdPartyAuthContextSuccess(fieldDescriptions, optionalFields, thirdPartyAuthContext));\n } catch (e) {\n yield put(getThirdPartyAuthContextFailure());\n logError(e);\n }\n}\n\nexport default function* saga() {\n yield takeEvery(THIRD_PARTY_AUTH_CONTEXT.BASE, fetchThirdPartyAuthContext);\n}\n","import { createSelector } from 'reselect';\n\nexport const storeName = 'commonComponents';\n\nexport const commonComponentsSelector = state => ({ ...state[storeName] });\n\nexport const thirdPartyAuthContextSelector = createSelector(\n commonComponentsSelector,\n commonComponents => commonComponents.thirdPartyAuthContext,\n);\n\nexport const fieldDescriptionSelector = createSelector(\n commonComponentsSelector,\n commonComponents => commonComponents.fieldDescriptions,\n);\n\nexport const optionalFieldsSelector = createSelector(\n commonComponentsSelector,\n commonComponents => commonComponents.optionalFields,\n);\n\nexport const tpaProvidersSelector = createSelector(\n commonComponentsSelector,\n commonComponents => ({\n providers: commonComponents.thirdPartyAuthContext.providers,\n secondaryProviders: commonComponents.thirdPartyAuthContext.secondaryProviders,\n }),\n);\n","import React, { useState } from 'react';\n\nimport {\n Form, TransitionReplace,\n} from '@edx/paragon';\nimport PropTypes from 'prop-types';\n\nconst FormGroup = (props) => {\n const [hasFocus, setHasFocus] = useState(false);\n\n const handleFocus = (e) => {\n setHasFocus(true);\n if (props.handleFocus) { props.handleFocus(e); }\n };\n const handleClick = (e) => {\n if (props.handleClick) { props.handleClick(e); }\n };\n const handleOnBlur = (e) => {\n setHasFocus(false);\n if (props.handleBlur) { props.handleBlur(e); }\n };\n\n return (\n | \n | \n
\n \n ))}\n
\n
\n );\n};\n\nAuthLargeLayout.propTypes = {\n username: PropTypes.string.isRequired,\n};\n\nexport default AuthLargeLayout;\n","import React from 'react';\n\nimport { getConfig } from '@edx/frontend-platform';\nimport { useIntl } from '@edx/frontend-platform/i18n';\nimport { Hyperlink, Image } from '@edx/paragon';\nimport PropTypes from 'prop-types';\n\nimport messages from './messages';\n\nconst AuthMediumLayout = ({ username }) => {\n const { formatMessage } = useIntl();\n\n return (\n <>\n \n \n \n \n
\n \n \n
\n \n \n {formatMessage(messages['complete.your.profile.1'])}\n
\n
\n \n {formatMessage(messages['welcome.to.platform'], { siteName: getConfig().SITE_NAME, username })}\n
\n\n {formatMessage(messages['complete.your.profile.1'])}\n \n {formatMessage(messages['complete.your.profile.2'])}\n \n
\n \n \n
\n \n
\n \n );\n};\n\nAuthMediumLayout.propTypes = {\n username: PropTypes.string.isRequired,\n};\n\nexport default AuthMediumLayout;\n","import React from 'react';\n\nimport { getConfig } from '@edx/frontend-platform';\nimport { useIntl } from '@edx/frontend-platform/i18n';\nimport { Hyperlink, Image } from '@edx/paragon';\nimport PropTypes from 'prop-types';\n\nimport messages from './messages';\n\nconst AuthSmallLayout = ({ username }) => {\n const { formatMessage } = useIntl();\n\n return (\n \n \n \n
\n \n \n
\n \n \n {formatMessage(messages['complete.your.profile.1'])}\n
\n
\n \n {formatMessage(messages['welcome.to.platform'], { siteName: getConfig().SITE_NAME, username })}\n
\n\n {formatMessage(messages['complete.your.profile.1'])}\n \n {formatMessage(messages['complete.your.profile.2'])}\n \n
\n \n \n
\n \n \n \n \n
\n );\n};\n\nAuthSmallLayout.propTypes = {\n username: PropTypes.string.isRequired,\n};\n\nexport default AuthSmallLayout;\n","import React from 'react';\n\nimport CookiePolicyBanner from '@edx/frontend-component-cookie-policy-banner';\nimport { getConfig } from '@edx/frontend-platform';\nimport { getAuthenticatedUser } from '@edx/frontend-platform/auth';\nimport { getLocale } from '@edx/frontend-platform/i18n';\nimport { breakpoints } from '@edx/paragon';\nimport classNames from 'classnames';\nimport PropTypes from 'prop-types';\nimport MediaQuery from 'react-responsive';\n\nimport AuthLargeLayout from './AuthLargeLayout';\nimport AuthMediumLayout from './AuthMediumLayout';\nimport AuthSmallLayout from './AuthSmallLayout';\nimport LargeLayout from './LargeLayout';\nimport MediumLayout from './MediumLayout';\nimport SmallLayout from './SmallLayout';\nimport { Hyperlink, Image } from '@edx/paragon';\n\nconst BaseComponent = ({ children, showWelcomeBanner }) => {\n const authenticatedUser = showWelcomeBanner ? getAuthenticatedUser() : null;\n const username = authenticatedUser ? authenticatedUser.username : null;\n\n return (\n <>\n {getConfig().ENABLE_COOKIE_POLICY_BANNER ? \n \n
\n \n \n {formatMessage(messages['complete.your.profile.1'])}\n
\n
\n \n {formatMessage(messages['welcome.to.platform'], { siteName: getConfig().SITE_NAME, username })}\n
\n\n {formatMessage(messages['complete.your.profile.1'])}\n \n {formatMessage(messages['complete.your.profile.2'])}\n \n
\n \n
\n \n
\n \n );\n};\n\nBaseComponent.defaultProps = {\n showWelcomeBanner: false,\n};\n\nBaseComponent.propTypes = {\n children: PropTypes.node.isRequired,\n showWelcomeBanner: PropTypes.bool,\n};\n\nexport default BaseComponent;\n","import React from 'react';\n\nimport { getConfig } from '@edx/frontend-platform';\nimport { useIntl } from '@edx/frontend-platform/i18n';\nimport {\n Button, Form,\n} from '@edx/paragon';\nimport { faSignInAlt } from '@fortawesome/free-solid-svg-icons';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport PropTypes from 'prop-types';\n\nimport { LOGIN_PAGE, SUPPORTED_ICON_CLASSES } from '../data/constants';\nimport messages from './messages';\n\n/**\n * This component renders the Single sign-on (SSO) button only for the tpa provider passed\n * */\nconst EnterpriseSSO = (props) => {\n const { formatMessage } = useIntl();\n const tpaProvider = props.provider;\n const disablePublicAccountCreation = getConfig().ALLOW_PUBLIC_ACCOUNT_CREATION === false;\n\n const handleSubmit = (e, url) => {\n e.preventDefault();\n window.location.href = getConfig().LMS_BASE_URL + url;\n };\n\n const handleClick = (e) => {\n e.preventDefault();\n window.location.href = LOGIN_PAGE;\n };\n\n if (tpaProvider) {\n return (\n \n {children}\n
\n \n
\n );\n }\n return ;\n};\n\nEnterpriseSSO.defaultProps = {\n provider: {\n id: '',\n name: '',\n iconClass: '',\n iconImage: '',\n loginUrl: '',\n registerUrl: '',\n },\n};\n\nEnterpriseSSO.propTypes = {\n provider: PropTypes.shape({\n id: PropTypes.string,\n name: PropTypes.string,\n iconClass: PropTypes.string,\n iconImage: PropTypes.string,\n loginUrl: PropTypes.string,\n registerUrl: PropTypes.string,\n }),\n};\n\nexport default EnterpriseSSO;\n","import { defineMessages } from '@edx/frontend-platform/i18n';\n\nconst messages = defineMessages({\n 'sign.in': {\n id: 'sign.in',\n defaultMessage: 'Sign in',\n description: 'Sign in toggle text',\n },\n 'reset.password.page.title': {\n id: 'reset.password.page.title',\n defaultMessage: 'Reset Password | {siteName}',\n description: 'page title',\n },\n 'reset.password': {\n id: 'reset.password',\n defaultMessage: 'Reset password',\n description: 'The page heading and button text for reset password page.',\n },\n 'reset.password.page.instructions': {\n id: 'reset.password.page.instructions',\n defaultMessage: 'Enter and confirm your new password.',\n description: 'Instructions message for reset password page.',\n },\n 'new.password.label': {\n id: 'new.password.label',\n defaultMessage: 'New password',\n description: 'New password field label for the reset password page.',\n },\n 'confirm.password.label': {\n id: 'confirm.password.label',\n defaultMessage: 'Confirm password',\n description: 'Confirm password field label for the reset password page.',\n },\n // validation errors\n 'password.validation.message': {\n id: 'password.validation.message',\n defaultMessage: 'Password criteria has not been met',\n description: 'Error message for empty or invalid password',\n },\n 'passwords.do.not.match': {\n id: 'passwords.do.not.match',\n defaultMessage: 'Passwords do not match',\n description: 'Password format error.',\n },\n 'confirm.your.password': {\n id: 'confirm.your.password',\n defaultMessage: 'Confirm your password',\n description: 'Field validation message when confirm password is empty',\n },\n // alert banner strings\n 'reset.password.failure.heading': {\n id: 'reset.password.failure.heading',\n defaultMessage: 'We couldn\\'t reset your password.',\n description: 'Heading for reset password request failure',\n },\n 'reset.password.form.submission.error': {\n id: 'reset.password.form.submission.error',\n defaultMessage: 'Please check your responses and try again.',\n description: 'Error message for reset password page',\n },\n 'reset.server.rate.limit.error': {\n id: 'reset.server.rate.limit.error',\n defaultMessage: 'Too many requests.',\n description: 'Too many request at server end point',\n },\n 'reset.password.success.heading': {\n id: 'reset.password.success.heading',\n defaultMessage: 'Password reset complete.',\n description: 'Heading for alert box when reset password is successful',\n },\n 'reset.password.success': {\n id: 'reset.password.success',\n defaultMessage: 'Your password has been reset. Sign in to your account.',\n description: 'Reset password success message',\n },\n 'internal.server.error': {\n id: 'internal.server.error',\n defaultMessage: 'An error has occurred. Try refreshing the page, or check your internet connection.',\n description: 'Error message that appears when server responds with 500 error code',\n },\n 'rate.limit.error': {\n id: 'rate.limit.error',\n defaultMessage: 'An error has occurred because of too many requests. Please try again after some time.',\n description: 'Error message that appears when server responds with 429 error code',\n },\n});\n\nexport default messages;\n","import React from 'react';\n\nimport { useIntl } from '@edx/frontend-platform/i18n';\nimport { Alert } from '@edx/paragon';\n\nimport messages from './messages';\n\nconst ResetPasswordSuccess = () => {\n const { formatMessage } = useIntl();\n\n return (\n \n
\n \n \n
\n {formatMessage(messages['reset.password.success'])}
\n{formatMessage(messages['non.compliant.password.message'])}
\n \n );\n break;\n }\n case FORBIDDEN_REQUEST:\n errorList ={formatMessage(messages['login.rate.limit.reached.message'])}
;\n break;\n case INACTIVE_USER: {\n const supportLink = (\n \n {formatMessage(messages['contact.support.link'], { platformName: context.platformName })}\n \n );\n errorList = (\n\n
\n
{formatMessage(messages['login.form.invalid.error.message'])}
;\n break;\n case FAILED_LOGIN_ATTEMPT: {\n resetLink = (\n\n
\n
{formatMessage(messages['account.locked.out.message.1'])}
\n\n
{formatMessage(messages['login.incorrect.credentials.error'])}
;\n } else if (context.failureCount === 2) {\n errorList = (\n\n
{formatMessage(messages['login.tpa.authentication.failure'], {\n platform_name: getConfig().SITE_NAME,\n lineBreak:
,\n errorMessage: context.errorMessage,\n })}\n
{formatMessage(messages['internal.server.error.message'])}
;\n break;\n }\n\n return (\n\n {intl.formatMessage(messages['login.other.options.heading'])}\n
\n )}\n\n {(!isEnterpriseLoginDisabled && isSocialAuthActive) && (\n \n
\n )}\n \n )}\n \n );\n }\n\n renderForm(\n currentProvider,\n providers,\n secondaryProviders,\n thirdPartyAuthContext,\n thirdPartyAuthApiStatus,\n submitState,\n intl,\n ) {\n const activationMsgType = getActivationStatus();\n if (this.props.institutionLogin) {\n return (\n \n
\n \n );\n }\n\n render() {\n const {\n intl, submitState, thirdPartyAuthContext, thirdPartyAuthApiStatus,\n } = this.props;\n const { currentProvider, providers, secondaryProviders } = this.props.thirdPartyAuthContext;\n\n if (this.tpaHint) {\n if (thirdPartyAuthApiStatus === PENDING_STATE) {\n return {errorMessage}
\n\n
\n );\n\n if (props.status === TOKEN_STATE.PENDING) {\n const { token } = props.match.params;\n if (token) {\n props.validateToken(token);\n return \n \n \n {formatMessage(messages['reset.password.page.title'], { siteName: getConfig().SITE_NAME })}\n \n \n setKey(k)}>\n \n { key && (\n
\n \n
\n \n {formatMessage(messages['registration.username.suggestion.label'])}\n
\n );\n if (usernameSuggestions.length > 0 && errorMessage && props.value === ' ') {\n className = 'suggested-username-with-error';\n iconButton = \n {usernameSuggestions.map((username, index) => (\n handleSuggestionClick(e, 'username', username)}\n >\n {username}\n \n ))}\n
\n {iconButton}\n \n
\n );\n};\n\nCountryField.propTypes = {\n countryList: PropTypes.arrayOf(\n PropTypes.shape({\n code: PropTypes.string,\n name: PropTypes.string,\n }),\n ).isRequired,\n errorMessage: PropTypes.string,\n onBlurHandler: PropTypes.func.isRequired,\n onChangeHandler: PropTypes.func.isRequired,\n onFocusHandler: PropTypes.func.isRequired,\n selectedCountry: PropTypes.shape({\n displayValue: PropTypes.string,\n countryCode: PropTypes.string,\n }),\n};\n\nCountryField.defaultProps = {\n errorMessage: null,\n selectedCountry: {\n value: '',\n },\n};\n\nexport default CountryField;\n","import React, { useEffect } from 'react';\n\nimport { getConfig } from '@edx/frontend-platform';\nimport { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';\nimport { Form, Hyperlink } from '@edx/paragon';\nimport PropTypes from 'prop-types';\n\nimport messages from '../messages';\n\nconst HonorCode = (props) => {\n const { formatMessage } = useIntl();\n const {\n errorMessage, onChangeHandler, fieldType, value,\n } = props;\n\n useEffect(() => {\n if (fieldType === 'tos_and_honor_code' && !value) {\n onChangeHandler({ target: { name: 'honor_code', value: true } });\n }\n }, [fieldType, onChangeHandler, value]);\n\n if (fieldType === 'tos_and_honor_code') {\n return (\n \n { dropDownItems?.length > 0 ? dropDownItems : null }\n
\n \n \n {formatMessage(messages['terms.of.service.and.honor.code'])}\n \n ),\n privacyPolicy: (\n \n {formatMessage(messages['privacy.policy'])}\n \n ),\n }}\n />\n
\n );\n }\n\n return (\n \n \n \n {formatMessage(messages['honor.code'])}\n \n ),\n }}\n />\n \n {errorMessage && (\n \n {errorMessage}\n \n )}\n
\n );\n};\n\nHonorCode.defaultProps = {\n errorMessage: '',\n onChangeHandler: null,\n fieldType: 'honor_code',\n value: false,\n};\n\nHonorCode.propTypes = {\n errorMessage: PropTypes.string,\n onChangeHandler: PropTypes.func,\n fieldType: PropTypes.string,\n value: PropTypes.bool,\n};\n\nexport default HonorCode;\n","import React from 'react';\n\nimport { getConfig } from '@edx/frontend-platform';\nimport { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';\nimport { Form, Hyperlink } from '@edx/paragon';\nimport PropTypes from 'prop-types';\n\nimport messages from '../messages';\n\nconst TermsOfService = (props) => {\n const { formatMessage } = useIntl();\n const {\n errorMessage, onChangeHandler, value,\n } = props;\n\n return (\n \n \n \n {formatMessage(messages['terms.of.service'])}\n \n ),\n }}\n />\n \n {errorMessage && (\n \n {errorMessage}\n \n )}\n
\n );\n};\n\nTermsOfService.defaultProps = {\n errorMessage: '',\n value: false,\n};\n\nTermsOfService.propTypes = {\n errorMessage: PropTypes.string,\n onChangeHandler: PropTypes.func.isRequired,\n value: PropTypes.bool,\n};\n\nexport default TermsOfService;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { FormGroup } from '../../common-components';\n\nconst GenderField = (props) => {\n const { value, onChange } = props;\n\n const genderOptions = [\n { label: 'Male', value: 'm' },\n { label: 'Female', value: 'f' },\n { label: 'Other/Prefer Not to Say', value: 'o' },\n ];\n\n {genderOptions.map((option) => (\n \n ))}\n\n\n return (\n \n \n onChange(e.target.value)}\n >\n {genderOptions.map((option) => (\n \n ))}\n\n \n
\n );\n};\n\nGenderField.propTypes = {\n value: PropTypes.string,\n onChange: PropTypes.func.isRequired,\n};\n\nexport default GenderField;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { FormGroup } from '../../common-components';\n\nconst JoinRecoftcField = (props) => {\n const { value, onChange } = props;\n\n const joinRecoftcOptions = [\n { label: 'Yes', value: 'yes' },\n { label: 'No', value: 'no' },\n ];\n\n return (\n \n \n onChange(e.target.value)}\n >\n {joinRecoftcOptions.map((option) => (\n \n ))}\n \n
\n );\n};\n\nJoinRecoftcField.propTypes = {\n value: PropTypes.string.isRequired,\n onChange: PropTypes.func.isRequired,\n};\n\nexport default JoinRecoftcField;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { FormGroup } from '../../common-components';\n\nconst SectorField = (props) => {\n const { value, onChange } = props;\n\n const sectorOptions = [\n { label: 'Public', value: 'public' },\n { label: 'Private', value: 'private' },\n { label: 'Civil Society', value: 'cso' },\n { label: 'Network', value: 'network' },\n { label: 'Media', value: 'media' },\n { label: 'Other', value: 'other' },\n ];\n\n return (\n \n \n onChange(e.target.value)}\n >\n \n {sectorOptions.map((option) => (\n \n ))}\n \n
\n );\n};\n\nSectorField.propTypes = {\n value: PropTypes.string,\n onChange: PropTypes.func.isRequired,\n};\n\nexport default SectorField;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst YearOfBirthField = ({ value, onChange }) => {\n const currentYear = new Date().getFullYear();\n const last100Years = Array.from({ length: 100 }, (_, index) => currentYear - index -1); // -1 to dont show current year\n\n return (\n \n \n onChange(e.target.value)}\n >\n \n {last100Years.map((year) => (\n \n ))}\n \n
\n );\n};\n\nYearOfBirthField.propTypes = {\n value: PropTypes.string,\n onChange: PropTypes.func.isRequired,\n};\n\nexport default YearOfBirthField;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst LevelOfEducationField = ({ value, onChange }) => {\n const educationOptions = [\n { label: 'Doctorate', value: 'p' },\n { label: \"Master's or professional degree\", value: 'm' },\n { label: \"Bachelor's degree\", value: 'b' },\n { label: 'Associate degree', value: 'a' },\n { label: 'Secondary/high school', value: 'hs' },\n { label: 'Junior secondary/junior high/middle school', value: 'jhs' },\n { label: 'Elementary/primary school', value: 'el' },\n { label: 'No formal education', value: 'none' },\n { label: 'Other education', value: 'other' },\n ];\n\n return (\n \n \n\n\n onChange(e.target.value)}\n >\n \n {educationOptions.map((option) => (\n \n ))}\n \n
\n );\n};\n\nLevelOfEducationField.propTypes = {\n value: PropTypes.string,\n onChange: PropTypes.func.isRequired,\n};\n\nexport default LevelOfEducationField;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst GoalsField = ({ value, onChange }) => {\n return (\n \n \n\n onChange(e.target.value)}\n style={{width: '100%'}}\n />\n
\n );\n};\n\nGoalsField.propTypes = {\n value: PropTypes.string,\n onChange: PropTypes.func.isRequired,\n};\n\nexport default GoalsField;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst NewCountryField = (props) => {\n const { value, onChange } = props;\n\n // List of countries in ascending order by name\n const countries = [\n { code: 'AF', name: 'Afghanistan' },\n { code: 'AX', name: 'Åland Islands' },\n { code: 'AL', name: 'Albania' },\n { code: 'DZ', name: 'Algeria' },\n { code: 'AS', name: 'American Samoa' },\n { code: 'AD', name: 'Andorra' },\n { code: 'AO', name: 'Angola' },\n { code: 'AI', name: 'Anguilla' },\n { code: 'AQ', name: 'Antarctica' },\n { code: 'AG', name: 'Antigua and Barbuda' },\n { code: 'AR', name: 'Argentina' },\n { code: 'AM', name: 'Armenia' },\n { code: 'AW', name: 'Aruba' },\n { code: 'AU', name: 'Australia' },\n { code: 'AT', name: 'Austria' },\n { code: 'AZ', name: 'Azerbaijan' },\n { code: 'BS', name: 'Bahamas' },\n { code: 'BH', name: 'Bahrain' },\n { code: 'BD', name: 'Bangladesh' },\n { code: 'BB', name: 'Barbados' },\n { code: 'BY', name: 'Belarus' },\n { code: 'BE', name: 'Belgium' },\n { code: 'BZ', name: 'Belize' },\n { code: 'BJ', name: 'Benin' },\n { code: 'BM', name: 'Bermuda' },\n { code: 'BT', name: 'Bhutan' },\n { code: 'BO', name: 'Bolivia' },\n { code: 'BQ', name: 'Bonaire, Sint Eustatius and Saba' },\n { code: 'BA', name: 'Bosnia and Herzegovina' },\n { code: 'BW', name: 'Botswana' },\n { code: 'BV', name: 'Bouvet Island' },\n { code: 'BR', name: 'Brazil' },\n { code: 'IO', name: 'British Indian Ocean Territory' },\n { code: 'BN', name: 'Brunei' },\n { code: 'BG', name: 'Bulgaria' },\n { code: 'BF', name: 'Burkina Faso' },\n { code: 'BI', name: 'Burundi' },\n { code: 'CV', name: 'Cabo Verde' },\n { code: 'KH', name: 'Cambodia' },\n { code: 'CM', name: 'Cameroon' },\n { code: 'CA', name: 'Canada' },\n { code: 'KY', name: 'Cayman Islands' },\n { code: 'CF', name: 'Central African Republic' },\n { code: 'TD', name: 'Chad' },\n { code: 'CL', name: 'Chile' },\n { code: 'CN', name: 'China' },\n { code: 'CX', name: 'Christmas Island' },\n { code: 'CC', name: 'Cocos (Keeling) Islands' },\n { code: 'CO', name: 'Colombia' },\n { code: 'KM', name: 'Comoros' },\n { code: 'CG', name: 'Congo' },\n { code: 'CD', name: 'Congo (the Democratic Republic of the)' },\n { code: 'CK', name: 'Cook Islands' },\n { code: 'CR', name: 'Costa Rica' },\n { code: 'CI', name: 'Côte d Ivoire' },\n { code: 'HR', name: 'Croatia' },\n { code: 'CU', name: 'Cuba' },\n { code: 'CW', name: 'Curaçao' },\n { code: 'CY', name: 'Cyprus' },\n { code: 'CZ', name: 'Czechia' },\n { code: 'DK', name: 'Denmark' },\n { code: 'DJ', name: 'Djibouti' },\n { code: 'DM', name: 'Dominica' },\n { code: 'DO', name: 'Dominican Republic' },\n { code: 'EC', name: 'Ecuador' },\n { code: 'EG', name: 'Egypt' },\n { code: 'SV', name: 'El Salvador' },\n { code: 'GQ', name: 'Equatorial Guinea' },\n { code: 'ER', name: 'Eritrea' },\n { code: 'EE', name: 'Estonia' },\n { code: 'ET', name: 'Ethiopia' },\n { code: 'FK', name: 'Falkland Islands [Malvinas]' },\n { code: 'FO', name: 'Faroe Islands' },\n { code: 'FJ', name: 'Fiji' },\n { code: 'FI', name: 'Finland' },\n { code: 'FR', name: 'France' },\n { code: 'GF', name: 'French Guiana' },\n { code: 'PF', name: 'French Polynesia' },\n { code: 'TF', name: 'French Southern Territories' },\n { code: 'GA', name: 'Gabon' },\n { code: 'GM', name: 'Gambia' },\n { code: 'GE', name: 'Georgia' },\n { code: 'DE', name: 'Germany' },\n { code: 'GH', name: 'Ghana' },\n { code: 'GI', name: 'Gibraltar' },\n { code: 'GR', name: 'Greece' },\n { code: 'GL', name: 'Greenland' },\n { code: 'GD', name: 'Grenada' },\n { code: 'GP', name: 'Guadeloupe' },\n { code: 'GU', name: 'Guam' },\n { code: 'GT', name: 'Guatemala' },\n { code: 'GG', name: 'Guernsey' },\n { code: 'GN', name: 'Guinea' },\n { code: 'GW', name: 'Guinea-Bissau' },\n { code: 'GY', name: 'Guyana' },\n { code: 'HT', name: 'Haiti' },\n { code: 'HM', name: 'Heard Island and McDonald Islands' },\n { code: 'VA', name: 'Holy See' },\n { code: 'HN', name: 'Honduras' },\n { code: 'HK', name: 'Hong Kong' },\n { code: 'HU', name: 'Hungary' },\n { code: 'IS', name: 'Iceland' },\n { code: 'IN', name: 'India' },\n { code: 'ID', name: 'Indonesia' },\n { code: 'IR', name: 'Iran' },\n { code: 'IQ', name: 'Iraq' },\n { code: 'IE', name: 'Ireland' },\n { code: 'IM', name: 'Isle of Man' },\n { code: 'IL', name: 'Israel' },\n { code: 'IT', name: 'Italy' },\n { code: 'JM', name: 'Jamaica' },\n { code: 'JP', name: 'Japan' },\n { code: 'JE', name: 'Jersey' },\n { code: 'JO', name: 'Jordan' },\n { code: 'KZ', name: 'Kazakhstan' },\n { code: 'KE', name: 'Kenya' },\n { code: 'KI', name: 'Kiribati' },\n { code: 'XK', name: 'Kosovo' },\n { code: 'KW', name: 'Kuwait' },\n { code: 'KG', name: 'Kyrgyzstan' },\n { code: 'LA', name: 'Laos' },\n { code: 'LV', name: 'Latvia' },\n { code: 'LB', name: 'Lebanon' },\n { code: 'LS', name: 'Lesotho' },\n { code: 'LR', name: 'Liberia' },\n { code: 'LY', name: 'Libya' },\n { code: 'LI', name: 'Liechtenstein' },\n { code: 'LT', name: 'Lithuania' },\n { code: 'LU', name: 'Luxembourg' },\n { code: 'MO', name: 'Macao' },\n { code: 'MK', name: 'Macedonia' },\n { code: 'MG', name: 'Madagascar' },\n { code: 'MW', name: 'Malawi' },\n { code: 'MY', name: 'Malaysia' },\n { code: 'MV', name: 'Maldives' },\n { code: 'ML', name: 'Mali' },\n { code: 'MT', name: 'Malta' },\n { code: 'MH', name: 'Marshall Islands' },\n { code: 'MQ', name: 'Martinique' },\n { code: 'MR', name: 'Mauritania' },\n { code: 'MU', name: 'Mauritius' },\n { code: 'YT', name: 'Mayotte' },\n { code: 'MX', name: 'Mexico' },\n { code: 'FM', name: 'Micronesia (Federated States of)' },\n { code: 'MD', name: 'Moldova' },\n { code: 'MC', name: 'Monaco' },\n { code: 'MN', name: 'Mongolia' },\n { code: 'ME', name: 'Montenegro' },\n { code: 'MS', name: 'Montserrat' },\n { code: 'MA', name: 'Morocco' },\n { code: 'MZ', name: 'Mozambique' },\n { code: 'MM', name: 'Myanmar' },\n { code: 'NA', name: 'Namibia' },\n { code: 'NR', name: 'Nauru' },\n { code: 'NP', name: 'Nepal' },\n { code: 'NL', name: 'Netherlands' },\n { code: 'NC', name: 'New Caledonia'},\n { code: 'NO', name: 'Norway' },\n { code: 'OM', name: 'Oman' },\n { code: 'PK', name: 'Pakistan' },\n { code: 'PW', name: 'Palau' },\n { code: 'PS', name: 'Palestine, State of' },\n { code: 'PA', name: 'Panama' },\n { code: 'PG', name: 'Papua New Guinea' },\n { code: 'PY', name: 'Paraguay' },\n { code: 'PE', name: 'Peru' },\n { code: 'PH', name: 'Philippines' },\n { code: 'PN', name: 'Pitcairn' },\n { code: 'PL', name: 'Poland' },\n { code: 'PT', name: 'Portugal' },\n { code: 'PR', name: 'Puerto Rico' },\n { code: 'QA', name: 'Qatar' },\n { code: 'RE', name: 'Réunion' },\n { code: 'RO', name: 'Romania' },\n { code: 'RU', name: 'Russia' },\n { code: 'RW', name: 'Rwanda' },\n { code: 'BL', name: 'Saint Barthélemy' },\n { code: 'SH', name: 'Saint Helena, Ascension and Tristan da Cunha' },\n { code: 'KN', name: 'Saint Kitts and Nevis' },\n { code: 'LC', name: 'Saint Lucia' },\n { code: 'MF', name: 'Saint Martin (French part)' },\n { code: 'PM', name: 'Saint Pierre and Miquelon' },\n { code: 'VC', name: 'Saint Vincent and the Grenadines' },\n { code: 'WS', name: 'Samoa' },\n { code: 'SM', name: 'San Marino' },\n { code: 'ST', name: 'Sao Tome and Principe' },\n { code: 'SA', name: 'Saudi Arabia' },\n { code: 'SN', name: 'Senegal' },\n { code: 'RS', name: 'Serbia' },\n { code: 'SC', name: 'Seychelles' },\n { code: 'SL', name: 'Sierra Leone' },\n { code: 'SG', name: 'Singapore' },\n { code: 'SX', name: 'Sint Maarten (Dutch part)' },\n { code: 'SK', name: 'Slovakia' },\n { code: 'SI', name: 'Slovenia' },\n { code: 'SB', name: 'Solomon Islands' },\n { code: 'SO', name: 'Somalia' },\n { code: 'ZA', name: 'South Africa' },\n { code: 'GS', name: 'South Georgia and the South Sandwich Islands' },\n { code: 'KR', name: 'South Korea' },\n { code: 'SS', name: 'South Sudan' },\n { code: 'ES', name: 'Spain' },\n { code: 'LK', name: 'Sri Lanka' },\n { code: 'SD', name: 'Sudan' },\n { code: 'SR', name: 'Suriname' },\n { code: 'SJ', name: 'Svalbard and Jan Mayen' },\n { code: 'SZ', name: 'Swaziland' },\n { code: 'SE', name: 'Sweden' },\n { code: 'CH', name: 'Switzerland' },\n { code: 'SY', name: 'Syria' },\n { code: 'TW', name: 'Taiwan' },\n { code: 'TJ', name: 'Tajikistan' },\n { code: 'TZ', name: 'Tanzania' },\n { code: 'TH', name: 'Thailand' },\n { code: 'TL', name: 'Timor-Leste' },\n { code: 'TG', name: 'Togo' },\n { code: 'TK', name: 'Tokelau' },\n { code: 'TO', name: 'Tonga' },\n { code: 'TT', name: 'Trinidad and Tobago' },\n { code: 'TN', name: 'Tunisia' },\n { code: 'TR', name: 'Turkey' },\n { code: 'TM', name: 'Turkmenistan' },\n { code: 'TC', name: 'Turks and Caicos Islands' },\n { code: 'TV', name: 'Tuvalu' },\n { code: 'UG', name: 'Uganda' },\n { code: 'UA', name: 'Ukraine' },\n { code: 'AE', name: 'United Arab Emirates' },\n { code: 'GB', name: 'United Kingdom' },\n { code: 'UM', name: 'United States Minor Outlying Islands' },\n { code: 'US', name: 'United States of America' },\n { code: 'UY', name: 'Uruguay' },\n { code: 'UZ', name: 'Uzbekistan' },\n { code: 'VU', name: 'Vanuatu' },\n { code: 'VE', name: 'Venezuela' },\n { code: 'VN', name: 'Vietnam' },\n { code: 'VG', name: 'Virgin Islands (British)' },\n { code: 'VI', name: 'Virgin Islands (U.S.)' },\n { code: 'WF', name: 'Wallis and Futuna' },\n { code: 'EH', name: 'Western Sahara' },\n { code: 'YE', name: 'Yemen' },\n { code: 'ZM', name: 'Zambia' },\n { code: 'ZW', name: 'Zimbabwe' },\n ];\n\n return (\n \n \n onChange(e.target.value)}\n >\n \n {countries.map((country) => (\n \n ))}\n \n
\n );\n};\n\nNewCountryField.propTypes = {\n value: PropTypes.string,\n onChange: PropTypes.func.isRequired,\n};\n\nexport default NewCountryField;\n","import React, { useEffect } from 'react';\n\nimport { getConfig } from '@edx/frontend-platform';\nimport { useIntl } from '@edx/frontend-platform/i18n';\nimport PropTypes from 'prop-types';\n\nimport { FormFieldRenderer } from '../field-renderer';\nimport { FIELDS } from './data/constants';\nimport { validateCountryField } from './data/utils';\nimport messages from './messages';\nimport { HonorCode, TermsOfService } from './registrationFields';\n\n/**\n * Fields on registration page that are not the default required fields (name, email, username, password).\n * These configurable required fields are defined on the backend using REGISTRATION_EXTRA_FIELDS setting.\n *\n * Country and Honor Code/Terms of Services (if enabled) will appear at the bottom of the form, even if they\n * appear higher in order returned by backend. This is to make the user experience better.\n *\n * For edX only:\n * Country and honor code fields are required by default, and we will continue to show them on\n * frontend even if the API doesn't return it. The `SHOW_CONFIGURABLE_EDX_FIELDS` flag will enable\n * it for edX.\n * */\nconst ConfigurableRegistrationForm = (props) => {\n const { formatMessage } = useIntl();\n const {\n countryList,\n email,\n fieldDescriptions,\n fieldErrors,\n formFields,\n setFieldErrors,\n setFocusedField,\n setFormFields,\n } = props;\n\n let showTermsOfServiceAndHonorCode = false;\n let showCountryField = false;\n\n const formFieldDescriptions = [];\n const honorCode = [];\n const flags = {\n showConfigurableRegistrationFields: true,\n showConfigurableEdxFields: true,\n showMarketingEmailOptInCheckbox: getConfig().MARKETING_EMAILS_OPT_IN,\n };\n\n\n const handleOnChange = (event, countryValue = null) => {\n const { name, type } = event.target;\n let value;\n if (countryValue) {\n value = { ...countryValue };\n } else {\n value = event.target.type === 'checkbox' ? event.target.checked : event.target.value;\n if (type === 'checkbox') {\n setFieldErrors(prevErrors => ({ ...prevErrors, [name]: '' }));\n }\n }\n setFormFields(prevState => ({ ...prevState, [name]: value }));\n };\n\n const handleOnBlur = (event) => {\n const { name, value } = event.target;\n let error = '';\n if (!value || !value.trim()) {\n error = fieldDescriptions[name].error_message;\n } else if (name === 'confirm_email' && value !== email) {\n error = formatMessage(messages['email.do.not.match']);\n }\n setFocusedField(null);\n setFieldErrors(prevErrors => ({ ...prevErrors, [name]: error }));\n };\n\n const handleOnFocus = (event) => {\n const { name } = event.target;\n setFieldErrors(prevErrors => ({ ...prevErrors, [name]: '' }));\n // Since we are removing the form errors from the focused field, we will\n // need to rerun the validation for focused field on form submission.\n setFocusedField(name);\n };\n\n if (flags.showConfigurableRegistrationFields) {\n Object.keys(fieldDescriptions).forEach(fieldName => {\n const fieldData = fieldDescriptions[fieldName];\n switch (fieldData.name) {\n case FIELDS.HONOR_CODE:\n if (fieldData.type === 'tos_and_honor_code') {\n showTermsOfServiceAndHonorCode = true;\n } else {\n honorCode.push(\n \n \n {honorCode}\n
\n \n );\n};\n\nConfigurableRegistrationForm.propTypes = {\n email: PropTypes.string.isRequired,\n fieldDescriptions: PropTypes.shape({}),\n formFields: PropTypes.shape({\n honor_code: PropTypes.bool,\n marketingEmailsOptIn: PropTypes.bool,\n }).isRequired,\n setFieldErrors: PropTypes.func.isRequired,\n setFocusedField: PropTypes.func.isRequired,\n setFormFields: PropTypes.func.isRequired,\n};\n\nConfigurableRegistrationForm.defaultProps = {\n fieldDescriptions: {},\n};\n\nexport default ConfigurableRegistrationForm;\n","import { createSelector } from 'reselect';\n\nexport const storeName = 'register';\n\nexport const registerSelector = state => ({ ...state[storeName] });\n\nexport const registrationErrorSelector = createSelector(\n registerSelector,\n register => register.registrationError.errorCode,\n);\n\nexport const validationsSelector = createSelector(\n registerSelector,\n (register) => {\n const { registrationError, validations } = register;\n\n if (validations) {\n return validations.validationDecisions;\n }\n\n if (Object.keys(registrationError).length > 0) {\n const fields = Object.keys(registrationError).filter((fieldName) => !(fieldName in ['errorCode', 'usernameSuggestions']));\n\n const validationDecisions = {};\n fields.forEach(field => {\n validationDecisions[field] = registrationError[field][0].userMessage || '';\n });\n return validationDecisions;\n }\n\n return null;\n },\n);\n","import React, { useEffect } from 'react';\n\nimport { getConfig } from '@edx/frontend-platform';\nimport { useIntl } from '@edx/frontend-platform/i18n';\nimport { Alert } from '@edx/paragon';\nimport { Error } from '@edx/paragon/icons';\nimport PropTypes from 'prop-types';\n\nimport { windowScrollTo } from '../data/utils';\nimport {\n FORBIDDEN_REQUEST,\n INTERNAL_SERVER_ERROR,\n TPA_AUTHENTICATION_FAILURE,\n TPA_SESSION_EXPIRED,\n} from './data/constants';\nimport messages from './messages';\n\nconst RegistrationFailureMessage = (props) => {\n const { formatMessage } = useIntl();\n const {\n context, errorCode, failureCount,\n } = props;\n\n useEffect(() => {\n windowScrollTo({ left: 0, top: 0, behavior: 'smooth' });\n }, [errorCode, failureCount]);\n\n if (!errorCode) {\n return null;\n }\n\n let errorMessage;\n switch (errorCode) {\n case INTERNAL_SERVER_ERROR:\n errorMessage = formatMessage(messages['registration.request.server.error']);\n break;\n case FORBIDDEN_REQUEST:\n errorMessage = formatMessage(messages['registration.rate.limit.error']);\n break;\n case TPA_AUTHENTICATION_FAILURE:\n errorMessage = formatMessage(messages['registration.tpa.authentication.failure'],\n {\n platform_name: getConfig().SITE_NAME,\n lineBreak: ,\n errorMessage: context.errorMessage,\n });\n break;\n case TPA_SESSION_EXPIRED:\n errorMessage = formatMessage(messages['registration.tpa.session.expired'], { provider: context.provider });\n break;\n default:\n errorMessage = formatMessage(messages['registration.empty.form.submission.error']);\n break;\n }\n\n return (\n
{errorMessage}
\n\n {formatMessage(messages['registration.other.options.heading'])}\n
\n )}\n\n {thirdPartyAuthApiStatus === PENDING_STATE ? (\n \n
\n )}\n \n )}\n \n );\n};\n\nThirdPartyAuth.defaultProps = {\n currentProvider: null,\n providers: [],\n secondaryProviders: [],\n thirdPartyAuthApiStatus: 'pending',\n};\n\nThirdPartyAuth.propTypes = {\n currentProvider: PropTypes.string,\n handleInstitutionLogin: PropTypes.func.isRequired,\n providers: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.string,\n name: PropTypes.string,\n iconClass: PropTypes.string,\n iconImage: PropTypes.string,\n loginUrl: PropTypes.string,\n registerUrl: PropTypes.string,\n }),\n ),\n secondaryProviders: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.string,\n name: PropTypes.string,\n iconClass: PropTypes.string,\n iconImage: PropTypes.string,\n loginUrl: PropTypes.string,\n registerUrl: PropTypes.string,\n }),\n ),\n thirdPartyAuthApiStatus: PropTypes.string,\n};\n\nexport default ThirdPartyAuth;\n","import React, {\n useEffect, useMemo, useState,\n} from 'react';\nimport { connect } from 'react-redux';\n\nimport { getConfig, snakeCaseObject } from '@edx/frontend-platform';\nimport { sendPageEvent } from '@edx/frontend-platform/analytics';\nimport {\n getCountryList, getLocale, useIntl,\n} from '@edx/frontend-platform/i18n';\nimport { Form, Spinner, StatefulButton } from '@edx/paragon';\nimport PropTypes from 'prop-types';\nimport { Helmet } from 'react-helmet';\nimport Skeleton from 'react-loading-skeleton';\n\nimport {\n FormGroup, InstitutionLogistration, PasswordField, RedirectLogistration, ThirdPartyAuthAlert,\n} from '../common-components';\nimport { getThirdPartyAuthContext } from '../common-components/data/actions';\nimport {\n fieldDescriptionSelector, optionalFieldsSelector, thirdPartyAuthContextSelector,\n} from '../common-components/data/selectors';\nimport EnterpriseSSO from '../common-components/EnterpriseSSO';\nimport {\n COMPLETE_STATE,\n DEFAULT_STATE, INVALID_NAME_REGEX, LETTER_REGEX, NUMBER_REGEX, PENDING_STATE, REGISTER_PAGE, VALID_EMAIL_REGEX,\n} from '../data/constants';\nimport {\n getAllPossibleQueryParams, getTpaHint, getTpaProvider, setCookie, setSurveyCookie,\n} from '../data/utils';\nimport ConfigurableRegistrationForm from './ConfigurableRegistrationForm';\nimport {\n backupRegistrationFormBegin,\n clearRegistertionBackendError,\n clearUsernameSuggestions,\n fetchRealtimeValidations,\n registerNewUser,\n setUserPipelineDataLoaded,\n} from './data/actions';\nimport {\n FIELDS,\n FORM_SUBMISSION_ERROR,\n TPA_AUTHENTICATION_FAILURE,\n} from './data/constants';\nimport { registrationErrorSelector, validationsSelector } from './data/selectors';\nimport {\n getSuggestionForInvalidEmail, validateEmailAddress,\n} from './data/utils';\nimport messages from './messages';\nimport RegistrationFailure from './RegistrationFailure';\nimport { EmailField, UsernameField, GenderField, JoinRecoftcField, SectorField, NewCountryField, YearOfBirthField, LevelOfEducationField, GoalsField } from './registrationFields';\nimport ThirdPartyAuth from './ThirdPartyAuth';\n\nconst emailRegex = new RegExp(VALID_EMAIL_REGEX, 'i');\nconst urlRegex = new RegExp(INVALID_NAME_REGEX);\n\nconst RegistrationPage = (props) => {\n const {\n backedUpFormData,\n backendValidations,\n fieldDescriptions,\n handleInstitutionLogin,\n institutionLogin,\n optionalFields,\n registrationError,\n registrationErrorCode,\n registrationResult,\n shouldBackupState,\n submitState,\n thirdPartyAuthApiStatus,\n thirdPartyAuthContext,\n usernameSuggestions,\n validationApiRateLimited,\n // Actions\n backupFormState,\n setUserPipelineDetailsLoaded,\n getRegistrationDataFromBackend,\n userPipelineDataLoaded,\n validateFromBackend,\n clearBackendError,\n } = props;\n\n const { formatMessage } = useIntl();\n const queryParams = useMemo(() => getAllPossibleQueryParams(), []);\n const tpaHint = useMemo(() => getTpaHint(), []);\n const flags = {\n showConfigurableEdxFields: getConfig().SHOW_CONFIGURABLE_EDX_FIELDS,\n showConfigurableRegistrationFields: getConfig().ENABLE_DYNAMIC_REGISTRATION_FIELDS,\n showMarketingEmailOptInCheckbox: getConfig().MARKETING_EMAILS_OPT_IN,\n };\n\n// const [formFields, setFormFields] = useState({ ...backedUpFormData.formFields });\n\n const [formFields, setFormFields] = useState({\n email: '',\n username: '',\n name: '',\n password: '',\n join_recoftc: 'yes',\n gender: 'm',\n sector: '',\n year_of_birth: '',\n level_of_education: '',\n goals: '',\n country: ''\n });\n\n\n const [configurableFormFields, setConfigurableFormFields] = useState({ ...backedUpFormData.configurableFormFields });\n const [errors, setErrors] = useState({ ...backedUpFormData.errors });\n const [emailSuggestion, setEmailSuggestion] = useState({ ...backedUpFormData.emailSuggestion });\n const [autoSubmitRegisterForm, setAutoSubmitRegisterForm] = useState(false);\n const [errorCode, setErrorCode] = useState({ type: '', count: 0 });\n const [formStartTime, setFormStartTime] = useState(null);\n const [focusedField, setFocusedField] = useState(null);\n\n const {\n providers, currentProvider, secondaryProviders, finishAuthUrl,\n } = thirdPartyAuthContext;\n const platformName = getConfig().SITE_NAME;\n\n /**\n * If auto submitting register form, we will check tos and honor code fields if they exist for feature parity.\n */\n const checkTOSandHonorCodeFields = () => {\n if (Object.keys(fieldDescriptions).includes(FIELDS.HONOR_CODE)) {\n setConfigurableFormFields(prevState => ({\n ...prevState,\n [FIELDS.HONOR_CODE]: true,\n }));\n }\n if (Object.keys(fieldDescriptions).includes(FIELDS.TERMS_OF_SERVICE)) {\n setConfigurableFormFields(prevState => ({\n ...prevState,\n [FIELDS.TERMS_OF_SERVICE]: true,\n }));\n }\n };\n\n // State to track whether the checkbox is checked\n const [showAdditionalFields, setShowAdditionalFields] = useState(false);\n\n // Function to toggle the state when the checkbox is clicked\n const handleSupportEducationChange = () => {\n setShowAdditionalFields(!showAdditionalFields);\n };\n\n /**\n * Set the userPipelineDetails data in formFields for only first time\n */\n useEffect(() => {\n if (!userPipelineDataLoaded && thirdPartyAuthApiStatus === COMPLETE_STATE) {\n const { autoSubmitRegForm, pipelineUserDetails, errorMessage } = thirdPartyAuthContext;\n if (errorMessage) {\n setErrorCode(prevState => ({ type: TPA_AUTHENTICATION_FAILURE, count: prevState.count + 1 }));\n } else if (autoSubmitRegForm) {\n checkTOSandHonorCodeFields();\n setAutoSubmitRegisterForm(true);\n }\n if (pipelineUserDetails && Object.keys(pipelineUserDetails).length !== 0) {\n const { name = '', username = '', email = '', gender = '', join_recoftc = ''} = pipelineUserDetails;\n setFormFields(prevState => ({\n ...prevState, name, username, email, gender, join_recoftc\n }));\n setUserPipelineDetailsLoaded(true);\n }\n }\n }, [ // eslint-disable-line react-hooks/exhaustive-deps\n thirdPartyAuthContext,\n userPipelineDataLoaded,\n setUserPipelineDetailsLoaded,\n ]);\n\n useEffect(() => {\n if (!formStartTime) {\n sendPageEvent('login_and_registration', 'register');\n const payload = { ...queryParams, is_register_page: true };\n if (tpaHint) {\n payload.tpa_hint = tpaHint;\n }\n getRegistrationDataFromBackend(payload);\n setFormStartTime(Date.now());\n }\n }, [formStartTime, getRegistrationDataFromBackend, queryParams, tpaHint]);\n\n /**\n * Backup the registration form in redux when register page is toggled.\n */\n useEffect(() => {\n if (shouldBackupState) {\n backupFormState({\n configurableFormFields: { ...configurableFormFields },\n formFields: { ...formFields },\n emailSuggestion: { ...emailSuggestion },\n errors: { ...errors },\n });\n }\n }, [shouldBackupState, configurableFormFields, formFields, errors, emailSuggestion, backupFormState]);\n\n useEffect(() => {\n if (backendValidations) {\n setErrors(prevErrors => ({ ...prevErrors, ...backendValidations }));\n }\n }, [backendValidations]);\n\n useEffect(() => {\n if (registrationErrorCode) {\n setErrorCode(prevState => ({ type: registrationErrorCode, count: prevState.count + 1 }));\n }\n }, [registrationErrorCode]);\n\n /**\n * We need to remove the placeholder from the field, adding a space will do that.\n * This is needed because we are placing the username suggestions on top of the field.\n */\n useEffect(() => {\n if (usernameSuggestions.length && !formFields.username) {\n setFormFields(prevState => ({ ...prevState, username: ' ' }));\n }\n }, [usernameSuggestions, formFields]);\n\n useEffect(() => {\n if (registrationResult.success) {\n // TODO: Do we still need this cookie?\n setSurveyCookie('register');\n setCookie(getConfig().REGISTER_CONVERSION_COOKIE_NAME, true);\n setCookie('authn-returning-user');\n\n // Fire optimizely events\n window.optimizely = window.optimizely || [];\n window.optimizely.push({\n type: 'event',\n eventName: 'authn-register-conversion',\n });\n\n // Fire GTM event used for integration with impact.com\n window.dataLayer = window.dataLayer || [];\n window.dataLayer.push({\n event: 'ImpactRegistrationEvent',\n });\n }\n }, [registrationResult]);\n\n const validateInput = (fieldName, value, payload, shouldValidateFromBackend, setError = true) => {\n let fieldError = '';\n let confirmEmailError = ''; // This is to handle the use case where the form contains \"confirm email\" field\n let countryFieldCode = '';\n\n switch (fieldName) {\n case 'name':\n if (!value.trim()) {\n fieldError = formatMessage(messages['empty.name.field.error']);\n } else if (value && value.match(urlRegex)) {\n fieldError = formatMessage(messages['name.validation.message']);\n } else if (value && !payload.username.trim() && shouldValidateFromBackend) {\n validateFromBackend(payload);\n }\n break;\n case 'email':\n if (!value) {\n fieldError = formatMessage(messages['empty.email.field.error']);\n } else if (value.length <= 2) {\n fieldError = formatMessage(messages['email.invalid.format.error']);\n } else {\n const [username, domainName] = value.split('@');\n // Check if email address is invalid. If we have a suggestion for invalid email\n // provide that along with the error message.\n if (!emailRegex.test(value)) {\n fieldError = formatMessage(messages['email.invalid.format.error']);\n setEmailSuggestion({\n suggestion: getSuggestionForInvalidEmail(domainName, username),\n type: 'error',\n });\n } else {\n const response = validateEmailAddress(value, username, domainName);\n if (response.hasError) {\n fieldError = formatMessage(messages['email.invalid.format.error']);\n delete response.hasError;\n } else if (shouldValidateFromBackend) {\n validateFromBackend(payload);\n }\n setEmailSuggestion({ ...response });\n\n if (configurableFormFields.confirm_email && value !== configurableFormFields.confirm_email) {\n confirmEmailError = formatMessage(messages['email.do.not.match']);\n }\n }\n }\n break;\n case 'username':\n if (!value || value.length <= 1 || value.length > 30) {\n fieldError = formatMessage(messages['username.validation.message']);\n } else if (!value.match(/^[a-zA-Z0-9_-]*$/i)) {\n fieldError = formatMessage(messages['username.format.validation.message']);\n } else if (shouldValidateFromBackend) {\n validateFromBackend(payload);\n }\n break;\n case 'password':\n if (!value || !LETTER_REGEX.test(value) || !NUMBER_REGEX.test(value) || value.length < 8) {\n fieldError = formatMessage(messages['password.validation.message']);\n } else if (shouldValidateFromBackend) {\n validateFromBackend(payload);\n }\n break;\n case 'country':\n if (!value) {\n value = ''\n } else if (shouldValidateFromBackend) {\n validateFromBackend(payload);\n }\n break;\n case 'gender':\n if (!value) {\n value=''\n fieldError = formatMessage(\"Gender field is required\");\n } else if (shouldValidateFromBackend) {\n validateFromBackend(payload);\n }\n break;\n case 'join_recoftc':\n if (!value) {\n value = ''\n fieldError = formatMessage(\"This field is required\");\n } else if (shouldValidateFromBackend) {\n validateFromBackend(payload);\n }\n break;\n case 'sector':\n if (!value) {\n value = ''\n } else if (shouldValidateFromBackend) {\n validateFromBackend(payload);\n }\n break;\n case 'year_of_birth':\n if (!value) {\n value = ''\n } else if (shouldValidateFromBackend) {\n validateFromBackend(payload);\n }\n break;\n case 'level_of_education':\n if (!value) {\n value = ''\n } else if (shouldValidateFromBackend) {\n validateFromBackend(payload);\n }\n break;\n case 'goals':\n if (!value) {\n value = ''\n } else if (shouldValidateFromBackend) {\n validateFromBackend(payload);\n }\n break;\n default:\n if (flags.showConfigurableRegistrationFields) {\n if (fieldName === 'confirm_email' && formFields.email && value !== formFields.email) {\n fieldError = formatMessage(messages['email.do.not.match']);\n }\n }\n break;\n }\n if (setError) {\n setErrors(prevErrors => ({\n ...prevErrors,\n confirm_email: flags.showConfigurableRegistrationFields ? confirmEmailError : '',\n [fieldName]: fieldError,\n }));\n }\n return { fieldError, countryFieldCode };\n };\n\n const isFormValid = (payload, focusedFieldError) => {\n const fieldErrors = { ...errors };\n let isValid = !focusedFieldError;\n Object.keys(payload).forEach(key => {\n if (!payload[key]) {\n fieldErrors[key] = messages[`empty.${key}.field.error`] ? formatMessage(messages[`empty.${key}.field.error`]) : '';\n }\n if (fieldErrors[key] && key !== 'country') {\n isValid = false;\n }\n });\n\n if (focusedField) {\n fieldErrors[focusedField] = focusedFieldError;\n }\n setErrors({ ...fieldErrors });\n return isValid;\n };\n\n const handleSuggestionClick = (event, fieldName, suggestion = '') => {\n event.preventDefault();\n setErrors(prevErrors => ({ ...prevErrors, [fieldName]: '' }));\n switch (fieldName) {\n case 'email':\n setFormFields(prevState => ({ ...prevState, email: emailSuggestion.suggestion }));\n setEmailSuggestion({ suggestion: '', type: '' });\n break;\n case 'username':\n setFormFields(prevState => ({ ...prevState, username: suggestion }));\n props.resetUsernameSuggestions();\n break;\n default:\n break;\n }\n };\n\n const handleEmailSuggestionClosed = () => setEmailSuggestion({ suggestion: '', type: '' });\n\n const handleUsernameSuggestionClosed = () => props.resetUsernameSuggestions();\n\n const handleOnChange = (event) => {\n const { name } = event.target;\n let value = event.target.type === 'checkbox' ? event.target.checked : event.target.value;\n if (registrationError[name]) {\n clearBackendError(name);\n setErrors(prevErrors => ({ ...prevErrors, [name]: '' }));\n }\n if (name === 'username') {\n if (value.length > 30) {\n return;\n }\n if (value.startsWith(' ')) {\n value = value.trim();\n }\n }\n\n setFormFields(prevState => ({ ...prevState, [name]: value }));\n };\n\n const handleOnBlur = (event) => {\n const { name, value } = event.target;\n const payload = {\n name: formFields.name,\n email: formFields.email,\n username: formFields.username,\n password: formFields.password,\n gender: formFields.gender,\n join_recoftc: formFields.join_recoftc,\n sector: formFields.sector,\n country: formFields.country,\n year_of_birth: formFields.year_of_birth,\n level_of_education: formFields.level_of_education,\n goals: formFields.goals,\n form_field_key: name,\n };\n\n setFocusedField(null);\n validateInput(name, name === 'password' ? formFields.password : value, payload, !validationApiRateLimited);\n };\n\n const handleOnFocus = (event) => {\n const { name, value } = event.target;\n setErrors(prevErrors => ({ ...prevErrors, [name]: '' }));\n clearBackendError(name);\n // Since we are removing the form errors from the focused field, we will\n // need to rerun the validation for focused field on form submission.\n setFocusedField(name);\n\n if (name === 'username') {\n props.resetUsernameSuggestions();\n // If we added a space character to username field to display the suggestion\n // remove it before user enters the input. This is to ensure user doesn't\n // have a space prefixed to the username.\n if (value === ' ') {\n setFormFields(prevState => ({ ...prevState, [name]: '' }));\n }\n }\n };\n\n const registerUser = () => {\n const totalRegistrationTime = (Date.now() - formStartTime) / 1000;\n let payload = { ...formFields };\n\n if (currentProvider) {\n delete payload.password;\n payload.social_auth_provider = currentProvider;\n }\n\n const { fieldError: focusedFieldError, countryFieldCode } = focusedField ? (\n validateInput(\n focusedField,\n (focusedField in fieldDescriptions && focusedField !== 'country') ? (\n configurableFormFields[focusedField]\n ) : formFields[focusedField],\n payload,\n false,\n false,\n )\n ) : '';\n\n if (!isFormValid(payload, focusedFieldError)) {\n setErrorCode(prevState => ({ type: FORM_SUBMISSION_ERROR, count: prevState.count + 1 }));\n return;\n }\n\n Object.keys(configurableFormFields).forEach((fieldName) => {\n payload[fieldName] = configurableFormFields[fieldName];\n });\n\n // Don't send the marketing email opt-in value if the flag is turned off\n if (!flags.showMarketingEmailOptInCheckbox) {\n delete payload.marketingEmailsOptIn;\n }\n\n payload = snakeCaseObject(payload);\n payload.totalRegistrationTime = totalRegistrationTime;\n\n // add query params to the payload\n payload = { ...payload, ...queryParams };\n props.registerNewUser(payload);\n };\n\n const handleSubmit = (e) => {\n e.preventDefault();\n registerUser();\n };\n\n useEffect(() => {\n if (autoSubmitRegisterForm && userPipelineDataLoaded) {\n registerUser();\n }\n }, [autoSubmitRegisterForm, userPipelineDataLoaded]); // eslint-disable-line react-hooks/exhaustive-deps\n\n const renderForm = () => {\n if (institutionLogin) {\n return (\n \n
\n ) : (\n \n
\n )}\n\n \n );\n };\n\n if (tpaHint) {\n if (thirdPartyAuthApiStatus === PENDING_STATE) {\n return \n
\n );\n\n const isValidTpaHint = () => {\n const { provider } = getTpaProvider(tpaHint, providers, secondaryProviders);\n return !!provider;\n };\n\n return (\n \n {disablePublicAccountCreation\n ? (\n <>\n \n \n )}\n
\n \n {!institutionLogin && (\n
\n \n )\n : (\n {formatMessage(messages['logistration.sign.in'])}
\n )}\n\n {institutionLogin\n ? (\n \n \n )\n : (!isValidTpaHint() && (\n \n \n ))}\n { key && (\n
\n )}\n \n {selectedPage === LOGIN_PAGE\n ?
\n {message}
\n \n );\n }\n return null;\n};\n\nForgotPasswordAlert.defaultProps = {\n email: '',\n emailError: '',\n};\n\nForgotPasswordAlert.propTypes = {\n status: PropTypes.string.isRequired,\n email: PropTypes.string,\n emailError: PropTypes.string,\n};\n\nexport default ForgotPasswordAlert;\n","import React, { useEffect, useState } from 'react';\nimport { connect } from 'react-redux';\n\nimport { getConfig } from '@edx/frontend-platform';\nimport { sendPageEvent, sendTrackEvent } from '@edx/frontend-platform/analytics';\nimport { useIntl } from '@edx/frontend-platform/i18n';\nimport {\n Form,\n Hyperlink,\n Icon,\n StatefulButton,\n Tab,\n Tabs,\n} from '@edx/paragon';\nimport { ChevronLeft } from '@edx/paragon/icons';\nimport PropTypes from 'prop-types';\nimport { Helmet } from 'react-helmet';\nimport { Redirect } from 'react-router-dom';\n\nimport { BaseComponent } from '../base-component';\nimport { FormGroup } from '../common-components';\nimport { DEFAULT_STATE, LOGIN_PAGE, VALID_EMAIL_REGEX } from '../data/constants';\nimport { updatePathWithQueryParams, windowScrollTo } from '../data/utils';\nimport { forgotPassword, setForgotPasswordFormData } from './data/actions';\nimport { forgotPasswordResultSelector } from './data/selectors';\nimport ForgotPasswordAlert from './ForgotPasswordAlert';\nimport messages from './messages';\n\nconst ForgotPasswordPage = (props) => {\n const platformName = getConfig().SITE_NAME;\n const emailRegex = new RegExp(VALID_EMAIL_REGEX, 'i');\n const {\n status, submitState, emailValidationError,\n } = props;\n\n const { formatMessage } = useIntl();\n const [email, setEmail] = useState(props.email);\n const [bannerEmail, setBannerEmail] = useState('');\n const [formErrors, setFormErrors] = useState('');\n const [validationError, setValidationError] = useState(emailValidationError);\n const [key, setKey] = useState('');\n\n useEffect(() => {\n sendPageEvent('login_and_registration', 'reset');\n sendTrackEvent('edx.bi.password_reset_form.viewed', { category: 'user-engagement' });\n }, []);\n\n useEffect(() => {\n setValidationError(emailValidationError);\n }, [emailValidationError]);\n\n useEffect(() => {\n if (status === 'complete') {\n setEmail('');\n }\n }, [status]);\n\n const getValidationMessage = (value) => {\n let error = '';\n\n if (value === '') {\n error = formatMessage(messages['forgot.password.empty.email.field.error']);\n } else if (!emailRegex.test(value)) {\n error = formatMessage(messages['forgot.password.page.invalid.email.message']);\n }\n\n return error;\n };\n\n const handleBlur = () => {\n props.setForgotPasswordFormData({ email, emailValidationError: getValidationMessage(email) });\n };\n\n const handleFocus = () => props.setForgotPasswordFormData({ emailValidationError: '' });\n\n const handleSubmit = (e) => {\n e.preventDefault();\n setBannerEmail(email);\n\n const error = getValidationMessage(email);\n if (error) {\n setFormErrors(error);\n props.setForgotPasswordFormData({ email, emailValidationError: error });\n windowScrollTo({ left: 0, top: 0, behavior: 'smooth' });\n } else {\n props.forgotPassword(email);\n }\n };\n\n const tabTitle = (\n\n
\n );\n\n return (\n \n setKey(k)}>\n \n { key && (\n
\n \n \n
\n \n
\n {showError ? (\n\n {formatMessage(messages['welcome.page.error.heading'])} \n \n ) : null}\n \n
\n \n
\n {formatMessage(messages['progressive.profiling.page.heading'])}
\n\n {showError ? (\n
{formatMessage(messages['welcome.page.error.message'])}
\n\n \n \n Course} />\n \n \n
\n );\n};\n\nRecommendationCard.propTypes = {\n recommendation: PropTypes.shape({\n courseKey: PropTypes.string.isRequired,\n activeRunKey: PropTypes.string.isRequired,\n title: PropTypes.string.isRequired,\n cardImageUrl: PropTypes.string.isRequired,\n owners: PropTypes.arrayOf(PropTypes.shape({\n key: PropTypes.string.isRequired,\n name: PropTypes.string.isRequired,\n logoImageUrl: PropTypes.string.isRequired,\n })),\n marketingUrl: PropTypes.string.isRequired,\n recommendationType: PropTypes.string,\n }).isRequired,\n position: PropTypes.number.isRequired,\n userId: PropTypes.number,\n};\n\nRecommendationCard.defaultProps = {\n userId: null,\n};\n\nexport default RecommendationCard;\n","import React from 'react';\n\nimport { Container } from '@edx/paragon';\nimport PropTypes from 'prop-types';\n\nimport RecommendationCard from './RecommendationCard';\n\nconst RecommendationsList = (props) => {\n const { title, recommendations, userId } = props;\n\n return (\n \n {title}\n
\n\n {\n recommendations.map((recommendation, idx) => (\n
\n \n
\n \n );\n};\n\nRecommendationsPage.propTypes = {\n location: PropTypes.shape({\n state: PropTypes.shape({\n registrationResult: PropTypes.shape({\n redirectUrl: PropTypes.string,\n }),\n userId: PropTypes.number,\n educationLevel: PropTypes.string,\n }),\n }),\n\n};\n\nRecommendationsPage.defaultProps = {\n location: { state: {} },\n};\n\nexport default RecommendationsPage;\n","import { library } from '@fortawesome/fontawesome-svg-core';\nimport {\n faApple, faFacebook, faGoogle, faMicrosoft,\n} from '@fortawesome/free-brands-svg-icons';\n\nexport default function registerIcons() {\n library.add(faApple, faFacebook, faGoogle, faMicrosoft);\n}\n","import React from 'react';\n\nimport { getConfig } from '@edx/frontend-platform';\nimport { AppProvider } from '@edx/frontend-platform/react';\nimport { Helmet } from 'react-helmet';\nimport { Redirect, Route, Switch } from 'react-router-dom';\n\nimport {\n Logistration, NotFoundPage, registerIcons, UnAuthOnlyRoute, Zendesk,\n} from './common-components';\nimport configureStore from './data/configureStore';\nimport {\n AUTHN_PROGRESSIVE_PROFILING,\n LOGIN_PAGE,\n PAGE_NOT_FOUND,\n PASSWORD_RESET_CONFIRM,\n RECOMMENDATIONS,\n REGISTER_PAGE,\n RESET_PAGE,\n} from './data/constants';\nimport { updatePathWithQueryParams } from './data/utils';\nimport { ForgotPasswordPage } from './forgot-password';\nimport { ProgressiveProfiling } from './progressive-profiling';\nimport { RecommendationsPage } from './recommendations';\nimport { ResetPasswordPage } from './reset-password';\nimport './index.scss';\n\nregisterIcons();\n\nconst MainApp = () => (\n \n \n \n \n
\n {(!isLoading && recommendations.length === RECOMMENDATIONS_COUNT) ? (\n \n
\n )\n : (\n \n
\n