diff --git a/src/data/constants.js b/src/data/constants.js index d389c3e21b..cb09e5a38c 100644 --- a/src/data/constants.js +++ b/src/data/constants.js @@ -9,7 +9,7 @@ export const RECOMMENDATIONS = '/recommendations'; export const PASSWORD_RESET_CONFIRM = '/password_reset_confirm/:token/'; export const PAGE_NOT_FOUND = '/notfound'; export const ENTERPRISE_LOGIN_URL = '/enterprise/login'; -export const APP_NAME = 'authn'; +export const APP_NAME = 'authn_mfe'; // Constants export const SUPPORTED_ICON_CLASSES = ['apple', 'facebook', 'google', 'microsoft']; diff --git a/src/login/LoginPage.jsx b/src/login/LoginPage.jsx index 1779ae1efe..3a44bd6419 100644 --- a/src/login/LoginPage.jsx +++ b/src/login/LoginPage.jsx @@ -4,7 +4,6 @@ import { import { useDispatch, useSelector } from 'react-redux'; import { getConfig } from '@edx/frontend-platform'; -import { sendPageEvent, sendTrackEvent } from '@edx/frontend-platform/analytics'; import { useIntl } from '@edx/frontend-platform/i18n'; import { Form, StatefulButton } from '@openedx/paragon'; import PropTypes from 'prop-types'; @@ -12,6 +11,14 @@ import { Helmet } from 'react-helmet'; import Skeleton from 'react-loading-skeleton'; import { Link } from 'react-router-dom'; +import AccountActivationMessage from './AccountActivationMessage'; +import { + ELEMENT_NAME, + ELEMENT_TEXT, + ELEMENT_TYPES, + PAGE_TYPES, +} from '../cohesion/constants'; +import { setCohesionEventStates } from '../cohesion/data/actions'; import { FormGroup, InstitutionLogistration, @@ -19,7 +26,8 @@ import { RedirectLogistration, ThirdPartyAuthAlert, } from '../common-components'; -import AccountActivationMessage from './AccountActivationMessage'; +import LoginFailureMessage from './LoginFailure'; +import messages from './messages'; import { getThirdPartyAuthContext } from '../common-components/data/actions'; import { thirdPartyAuthContextSelector } from '../common-components/data/selectors'; import EnterpriseSSO from '../common-components/EnterpriseSSO'; @@ -32,11 +40,13 @@ import { getTpaProvider, updatePathWithQueryParams, } from '../data/utils'; -import ResetPasswordSuccess from '../reset-password/ResetPasswordSuccess'; import { backupLoginFormBegin, dismissPasswordResetBanner, loginRequest } from './data/actions'; +import { removeCookie } from '../data/utils/cookies'; +import ResetPasswordSuccess from '../reset-password/ResetPasswordSuccess'; import { INVALID_FORM, TPA_AUTHENTICATION_FAILURE } from './data/constants'; -import LoginFailureMessage from './LoginFailure'; -import messages from './messages'; +import { + trackForgotPasswordLinkClick, trackLoginPageViewed, trackLoginSuccess, +} from '../tracking/trackers/login'; const DEFAULT_LOGIN_FORM_DATA = { formFields: { emailOrUsername: '', password: '' }, @@ -96,7 +106,7 @@ const LoginPage = ({ const tpaHint = getTpaHint(); useEffect(() => { - sendPageEvent('login_and_registration', 'login'); + trackLoginPageViewed(); }, []); useEffect(() => { @@ -140,6 +150,13 @@ const LoginPage = ({ } }, [thirdPartyErrorMessage]); + useEffect(() => { + if (loginResult.success) { + trackLoginSuccess(); + removeCookie('ssoPipelineRedirectionDone'); + } + }, [loginResult]); + const validateFormFields = (payload) => { const { emailOrUsername, @@ -183,6 +200,13 @@ const LoginPage = ({ password: formData.password, ...queryParams, }; + const eventData = { + pageType: PAGE_TYPES.SIGN_IN, + elementType: ELEMENT_TYPES.BUTTON, + webElementText: ELEMENT_TEXT.SIGN_IN, + webElementName: ELEMENT_NAME.SIGN_IN, + }; + dispatch(setCohesionEventStates(eventData)); dispatch(loginRequest(payload)); }; @@ -204,9 +228,6 @@ const LoginPage = ({ [name]: '', })); }; - const trackForgotPasswordLinkClick = () => { - sendTrackEvent('edx.bi.password-reset_form.toggled', { category: 'user-engagement' }); - }; const { provider, @@ -246,6 +267,7 @@ const LoginPage = ({ success={loginResult.success} redirectUrl={loginResult.redirectUrl} finishAuthUrl={finishAuthUrl} + currectProvider={currentProvider} />
{ it('should send page event when login page is rendered', () => { render(reduxWrapper()); - expect(sendPageEvent).toHaveBeenCalledWith('login_and_registration', 'login'); + expect(sendPageEvent).toHaveBeenCalledWith( + 'login_and_registration', + 'login', + { app_name: 'authn_mfe' }, + ); }); it('tests that form is in invalid state when it is submitted', () => { diff --git a/src/logistration/Logistration.jsx b/src/logistration/Logistration.jsx index da14e787c6..8f98ed54c7 100644 --- a/src/logistration/Logistration.jsx +++ b/src/logistration/Logistration.jsx @@ -21,7 +21,7 @@ import { tpaProvidersSelector, } from '../common-components/data/selectors'; import messages from '../common-components/messages'; -import { LOGIN_PAGE, REGISTER_PAGE } from '../data/constants'; +import { APP_NAME, LOGIN_PAGE, REGISTER_PAGE } from '../data/constants'; import { getTpaHint, getTpaProvider, updatePathWithQueryParams, } from '../data/utils'; @@ -63,7 +63,7 @@ const Logistration = ({ authService.getCsrfTokenService() .getCsrfToken(getConfig().LMS_BASE_URL); } - }); + }, []); useEffect(() => { if (disablePublicAccountCreation) { @@ -72,11 +72,11 @@ const Logistration = ({ }, [navigate, disablePublicAccountCreation]); const handleInstitutionLogin = (e) => { - sendTrackEvent('edx.bi.institution_login_form.toggled', { category: 'user-engagement' }); + sendTrackEvent('edx.bi.institution_login_form.toggled', { category: 'user-engagement', app_name: APP_NAME }); if (typeof e === 'string') { - sendPageEvent('login_and_registration', e === '/login' ? 'login' : 'register'); + sendPageEvent('login_and_registration', e === '/login' ? 'login' : 'register', { app_name: APP_NAME }); } else { - sendPageEvent('login_and_registration', e.target.dataset.eventName); + sendPageEvent('login_and_registration', e.target.dataset.eventName, { app_name: APP_NAME }); } setInstitutionLogin(!institutionLogin); @@ -86,7 +86,7 @@ const Logistration = ({ if (tabKey === currentTab) { return; } - sendTrackEvent(`edx.bi.${tabKey.replace('/', '')}_form.toggled`, { category: 'user-engagement' }); + sendTrackEvent(`edx.bi.${tabKey.replace('/', '')}_form.toggled`, { category: 'user-engagement', app_name: APP_NAME }); dispatch(clearThirdPartyAuthContextErrorMessage()); if (tabKey === LOGIN_PAGE) { dispatch(backupRegistrationForm()); diff --git a/src/logistration/Logistration.test.jsx b/src/logistration/Logistration.test.jsx index a886a38bcb..cf5be86732 100644 --- a/src/logistration/Logistration.test.jsx +++ b/src/logistration/Logistration.test.jsx @@ -11,7 +11,7 @@ import configureStore from 'redux-mock-store'; import Logistration from './Logistration'; import { clearThirdPartyAuthContextErrorMessage } from '../common-components/data/actions'; import { - COMPLETE_STATE, LOGIN_PAGE, REGISTER_PAGE, + APP_NAME, COMPLETE_STATE, LOGIN_PAGE, REGISTER_PAGE, } from '../data/constants'; import { backupLoginForm } from '../login/data/actions'; import { backupRegistrationForm } from '../register/data/actions'; @@ -249,6 +249,7 @@ describe('Logistration', () => { expect(sendPageEvent).toHaveBeenCalledWith( 'login_and_registration', 'institution_login', + { app_name: APP_NAME }, ); mergeConfig({