\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 '@openedx/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 '@openedx/paragon';\nimport { Institution } from '@openedx/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 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';\nexport const REGISTER_SET_EMAIL_SUGGESTIONS = 'REGISTER_SET_EMAIL_SUGGESTIONS';\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// Set email field frontend validations\nexport const setEmailSuggestionInStore = (emailSuggestion) => ({\n type: REGISTER_SET_EMAIL_SUGGESTIONS,\n payload: { emailSuggestion },\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 '@openedx/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 React from 'react';\n\nimport { getConfig } from '@edx/frontend-platform';\nimport { useIntl } from '@edx/frontend-platform/i18n';\nimport { Hyperlink, Image } from '@openedx/paragon';\nimport classNames from 'classnames';\n\nimport messages from './messages';\n\nconst LargeLayout = () => {\n const { formatMessage } = useIntl();\n\n return (\n\n
\n );\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 '@openedx/paragon';\nimport classNames from 'classnames';\n\nimport messages from './messages';\n\nconst MediumLayout = () => {\n const { formatMessage } = useIntl();\n\n return (\n <>\n \n \n \n \n
\n \n \n \n {formatMessage(messages['start.learning'])}\n
\n \n {formatMessage(messages['with.site.name'], { siteName: getConfig().SITE_NAME })}\n
\n \n \n \n
\n \n
\n \n );\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 '@openedx/paragon';\nimport classNames from 'classnames';\n\nimport messages from './messages';\n\nconst SmallLayout = () => {\n const { formatMessage } = useIntl();\n\n return (\n \n \n \n \n \n
\n \n \n
\n \n \n \n {formatMessage(messages['start.learning'])}{' '}\n \n {formatMessage(messages['with.site.name'], { siteName: getConfig().SITE_NAME })}\n \n \n \n
\n \n \n
\n \n \n \n
\n \n );\n};\n\nexport default SmallLayout;\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 React from 'react';\n\nimport { getConfig } from '@edx/frontend-platform';\nimport { useIntl } from '@edx/frontend-platform/i18n';\nimport { Hyperlink, Image } from '@openedx/paragon';\n\nimport './index.scss';\nimport messages from './messages';\n\nconst LargeLayout = () => {\n const { formatMessage } = useIntl();\n\n return (\n \n \n \n \n {formatMessage(messages['start.learning'])}{' '}\n \n {formatMessage(messages['with.site.name'], { siteName: getConfig().SITE_NAME })}\n \n \n \n
\n \n
\n \n );\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 '@openedx/paragon';\n\nimport './index.scss';\nimport messages from './messages';\n\nconst MediumLayout = () => {\n const { formatMessage } = useIntl();\n\n return (\n \n \n {formatMessage(messages['your.career.turning.point'])}\n \n \n {formatMessage(messages['is.here'])}\n \n
\n\n
\n \n );\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 '@openedx/paragon';\n\nimport messages from './messages';\n\nconst SmallLayout = () => {\n const { formatMessage } = useIntl();\n\n return (\n \n \n {formatMessage(messages['your.career.turning.point'])}{' '}\n \n \n {formatMessage(messages['is.here'])}\n \n
\n\n
\n \n );\n};\n\nexport default SmallLayout;\n","import React from 'react';\n\nimport { getConfig } from '@edx/frontend-platform';\nimport { useIntl } from '@edx/frontend-platform/i18n';\nimport { Hyperlink, Image } from '@openedx/paragon';\n\nimport messages from './messages';\n\nconst ExtraSmallLayout = () => {\n const { formatMessage } = useIntl();\n\n return (\n \n \n {formatMessage(messages['your.career.turning.point'])}{' '}\n \n \n {formatMessage(messages['is.here'])}\n \n
\n\n
\n \n );\n};\n\nexport default ExtraSmallLayout;\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}, {fullName}!',\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 '@openedx/paragon';\nimport PropTypes from 'prop-types';\n\nimport messages from './messages';\n\nconst LargeLayout = ({ fullName }) => {\n const { formatMessage } = useIntl();\n\n return (\n \n \n {formatMessage(messages['your.career.turning.point'])}{' '}\n \n \n {formatMessage(messages['is.here'])}\n \n
\n\n
\n );\n};\n\nLargeLayout.propTypes = {\n fullName: 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 '@openedx/paragon';\nimport PropTypes from 'prop-types';\n\nimport messages from './messages';\n\nconst MediumLayout = ({ fullName }) => {\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, fullName })}\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 fullName: 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 '@openedx/paragon';\nimport PropTypes from 'prop-types';\n\nimport messages from './messages';\n\nconst SmallLayout = ({ fullName }) => {\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, fullName })}\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 fullName: PropTypes.string.isRequired,\n};\n\nexport default SmallLayout;\n","import React from 'react';\n\nimport { getConfig } from '@edx/frontend-platform';\nimport { breakpoints } from '@openedx/paragon';\nimport classNames from 'classnames';\nimport PropTypes from 'prop-types';\nimport MediaQuery from 'react-responsive';\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';\n\nconst BaseContainer = ({ children, showWelcomeBanner, fullName }) => {\n const enableImageLayout = getConfig().ENABLE_IMAGE_LAYOUT;\n\n if (enableImageLayout) {\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, fullName })}\n
\n\n {formatMessage(messages['complete.your.profile.1'])}\n \n {formatMessage(messages['complete.your.profile.2'])}\n \n
\n \n \n {showWelcomeBanner ? \n \n {showWelcomeBanner ? \n \n {showWelcomeBanner ? \n \n {showWelcomeBanner ? \n
\n );\n }\n\n return (\n <>\n \n \n {children}\n
\n \n \n {showWelcomeBanner ? \n \n {showWelcomeBanner ? \n \n {showWelcomeBanner ? \n
\n \n );\n};\n\nBaseContainer.defaultProps = {\n showWelcomeBanner: false,\n fullName: null,\n};\n\nBaseContainer.propTypes = {\n children: PropTypes.node.isRequired,\n showWelcomeBanner: PropTypes.bool,\n fullName: PropTypes.string,\n};\n\nexport default BaseContainer;\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 '@openedx/paragon';\nimport { ChevronLeft } from '@openedx/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 {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 errorMessage ={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 errorMessage = (\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 errorMessage = (\n\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 React from 'react';\n\nimport { getConfig } from '@edx/frontend-platform';\nimport { useIntl } from '@edx/frontend-platform/i18n';\nimport {\n Hyperlink, Icon,\n} from '@openedx/paragon';\nimport { Institution } from '@openedx/paragon/icons';\nimport classNames from 'classnames';\nimport PropTypes from 'prop-types';\nimport Skeleton from 'react-loading-skeleton';\n\nimport messages from './messages';\nimport {\n ENTERPRISE_LOGIN_URL, LOGIN_PAGE, PENDING_STATE, REGISTER_PAGE,\n} from '../data/constants';\n\nimport {\n RenderInstitutionButton,\n SocialAuthProviders,\n} from './index';\n\n/**\n * This component renders the Single sign-on (SSO) buttons for the providers passed.\n * */\nconst ThirdPartyAuth = (props) => {\n const { formatMessage } = useIntl();\n const {\n providers,\n secondaryProviders,\n currentProvider,\n handleInstitutionLogin,\n thirdPartyAuthApiStatus,\n isLoginPage,\n } = props;\n const isInstitutionAuthActive = !!secondaryProviders.length && !currentProvider;\n const isSocialAuthActive = !!providers.length && !currentProvider;\n const isEnterpriseLoginDisabled = getConfig().DISABLE_ENTERPRISE_LOGIN;\n const enterpriseLoginURL = getConfig().LMS_BASE_URL + ENTERPRISE_LOGIN_URL;\n const isThirdPartyAuthActive = isSocialAuthActive || (isEnterpriseLoginDisabled && isInstitutionAuthActive);\n\n return (\n <>\n {((isEnterpriseLoginDisabled && isInstitutionAuthActive) || isSocialAuthActive) && (\n \n
\n \n \n
\n \n Makerspace Login\n
\n )}\n {(isLoginPage && !isEnterpriseLoginDisabled && isSocialAuthActive) && (\n \n
\n ) : (\n <>\n {(isEnterpriseLoginDisabled && isInstitutionAuthActive) && (\n \n
\n )}\n \n )}\n \n );\n};\n\nThirdPartyAuth.defaultProps = {\n currentProvider: null,\n providers: [],\n secondaryProviders: [],\n thirdPartyAuthApiStatus: PENDING_STATE,\n isLoginPage: false,\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 isLoginPage: PropTypes.bool,\n};\n\nexport default ThirdPartyAuth;\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 '@openedx/paragon';\n\nimport messages from './messages';\n\nconst ResetPasswordSuccess = () => {\n const { formatMessage } = useIntl();\n\n return (\n {formatMessage(messages['reset.password.success'])}
\n\n
\n \n );\n};\n\nconst mapStateToProps = state => {\n const loginPageState = state.login;\n return {\n backedUpFormData: loginPageState.loginFormData,\n loginErrorCode: loginPageState.loginErrorCode,\n loginErrorContext: loginPageState.loginErrorContext,\n loginResult: loginPageState.loginResult,\n shouldBackupState: loginPageState.shouldBackupState,\n showResetPasswordSuccessBanner: loginPageState.showResetPasswordSuccessBanner,\n submitState: loginPageState.submitState,\n thirdPartyAuthContext: thirdPartyAuthContextSelector(state),\n thirdPartyAuthApiStatus: state.commonComponents.thirdPartyAuthApiStatus,\n };\n};\n\nLoginPage.propTypes = {\n backedUpFormData: PropTypes.shape({\n formFields: PropTypes.shape({}),\n errors: PropTypes.shape({}),\n }),\n loginErrorCode: PropTypes.string,\n loginErrorContext: PropTypes.shape({\n email: PropTypes.string,\n redirectUrl: PropTypes.string,\n context: PropTypes.shape({}),\n }),\n loginResult: PropTypes.shape({\n redirectUrl: PropTypes.string,\n success: PropTypes.bool,\n }),\n shouldBackupState: PropTypes.bool,\n showResetPasswordSuccessBanner: PropTypes.bool,\n submitState: PropTypes.string,\n thirdPartyAuthApiStatus: PropTypes.string,\n institutionLogin: PropTypes.bool.isRequired,\n thirdPartyAuthContext: PropTypes.shape({\n currentProvider: PropTypes.string,\n errorMessage: PropTypes.string,\n platformName: PropTypes.string,\n providers: PropTypes.arrayOf(PropTypes.shape({})),\n secondaryProviders: PropTypes.arrayOf(PropTypes.shape({})),\n finishAuthUrl: PropTypes.string,\n }),\n // Actions\n backupFormState: PropTypes.func.isRequired,\n dismissPasswordResetBanner: PropTypes.func.isRequired,\n loginRequest: PropTypes.func.isRequired,\n getTPADataFromBackend: PropTypes.func.isRequired,\n handleInstitutionLogin: PropTypes.func.isRequired,\n};\n\nLoginPage.defaultProps = {\n backedUpFormData: {\n formFields: {\n emailOrUsername: '', password: '',\n },\n errors: {\n emailOrUsername: '', password: '',\n },\n },\n loginErrorCode: null,\n loginErrorContext: {},\n loginResult: {},\n shouldBackupState: false,\n showResetPasswordSuccessBanner: false,\n submitState: DEFAULT_STATE,\n thirdPartyAuthApiStatus: PENDING_STATE,\n thirdPartyAuthContext: {\n currentProvider: null,\n errorMessage: null,\n finishAuthUrl: null,\n providers: [],\n secondaryProviders: [],\n },\n};\n\nexport default connect(\n mapStateToProps,\n {\n backupFormState: backupLoginFormBegin,\n dismissPasswordResetBanner,\n loginRequest,\n getTPADataFromBackend: getThirdPartyAuthContext,\n },\n)(injectIntl(LoginPage));\n","import { createSelector } from 'reselect';\n\nexport const storeName = 'resetPassword';\n\nexport const resetPasswordSelector = state => ({ ...state[storeName] });\n\nexport const resetPasswordResultSelector = createSelector(\n resetPasswordSelector,\n resetPassword => resetPassword,\n);\n","import { getConfig } from '@edx/frontend-platform';\nimport { getHttpClient } from '@edx/frontend-platform/auth';\nimport formurlencoded from 'form-urlencoded';\n\n// eslint-disable-next-line import/prefer-default-export\nexport async function validateToken(token) {\n const requestConfig = {\n headers: { 'Content-Type': 'application/x-www-form-urlencoded' },\n };\n\n const { data } = await getHttpClient()\n .post(\n `${getConfig().LMS_BASE_URL}/user_api/v1/account/password_reset/token/validate/`,\n formurlencoded({ token }),\n requestConfig,\n )\n .catch((e) => {\n throw (e);\n });\n return data;\n}\n\n// eslint-disable-next-line import/prefer-default-export\nexport async function resetPassword(payload, token, queryParams) {\n const requestConfig = {\n headers: { 'Content-Type': 'application/x-www-form-urlencoded' },\n };\n const url = new URL(`${getConfig().LMS_BASE_URL}/password/reset/${token}/`);\n\n if (queryParams.is_account_recovery) {\n url.searchParams.append('is_account_recovery', true);\n }\n\n const { data } = await getHttpClient()\n .post(url.href, formurlencoded(payload), requestConfig)\n .catch((e) => {\n throw (e);\n });\n return data;\n}\n\nexport async function validatePassword(payload) {\n const requestConfig = {\n headers: { 'Content-Type': 'application/x-www-form-urlencoded' },\n };\n const { data } = await getHttpClient()\n .post(\n `${getConfig().LMS_BASE_URL}/api/user/v1/validation/registration`,\n formurlencoded(payload),\n requestConfig,\n )\n .catch((e) => {\n throw (e);\n });\n\n let errorMessage = '';\n // Be careful about grabbing this message, since we could have received an HTTP error or the\n // endpoint didn't give us what we expect. We only care if we get a clear error message.\n if (data.validation_decisions && data.validation_decisions.password) {\n errorMessage = data.validation_decisions.password;\n }\n\n return errorMessage;\n}\n","import React from 'react';\n\nimport { useIntl } from '@edx/frontend-platform/i18n';\nimport { Alert } from '@openedx/paragon';\nimport { Error } from '@openedx/paragon/icons';\nimport PropTypes from 'prop-types';\n\nimport { FORM_SUBMISSION_ERROR, PASSWORD_RESET, PASSWORD_VALIDATION_ERROR } from './data/constants';\nimport messages from './messages';\n\nconst ResetPasswordFailure = (props) => {\n const { formatMessage } = useIntl();\n const { errorCode, errorMsg } = props;\n\n let errorMessage = null;\n let heading = formatMessage(messages['reset.password.failure.heading']);\n switch (errorCode) {\n case PASSWORD_RESET.FORBIDDEN_REQUEST:\n heading = formatMessage(messages['reset.server.rate.limit.error']);\n errorMessage = formatMessage(messages['rate.limit.error']);\n break;\n case PASSWORD_RESET.INTERNAL_SERVER_ERROR:\n errorMessage = formatMessage(messages['internal.server.error']);\n break;\n case PASSWORD_VALIDATION_ERROR:\n errorMessage = errorMsg;\n break;\n case FORM_SUBMISSION_ERROR:\n errorMessage = formatMessage(messages['reset.password.form.submission.error']);\n break;\n default:\n break;\n }\n\n if (errorMessage) {\n return (\n \n Lokaler Login (nur für Administratoren)\n
\n \n {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 {registrationEmbedded && welcomePageContextApiStatus === PENDING_STATE ? (\n
\n {showError ? (\n\n {formatMessage(messages['welcome.page.error.heading'])} \n \n ) : null}\n \n \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 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 '@openedx/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 '@openedx/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, { useEffect, useMemo } 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 } 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 /** The reason for adding the entry 'United States' is that Chrome browser aut-fill the form with the 'Unites\n States' instead of 'United States of America' which does not exist in country dropdown list and gets the user\n confused and unable to create an account. So we added the United States entry in the dropdown list.\n */\n const countryList = useMemo(() => getCountryList(getLocale()).concat([{ code: 'US', name: 'United States' }]), []);\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 /**\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 {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 '@openedx/paragon';\nimport { Error } from '@openedx/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
\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() && !hideRegistrationLink && (\n handleOnSelect(tabKey, selectedPage)}>\n \n ))}\n { key && (\n
\n )}\n \n {!institutionLogin && !isValidTpaHint() && hideRegistrationLink && (\n
\n \n {formatMessage(messages[selectedPage === LOGIN_PAGE ? 'logistration.sign.in' : 'logistration.register'])}\n
\n )}\n {selectedPage === LOGIN_PAGE\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 redirectUrl: PropTypes.string.isRequired,\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 = (event) => {\n event.preventDefault();\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 '@openedx/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