diff --git a/src/data/reducers.js b/src/data/reducers.js index 11c126198e..fea47d91f2 100755 --- a/src/data/reducers.js +++ b/src/data/reducers.js @@ -1,3 +1,5 @@ +// Todo: need to change imports when package is published to edly-io +import { emailCheckReducer, emailCheckStoreName } from '@anas_hameed/edly-saas-widget'; import { combineReducers } from 'redux'; import { @@ -29,6 +31,7 @@ const createRootReducer = () => combineReducers({ [loginStoreName]: loginReducer, [registerStoreName]: registerReducer, [commonComponentsStoreName]: commonComponentsReducer, + [emailCheckStoreName]: emailCheckReducer, [forgotPasswordStoreName]: forgotPasswordReducer, [resetPasswordStoreName]: resetPasswordReducer, [authnProgressiveProfilingStoreName]: authnProgressiveProfilingReducers, diff --git a/src/data/sagas.js b/src/data/sagas.js index 07c9259c5d..a4a91440fa 100644 --- a/src/data/sagas.js +++ b/src/data/sagas.js @@ -1,3 +1,5 @@ +// Todo: need to change imports when package is published to edly-io +import { emailCheckSaga } from '@anas_hameed/edly-saas-widget'; import { all } from 'redux-saga/effects'; import { saga as commonComponentsSaga } from '../common-components'; @@ -12,6 +14,7 @@ export default function* rootSaga() { loginSaga(), registrationSaga(), commonComponentsSaga(), + emailCheckSaga(), forgotPasswordSaga(), resetPasswordSaga(), authnProgressiveProfilingSaga(), diff --git a/src/login/LoginPage.jsx b/src/login/LoginPage.jsx index 6281572675..e55bdfe8fe 100644 --- a/src/login/LoginPage.jsx +++ b/src/login/LoginPage.jsx @@ -1,6 +1,8 @@ import React, { useEffect, useMemo, useState } from 'react'; -import { connect } from 'react-redux'; +import { connect, useSelector } from 'react-redux'; +// Todo: need to change imports when package is published to edly-io +import { EdlyLogistrationInfo } from '@anas_hameed/edly-saas-widget'; import { getConfig } from '@edx/frontend-platform'; import { sendPageEvent, sendTrackEvent } from '@edx/frontend-platform/analytics'; import { injectIntl, useIntl } from '@edx/frontend-platform/i18n'; @@ -72,7 +74,12 @@ const LoginPage = (props) => { const activationMsgType = getActivationStatus(); const queryParams = useMemo(() => getAllPossibleQueryParams(), []); - const [formFields, setFormFields] = useState({ ...backedUpFormData.formFields }); + const edlyPrefilledEmail = useSelector(state => state.emailCheck?.prefilledEmail); + const edlyContext = useSelector(state => state.emailCheck?.context); + const [formFields, setFormFields] = useState({ + ...backedUpFormData.formFields, + emailOrUsername: (!edlyContext?.is_new_user ? edlyPrefilledEmail : '') || backedUpFormData.formFields.emailOrUsername, + }); const [errorCode, setErrorCode] = useState({ type: '', count: 0, context: {} }); const [errors, setErrors] = useState({ ...backedUpFormData.errors }); const tpaHint = getTpaHint(); @@ -223,11 +230,13 @@ const LoginPage = (props) => { messageType={activationMsgType} /> {showResetPasswordSuccessBanner && } + {!errorCode.type && }
{ LoginPage.propTypes = { backedUpFormData: PropTypes.shape({ - formFields: PropTypes.shape({}), + formFields: PropTypes.shape({ + emailOrUsername: PropTypes.string, + }), errors: PropTypes.shape({}), }), loginErrorCode: PropTypes.string, diff --git a/src/logistration/Logistration.jsx b/src/logistration/Logistration.jsx index 9451aa2745..f16999893b 100644 --- a/src/logistration/Logistration.jsx +++ b/src/logistration/Logistration.jsx @@ -1,6 +1,8 @@ import React, { useEffect, useState } from 'react'; import { connect } from 'react-redux'; +// Todo: need to change imports when package is published to edly-io +import { emailCheckComplete, EmailCheckWidget } from '@anas_hameed/edly-saas-widget'; import { getConfig } from '@edx/frontend-platform'; import { sendPageEvent, sendTrackEvent } from '@edx/frontend-platform/analytics'; import { getAuthService } from '@edx/frontend-platform/auth'; @@ -15,12 +17,13 @@ import PropTypes from 'prop-types'; import { Navigate, useNavigate } from 'react-router-dom'; import BaseContainer from '../base-container'; +import { FormGroup } from '../common-components'; import { clearThirdPartyAuthContextErrorMessage } from '../common-components/data/actions'; import { tpaProvidersSelector, } from '../common-components/data/selectors'; import messages from '../common-components/messages'; -import { LOGIN_PAGE, REGISTER_PAGE } from '../data/constants'; +import { LOGIN_PAGE, REGISTER_PAGE, VALID_EMAIL_REGEX } from '../data/constants'; import { getTpaHint, getTpaProvider, updatePathWithQueryParams, } from '../data/utils'; @@ -30,7 +33,7 @@ import { RegistrationPage } from '../register'; import { backupRegistrationForm } from '../register/data/actions'; const Logistration = (props) => { - const { selectedPage, tpaProviders } = props; + const { selectedPage, tpaProviders, showEmailCheck } = props; const tpaHint = getTpaHint(); const { providers, secondaryProviders, @@ -96,6 +99,24 @@ const Logistration = (props) => { return !!provider; }; + const handleEmailCheckComplete = (redirectTo, email, errorCode) => { + props.emailCheckComplete(email, errorCode); + const targetPage = redirectTo === 'login' ? LOGIN_PAGE : REGISTER_PAGE; + if (selectedPage !== targetPage) { + navigate(updatePathWithQueryParams(targetPage)); + } + }; + if (showEmailCheck && !tpaHint) { + return ( + + ); + } + return (
@@ -156,9 +177,11 @@ const Logistration = (props) => { Logistration.propTypes = { selectedPage: PropTypes.string, + showEmailCheck: PropTypes.bool.isRequired, backupLoginForm: PropTypes.func.isRequired, backupRegistrationForm: PropTypes.func.isRequired, clearThirdPartyAuthContextErrorMessage: PropTypes.func.isRequired, + emailCheckComplete: PropTypes.func.isRequired, tpaProviders: PropTypes.shape({ providers: PropTypes.arrayOf(PropTypes.shape({})), secondaryProviders: PropTypes.arrayOf(PropTypes.shape({})), @@ -178,6 +201,7 @@ Logistration.defaultProps = { const mapStateToProps = state => ({ tpaProviders: tpaProvidersSelector(state), + showEmailCheck: state.emailCheck?.showEmailCheck, }); export default connect( @@ -186,5 +210,6 @@ export default connect( backupLoginForm, backupRegistrationForm, clearThirdPartyAuthContextErrorMessage, + emailCheckComplete, }, )(Logistration); diff --git a/src/register/RegistrationPage.jsx b/src/register/RegistrationPage.jsx index 3230677080..7ba08b8e84 100644 --- a/src/register/RegistrationPage.jsx +++ b/src/register/RegistrationPage.jsx @@ -3,6 +3,8 @@ import React, { } from 'react'; import { useDispatch, useSelector } from 'react-redux'; +// Todo: need to change imports when package is published to edly-io +import { EdlyLogistrationInfo } from '@anas_hameed/edly-saas-widget'; import { getConfig } from '@edx/frontend-platform'; import { sendPageEvent, sendTrackEvent } from '@edx/frontend-platform/analytics'; import { useIntl } from '@edx/frontend-platform/i18n'; @@ -90,7 +92,13 @@ const RegistrationPage = (props) => { const queryParams = useMemo(() => getAllPossibleQueryParams(), []); const tpaHint = useMemo(() => getTpaHint(), []); - const [formFields, setFormFields] = useState({ ...backedUpFormData.formFields }); + const edlyPrefilledEmail = useSelector(state => state.emailCheck?.prefilledEmail); + const edlyContext = useSelector(state => state.emailCheck?.context); + const isNewUser = edlyContext?.is_new_user; + const [formFields, setFormFields] = useState({ + ...backedUpFormData.formFields, + email: (isNewUser ? edlyPrefilledEmail : '') || backedUpFormData.formFields.email, + }); const [configurableFormFields, setConfigurableFormFields] = useState({ ...backedUpFormData.configurableFormFields }); const [errors, setErrors] = useState({ ...backedUpFormData.errors }); const [errorCode, setErrorCode] = useState({ type: '', count: 0 }); @@ -307,6 +315,7 @@ const RegistrationPage = (props) => { failureCount={errorCode.count} context={{ provider: currentProvider, errorMessage: thirdPartyAuthErrorMessage }} /> + {!errorCode.type && } { confirmEmailValue={configurableFormFields?.confirm_email} handleErrorChange={handleErrorChange} handleChange={handleOnChange} + readOnly={!!edlyPrefilledEmail && isNewUser} errorMessage={errors.email} helpText={[formatMessage(messages['help.text.email'])]} floatingLabel={formatMessage(messages['registration.email.label'])}