\n 
\n
\n )\n : (\n \n {SUPPORTED_ICON_CLASSES.includes(provider.iconClass) ? (\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 messages from './messages';\nimport { LOGIN_PAGE, REGISTER_PAGE } from '../data/constants';\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 { THIRD_PARTY_AUTH_CONTEXT, THIRD_PARTY_AUTH_CONTEXT_CLEAR_ERROR_MSG } from './actions';\nimport { COMPLETE_STATE, FAILURE_STATE, PENDING_STATE } from '../../data/constants';\n\nexport const defaultState = {\n fieldDescriptions: {\n fields: {},\n },\n optionalFields: {\n fields: {},\n extended_profile: [],\n },\n thirdPartyAuthApiStatus: null,\n thirdPartyAuthContext: {\n autoSubmitRegForm: false,\n currentProvider: null,\n finishAuthUrl: null,\n countryCode: null,\n providers: [],\n secondaryProviders: [],\n pipelineUserDetails: null,\n errorMessage: null,\n welcomePageRedirectUrl: 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: FAILURE_STATE,\n thirdPartyAuthContext: {\n ...state.thirdPartyAuthContext,\n errorMessage: null,\n },\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 { 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 || {},\n optionalFields: data.optionalFields || {},\n thirdPartyAuthContext: data.contextData || {},\n };\n}\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 REGISTRATION_CLEAR_BACKEND_ERROR = 'REGISTRATION_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 = (authenticatedUser, redirectUrl, success) => ({\n type: REGISTER_NEW_USER.SUCCESS,\n payload: { authenticatedUser, 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 clearRegistrationBackendError = (fieldName) => ({\n type: REGISTRATION_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 { logError } from '@edx/frontend-platform/logging';\nimport { call, put, takeEvery } from 'redux-saga/effects';\n\nimport {\n getThirdPartyAuthContextBegin,\n getThirdPartyAuthContextFailure,\n getThirdPartyAuthContextSuccess,\n THIRD_PARTY_AUTH_CONTEXT,\n} from './actions';\nimport {\n getThirdPartyAuthContext,\n} from './service';\nimport { setCountryFromThirdPartyAuthContext } from '../../register/data/actions';\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
{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 { defineMessages } from '@edx/frontend-platform/i18n';\n\nconst messages = defineMessages({\n 'start.learning': {\n id: 'start.learning',\n defaultMessage: 'Start learning',\n description: 'Header text for logistration MFE pages',\n },\n 'with.site.name': {\n id: 'with.site.name',\n defaultMessage: 'with {siteName}',\n description: 'Header text with site name for logistration MFE pages',\n },\n});\n\nexport default messages;\n","import { defineMessages } from '@edx/frontend-platform/i18n';\n\nconst messages = defineMessages({\n 'your.career.turning.point': {\n id: 'your.career.turning.point',\n defaultMessage: 'Your career turning point',\n description: 'Part of the heading \"Your career turning point is here.\" shown on Authn MFE',\n },\n 'is.here': {\n id: 'is.here',\n defaultMessage: 'is here.',\n description: 'Part of the heading \"Your career turning point is here.\" shown on Authn MFE',\n },\n});\n\nexport default messages;\n","import { defineMessages } from '@edx/frontend-platform/i18n';\n\nconst messages = defineMessages({\n 'welcome.to.platform': {\n id: 'welcome.to.platform',\n defaultMessage: 'Welcome to {siteName}, {username}!',\n description: 'Welcome message that appears on progressive profile page',\n },\n 'complete.your.profile.1': {\n id: 'complete.your.profile.1',\n defaultMessage: 'Complete',\n description: 'part of text \"complete your profile\"',\n },\n 'complete.your.profile.2': {\n id: 'complete.your.profile.2',\n defaultMessage: 'your profile',\n description: 'part of text \"complete your profile\"',\n },\n});\n\nexport default messages;\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 LargeLayout = ({ username }) => {\n const { formatMessage } = useIntl();\n\n return (\n\n
\n );\n};\n\nLargeLayout.propTypes = {\n username: PropTypes.string.isRequired,\n};\n\nexport default LargeLayout;\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 MediumLayout = ({ 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\nMediumLayout.propTypes = {\n username: PropTypes.string.isRequired,\n};\n\nexport default MediumLayout;\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 SmallLayout = ({ 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\nSmallLayout.propTypes = {\n username: PropTypes.string.isRequired,\n};\n\nexport default SmallLayout;\n","import React, { useEffect, useState } from 'react';\n\nimport { breakpoints } from '@edx/paragon';\nimport classNames from 'classnames';\nimport PropTypes from 'prop-types';\nimport MediaQuery from 'react-responsive';\nimport { getConfig } from '@edx/frontend-platform';\n\nimport { DefaultLargeLayout, DefaultMediumLayout, DefaultSmallLayout } from './components/default-layout';\nimport {\n ImageExtraSmallLayout, ImageLargeLayout, ImageMediumLayout, ImageSmallLayout,\n} from './components/image-layout';\nimport { AuthLargeLayout, AuthMediumLayout, AuthSmallLayout } from './components/welcome-page-layout';\nimport { DEFAULT_LAYOUT, IMAGE_LAYOUT } from './data/constants';\n\nconst BaseContainer = ({ children, showWelcomeBanner, username }) => {\n const [baseContainerVersion, setBaseContainerVersion] = useState(DEFAULT_LAYOUT);\n\n useEffect(() => {\n const initRebrandExperiment = () => {\n if (window.experiments?.rebrandExperiment) {\n setBaseContainerVersion(window.experiments?.rebrandExperiment?.variation);\n } else {\n window.experiments = window.experiments || {};\n window.experiments.rebrandExperiment = {};\n window.experiments.rebrandExperiment.handleLoaded = () => {\n setBaseContainerVersion(window.experiments?.rebrandExperiment?.variation);\n };\n }\n };\n initRebrandExperiment();\n }, []);\n\n if (baseContainerVersion === IMAGE_LAYOUT) {\n return (\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 return (\n <>\n \n \n United Nations University
\n Institute for Water, Environment and Health
\n \n
\n \n {children}\n
\n \n \n \n
\n
\n \n );\n};\n\nBaseContainer.defaultProps = {\n showWelcomeBanner: false,\n username: null,\n};\n\nBaseContainer.propTypes = {\n children: PropTypes.node.isRequired,\n showWelcomeBanner: PropTypes.bool,\n username: PropTypes.string,\n};\n\nexport default BaseContainer;\n","const IMAGE_LAYOUT = 'image-layout';\nconst DEFAULT_LAYOUT = 'default-layout';\n\nexport { DEFAULT_LAYOUT, IMAGE_LAYOUT };\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 { useNavigate } from 'react-router-dom';\n\nimport { forgotPassword, setForgotPasswordFormData } from './data/actions';\nimport { forgotPasswordResultSelector } from './data/selectors';\nimport ForgotPasswordAlert from './ForgotPasswordAlert';\nimport messages from './messages';\nimport BaseContainer from '../base-container';\nimport { FormGroup } from '../common-components';\nimport { DEFAULT_STATE, LOGIN_PAGE, VALID_EMAIL_REGEX } from '../data/constants';\nimport { updatePathWithQueryParams, windowScrollTo } from '../data/utils';\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 navigate = useNavigate();\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 United Nations University
\n Institute for Water, Environment and Health
\n \n
\n \n {children}\n
\n \n
\n );\n\n return (\n \n navigate(updatePathWithQueryParams(key))}>\n \n
\n \n \n
\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
\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\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 if (token) {\n props.validateToken(token);\n return \n \n \n {formatMessage(messages['reset.password.page.title'], { siteName: getConfig().SITE_NAME })}\n \n \n navigate(updatePathWithQueryParams(key))}>\n \n
\n \n
\n \n
\n {formatMessage(messages['reset.password'])}
\n{formatMessage(messages['reset.password.page.instructions'])}
\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 {formatMessage(messages['registration.username.suggestion.label'])}\n
\n );\n\n if (usernameSuggestions.length > 0 && errorMessage && value === ' ') {\n className = 'username-suggestions__error';\n iconButton = \n {usernameSuggestions.map((username, index) => (\n handleSuggestionClick(e, username)}\n >\n {username}\n \n ))}\n
\n {iconButton}\n \n handleSelected(value)}\n onFocus={(e) => handleOnFocus(e)}\n onBlur={(e) => handleOnBlur(e)}\n onChange={(value) => handleOnChange(value)}\n >\n {getCountryList()}\n \n {props.errorMessage !== '' && (\n \n {props.errorMessage}\n \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 onChangeHandler: PropTypes.func.isRequired,\n handleErrorChange: 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 \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';\n\nconst SectorField = (props) => {\n const { value, onChange } = props;\n\n const SectorFieldOptions = [\n { label: 'Public', value: 'Public' },\n { label: 'Private', value: 'Private' },\n { label: 'NGO', value: 'NGO' },\n { label: 'Other', value: 'Other' },\n ];\n\n return (\n \n \n onChange(e.target.value)}\n >\n \n {SectorFieldOptions.map((option) => (\n \n ))}\n \n
\n );\n};\n\nSectorField.propTypes = {\n value: PropTypes.string.isRequired,\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 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 \n {genderOptions.map((option) => (\n \n ))}\n\n \n
\n );\n};\n\nGenderField.propTypes = {\n value: PropTypes.string.isRequired,\n onChange: PropTypes.func.isRequired,\n};\n\nexport default GenderField;\n","import React, { useEffect, useMemo, useState } from 'react';\n\nimport { getConfig } from '@edx/frontend-platform';\nimport { getCountryList, getLocale, useIntl } from '@edx/frontend-platform/i18n';\nimport PropTypes from 'prop-types';\n\nimport { FormFieldRenderer } from '../../field-renderer';\nimport { FIELDS } from '../data/constants';\nimport messages from '../messages';\nimport { CountryField, HonorCode, TermsOfService, SectorField, YearOfBirthField, GoalsField, LevelOfEducationField, GenderField, } 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 email,\n fieldDescriptions,\n fieldErrors,\n formFields,\n setFieldErrors,\n setFormFields,\n autoSubmitRegistrationForm,\n } = props;\n\n const countryList = useMemo(() => getCountryList(getLocale()), []);\n\n let showTermsOfServiceAndHonorCode = false;\n let showCountryField = false;\n\n const formFieldDescriptions = [];\n const honorCode = [];\n const flags = {\n showConfigurableRegistrationFields: getConfig().ENABLE_DYNAMIC_REGISTRATION_FIELDS,\n showConfigurableEdxFields: getConfig().SHOW_CONFIGURABLE_EDX_FIELDS,\n showMarketingEmailOptInCheckbox: getConfig().MARKETING_EMAILS_OPT_IN,\n };\n\n useEffect(() => {\n if (!formFields.country) {\n setFormFields(prevState => ({ ...prevState, country: { countryCode: '', displayValue: '' } }));\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 * If auto submitting register form, we will check tos and honor code fields if they exist for feature parity.\n */\n useEffect(() => {\n if (autoSubmitRegistrationForm) {\n if (Object.keys(fieldDescriptions).includes(FIELDS.HONOR_CODE)) {\n setFormFields(prevState => ({\n ...prevState,\n [FIELDS.HONOR_CODE]: true,\n }));\n }\n if (Object.keys(fieldDescriptions).includes(FIELDS.TERMS_OF_SERVICE)) {\n setFormFields(prevState => ({\n ...prevState,\n [FIELDS.TERMS_OF_SERVICE]: true,\n }));\n }\n }\n }, [autoSubmitRegistrationForm]); // eslint-disable-line react-hooks/exhaustive-deps\n\n const handleErrorChange = (fieldName, error) => {\n if (fieldName) {\n setFieldErrors(prevErrors => ({\n ...prevErrors,\n [fieldName]: error,\n }));\n }\n };\n\n const handleOnChange = (event, countryValue = null) => {\n const { name } = 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 (event.target.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()) && fieldDescriptions[name]?.error_message) {\n error = fieldDescriptions[name].error_message;\n } else if (name === 'confirm_email' && value !== email) {\n error = formatMessage(messages['email.do.not.match']);\n }\n setFieldErrors(prevErrors => ({ ...prevErrors, [name]: error }));\n };\n\n const handleOnFocus = (event) => {\n const { name } = event.target;\n setFieldErrors(prevErrors => ({ ...prevErrors, [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.COUNTRY:\n showCountryField = true;\n break;\n case FIELDS.HONOR_CODE:\n if (fieldData.type === 'tos_and_honor_code') {\n showTermsOfServiceAndHonorCode = true;\n } else {\n honorCode.push(\n \n \n
\n );\n if (showAdditionalFields) {\n formFieldDescriptions.push(\n \n \n
\n );\n if (showAdditionalFields) {\n formFieldDescriptions.push(\n \n \n {honorCode}\n
\n \n );\n};\n\nConfigurableRegistrationForm.propTypes = {\n email: PropTypes.string.isRequired,\n fieldDescriptions: PropTypes.shape({}),\n fieldErrors: PropTypes.shape({\n country: PropTypes.string,\n }).isRequired,\n formFields: PropTypes.shape({\n country: PropTypes.shape({\n displayValue: PropTypes.string,\n countryCode: PropTypes.string,\n }),\n honor_code: PropTypes.bool,\n marketingEmailsOptIn: PropTypes.bool,\n }).isRequired,\n setFieldErrors: PropTypes.func.isRequired,\n setFormFields: PropTypes.func.isRequired,\n autoSubmitRegistrationForm: PropTypes.bool,\n};\n\nConfigurableRegistrationForm.defaultProps = {\n fieldDescriptions: {},\n autoSubmitRegistrationForm: false,\n};\n\nexport default ConfigurableRegistrationForm;\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 { useDispatch, useSelector } 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 { Form, Spinner, StatefulButton } from '@edx/paragon';\nimport classNames from 'classnames';\nimport PropTypes from 'prop-types';\nimport { Helmet } from 'react-helmet';\nimport Skeleton from 'react-loading-skeleton';\n\nimport ConfigurableRegistrationForm from './components/ConfigurableRegistrationForm';\nimport RegistrationFailure from './components/RegistrationFailure';\nimport ThirdPartyAuth from './components/ThirdPartyAuth';\nimport {\n backupRegistrationFormBegin,\n clearRegistrationBackendError,\n registerNewUser,\n setUserPipelineDataLoaded,\n} from './data/actions';\nimport {\n FORM_SUBMISSION_ERROR,\n TPA_AUTHENTICATION_FAILURE,\n} from './data/constants';\nimport { getBackendValidations, isFormValid, prepareRegistrationPayload } from './data/utils';\nimport messages from './messages';\nimport { EmailField, NameField, UsernameField, SectorField, } from './RegistrationFields';\nimport {\n InstitutionLogistration, PasswordField, RedirectLogistration, ThirdPartyAuthAlert,\n} from '../common-components';\nimport { getThirdPartyAuthContext as getRegistrationDataFromBackend } from '../common-components/data/actions';\nimport EnterpriseSSO from '../common-components/EnterpriseSSO';\nimport {\n COMPLETE_STATE, PENDING_STATE, REGISTER_PAGE,\n} from '../data/constants';\nimport {\n getAllPossibleQueryParams, getTpaHint, getTpaProvider, isHostAvailableInQueryParams, setCookie,\n} from '../data/utils';\n\n/**\n * Main Registration Page component\n */\nconst RegistrationPage = (props) => {\n const { formatMessage } = useIntl();\n const dispatch = useDispatch();\n\n const registrationEmbedded = isHostAvailableInQueryParams();\n const platformName = getConfig().SITE_NAME;\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 const {\n handleInstitutionLogin,\n institutionLogin,\n } = props;\n\n const {\n registrationFormData: backedUpFormData,\n registrationError,\n registrationError: {\n errorCode: registrationErrorCode,\n } = {},\n registrationResult,\n shouldBackupState,\n userPipelineDataLoaded,\n submitState,\n validations,\n } = useSelector(state => state.register);\n\n const {\n fieldDescriptions,\n optionalFields,\n thirdPartyAuthApiStatus,\n thirdPartyAuthContext,\n thirdPartyAuthContext: {\n autoSubmitRegForm,\n errorMessage: thirdPartyAuthErrorMessage,\n finishAuthUrl,\n currentProvider,\n providers,\n secondaryProviders,\n pipelineUserDetails,\n },\n } = useSelector(state => state.commonComponents);\n\n const backendValidations = useMemo(\n () => getBackendValidations(registrationError, validations), [registrationError, validations],\n );\n const queryParams = useMemo(() => getAllPossibleQueryParams(), []);\n const tpaHint = useMemo(() => getTpaHint(), []);\n\n // const [formFields, setFormFields] = useState({ ...backedUpFormData.formFields });\n const [formFields, setFormFields] = useState({\n email: '',\n username: '',\n name: '',\n password: '',\n sector: 'Other',\n });\n\n const [configurableFormFields, setConfigurableFormFields] = useState({ ...backedUpFormData.configurableFormFields });\n const [errors, setErrors] = useState({ ...backedUpFormData.errors });\n const [errorCode, setErrorCode] = useState({ type: '', count: 0 });\n const [formStartTime, setFormStartTime] = useState(null);\n // temporary error state for embedded experience because we don't want to show errors on blur\n const [temporaryErrors, setTemporaryErrors] = useState({ ...backedUpFormData.errors });\n\n const { cta, host } = queryParams;\n const buttonLabel = cta\n ? formatMessage(messages['create.account.cta.button'], { label: cta })\n : formatMessage(messages['create.account.for.free.button']);\n\n /**\n * Set the userPipelineDetails data in formFields for only first time\n */\n useEffect(() => {\n if (!userPipelineDataLoaded && thirdPartyAuthApiStatus === COMPLETE_STATE) {\n if (thirdPartyAuthErrorMessage) {\n setErrorCode(prevState => ({ type: TPA_AUTHENTICATION_FAILURE, count: prevState.count + 1 }));\n }\n if (pipelineUserDetails && Object.keys(pipelineUserDetails).length !== 0) {\n const { name = '', username = '', email = '', sector = '', } = pipelineUserDetails;\n setFormFields(prevState => ({\n ...prevState, name, username, email, sector,\n }));\n dispatch(setUserPipelineDataLoaded(true));\n }\n }\n }, [ // eslint-disable-line react-hooks/exhaustive-deps\n thirdPartyAuthContext,\n userPipelineDataLoaded,\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 dispatch(getRegistrationDataFromBackend(payload));\n setFormStartTime(Date.now());\n }\n }, [dispatch, formStartTime, queryParams, tpaHint]);\n\n /**\n * Backup the registration form in redux when register page is toggled.\n */\n useEffect(() => {\n if (shouldBackupState) {\n dispatch(backupRegistrationFormBegin({\n ...backedUpFormData,\n configurableFormFields: { ...configurableFormFields },\n formFields: { ...formFields },\n errors: { ...errors },\n }));\n }\n }, [shouldBackupState, configurableFormFields, formFields, errors, dispatch, backedUpFormData]);\n\n useEffect(() => {\n if (backendValidations) {\n if (registrationEmbedded) {\n setTemporaryErrors(prevErrors => ({ ...prevErrors, ...backendValidations }));\n } else {\n setErrors(prevErrors => ({ ...prevErrors, ...backendValidations }));\n }\n }\n }, [backendValidations, registrationEmbedded]);\n\n useEffect(() => {\n if (registrationErrorCode) {\n setErrorCode(prevState => ({ type: registrationErrorCode, count: prevState.count + 1 }));\n }\n }, [registrationErrorCode]);\n\n useEffect(() => {\n if (registrationResult.success) {\n // This event is used by GTM\n sendTrackEvent('edx.bi.user.account.registered.client', {});\n\n // This is used by the \"User Retention Rate Event\" on GTM\n setCookie(getConfig().USER_RETENTION_COOKIE_NAME, true);\n }\n }, [registrationResult]);\n\n const handleOnChange = (event) => {\n const { name } = event.target;\n const value = event.target.type === 'checkbox' ? event.target.checked : event.target.value;\n if (registrationError[name]) {\n dispatch(clearRegistrationBackendError(name));\n setErrors(prevErrors => ({ ...prevErrors, [name]: '' }));\n }\n setFormFields(prevState => ({ ...prevState, [name]: value }));\n };\n\n const handleErrorChange = (fieldName, error) => {\n if (registrationEmbedded) {\n setTemporaryErrors(prevErrors => ({\n ...prevErrors,\n [fieldName]: error,\n }));\n if (error === '' && errors[fieldName] !== '') {\n setErrors(prevErrors => ({\n ...prevErrors,\n [fieldName]: error,\n }));\n }\n } else {\n setErrors(prevErrors => ({\n ...prevErrors,\n [fieldName]: error,\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 // Validating form data before submitting\n const { isValid, fieldErrors } = isFormValid(\n payload,\n registrationEmbedded ? temporaryErrors : errors,\n configurableFormFields,\n fieldDescriptions,\n formatMessage,\n );\n setErrors({ ...fieldErrors });\n\n // returning if not valid\n if (!isValid) {\n setErrorCode(prevState => ({ type: FORM_SUBMISSION_ERROR, count: prevState.count + 1 }));\n return;\n }\n\n // Preparing payload for submission\n payload = prepareRegistrationPayload(\n payload,\n configurableFormFields,\n flags.showMarketingEmailOptInCheckbox,\n totalRegistrationTime,\n queryParams);\n\n // making register call\n dispatch(registerNewUser(payload));\n };\n\n const handleSubmit = (e) => {\n e.preventDefault();\n registerUser();\n };\n\n useEffect(() => {\n if (autoSubmitRegForm && userPipelineDataLoaded) {\n registerUser();\n }\n }, [autoSubmitRegForm, 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 const isValidTpaHint = () => {\n const { provider } = getTpaProvider(tpaHint, providers, secondaryProviders);\n return !!provider;\n };\n\n return (\n \n {disablePublicAccountCreation\n ? (\n <>\n {institutionLogin && (\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 \n \n \n \n \n \n \n
\n);\n\nBaseCard.propTypes = {\n title: PropTypes.string.isRequired,\n uuid: PropTypes.string.isRequired,\n footer: PropTypes.element.isRequired,\n productTypeCopy: PropTypes.string.isRequired,\n subtitle: PropTypes.string.isRequired,\n variant: PropTypes.string.isRequired,\n customHeaderImage: PropTypes.string.isRequired,\n schoolLogo: PropTypes.string.isRequired,\n isLoading: PropTypes.bool,\n handleOnClick: PropTypes.func.isRequired,\n};\n\nBaseCard.defaultProps = {\n isLoading: false,\n};\nexport default BaseCard;\n","import React from 'react';\n\nimport { useIntl } from '@edx/frontend-platform/i18n';\nimport PropTypes from 'prop-types';\n\nimport {\n cardFooterMessages,\n} from '../../messages';\n\nconst ProductCardFooter = ({\n factoid,\n quickFacts,\n courseLength,\n cardType,\n}) => {\n const intl = useIntl();\n const courseLengthLabel = courseLength > 1 ? 'Courses' : 'Course';\n\n if (courseLength) {\n return (\n \n \n {productTypeCopy}\n \n
\n \n {footer}\n
\n \n {intl.formatMessage(\n cardFooterMessages[\n 'recommendation.product-card.footer-text.number-of-courses'\n ],\n { length: courseLength, label: courseLengthLabel },\n )}\n
\n );\n }\n\n if (cardType === 'program') {\n if (quickFacts && quickFacts.length > 0) {\n const quickFactsCount = quickFacts.length;\n\n const threeFactsArrangement = [1, 3, 0];\n const twoFactsArrangement = [0, 2];\n return (\n <>\n {(quickFactsCount > 3 ? threeFactsArrangement : twoFactsArrangement)\n .map((index) => quickFacts[index])\n .filter(Boolean)\n .map((fact, idx) => (\n\n {idx > 0 && •}\n {fact && fact.text}\n
\n ))}\n \n );\n }\n }\n\n if (factoid) {\n return{factoid}
;\n }\n\n return null;\n};\n\nProductCardFooter.propTypes = {\n cardType: PropTypes.string,\n factoid: PropTypes.string,\n quickFacts: PropTypes.arrayOf(PropTypes.shape({})),\n courseLength: PropTypes.number,\n};\n\nProductCardFooter.defaultProps = {\n cardType: '',\n factoid: '',\n quickFacts: [],\n courseLength: undefined,\n};\n\nexport default ProductCardFooter;\n","import { sendTrackEvent } from '@edx/frontend-platform/analytics';\n\nexport const LINK_TIMEOUT = 300;\n\nexport const eventNames = {\n recommendedProductClicked: 'edx.bi.user.recommended.product.clicked',\n recommendationsViewed: 'edx.bi.user.recommendations.viewed',\n skipButtonClicked: 'edx.bi.user.recommendations.skip.btn.clicked',\n};\n\nconst generateProductKey = (product) => (\n product.cardType === 'program' ? `${product.title} [${product.uuid}]` : product.activeRunKey\n);\n\nexport const getProductMapping = (recommendedProducts) => recommendedProducts.map((product) => ({\n product_key: generateProductKey(product),\n product_line: product.cardType,\n product_source: product.productSource.name,\n}));\n\nexport const trackRecommendationClick = (product, position, userId) => {\n sendTrackEvent(eventNames.recommendedProductClicked, {\n page: 'authn_recommendations',\n position,\n recommendation_type: product.recommendationType,\n product_key: generateProductKey(product),\n product_line: product.cardType,\n product_source: product.productSource.name,\n user_id: userId,\n });\n\n const productUrl = product.url || product?.activeCourseRun?.marketingUrl;\n return setTimeout(() => { global.open(productUrl, '_blank'); }, LINK_TIMEOUT);\n};\n\nexport const trackRecommendationsViewed = (recommendedProducts, type, userId) => {\n const viewedProductsList = getProductMapping(recommendedProducts);\n\n if (viewedProductsList && viewedProductsList.length) {\n sendTrackEvent(\n eventNames.recommendationsViewed, {\n page: 'authn_recommendations',\n recommendation_type: type,\n products: viewedProductsList,\n user_id: userId,\n },\n );\n }\n};\n\nexport const trackSkipButtonClicked = (userId) => {\n sendTrackEvent(\n eventNames.skipButtonClicked, {\n page: 'authn_recommendations',\n user_id: userId,\n },\n );\n};\n\nexport default {\n trackRecommendationClick,\n trackRecommendationsViewed,\n trackSkipButtonClicked,\n};\n","import React from 'react';\n\nimport { useIntl } from '@edx/frontend-platform/i18n';\nimport PropTypes from 'prop-types';\n\nimport BaseCard from './BaseCard';\nimport Footer from './Footer';\nimport { createCodeFriendlyProduct, getVariant, useProductType } from '../data/utils';\nimport {\n cardBadgesMessages,\n} from '../messages';\nimport { trackRecommendationClick } from '../track';\n\nconst ProductCard = ({\n product,\n userId,\n position,\n isLoading,\n}) => {\n const { formatMessage } = useIntl();\n\n const productType = useProductType(product?.courseType, product?.type);\n\n const variant = getVariant(productType);\n\n const headerImage = product?.cardImageUrl || product?.image?.src;\n\n const schoolName = product?.organizationShortCodeOverride\n || product?.owners?.[0]?.name\n || product?.authoringOrganizations?.[0]?.name\n || product?.partner;\n const schoolLogo = product?.organizationLogoOverrideUrl\n || product?.logoFilename\n || product?.authoringOrganizations?.[0]?.logoImageUrl\n || product?.owners?.[0]?.logoImageUrl;\n\n const { owners } = product;\n const multipleSchoolNames = [];\n const isMultipleOwner = owners?.length > 1;\n\n if ((owners?.length > 1)) {\n owners.forEach((owner, index, arr) => {\n let school;\n if (index === arr.length - 1) {\n school = (\n {owner.name}\n );\n } else {\n school = (\n <>\n {owner.name}\n\n \n );\n }\n\n multipleSchoolNames.push(school);\n });\n }\n\n const productTypeCopy = formatMessage(\n cardBadgesMessages[\n `recommendation.product-card.pill-text.${createCodeFriendlyProduct(productType)}`\n ],\n );\n const handleCardClick = () => {\n trackRecommendationClick(\n product,\n position + 1,\n userId,\n );\n };\n\n return (\n
\n {\n recommendations.map((recommendation, idx) => (\n
\n );\n};\n\nRecommendationsList.propTypes = {\n recommendations: PropTypes.arrayOf(PropTypes.shape({\n uuid: PropTypes.string,\n })),\n userId: PropTypes.number,\n isLoading: PropTypes.bool,\n};\n\nRecommendationsList.defaultProps = {\n recommendations: [],\n userId: null,\n isLoading: false,\n};\n\nexport default RecommendationsList;\n","import React from 'react';\n\nimport { useIntl } from '@edx/frontend-platform/i18n';\nimport { Skeleton } from '@edx/paragon';\nimport PropTypes from 'prop-types';\n\nimport loadingCoursesPlaceholders from '../data/loadingCoursesPlaceholders';\nimport messages from '../messages';\nimport RecommendationsList from '../RecommendationsList';\n\nconst RecommendationsLargeLayout = (props) => {\n const {\n userId,\n isLoading,\n personalizedRecommendations,\n } = props;\n const { formatMessage } = useIntl();\n\n if (isLoading) {\n return (\n <>\n \n {formatMessage(messages['recommendation.page.heading'])}\n
\n\n\n {formatMessage(messages['recommendation.page.heading'])}\n
\n\n\n
\n \n );\n};\n\nRecommendationsPage.propTypes = {};\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 { Navigate, Route, Routes } from 'react-router-dom';\n\nimport {\n EmbeddedRegistrationRoute, 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_EMBEDDED_PAGE,\n REGISTER_PAGE,\n RESET_PAGE,\n} from './data/constants';\nimport { updatePathWithQueryParams } from './data/utils';\nimport { ForgotPasswordPage } from './forgot-password';\nimport Logistration from './logistration/Logistration';\nimport { ProgressiveProfiling } from './progressive-profiling';\nimport { RecommendationsPage } from './recommendations';\nimport { RegistrationPage } from './register';\nimport { ResetPasswordPage } from './reset-password';\n\nimport './index.scss';\n\nregisterIcons();\n\nconst MainApp = () => (\n \n \n \n \n
\n \n \n {isExtraSmall ? (\n
\n \n {isLoading && (\n
\n \n