diff --git a/src/common-components/ThirdPartyAuth.jsx b/src/common-components/ThirdPartyAuth.jsx index bdffc55cf3..3b78203605 100644 --- a/src/common-components/ThirdPartyAuth.jsx +++ b/src/common-components/ThirdPartyAuth.jsx @@ -6,6 +6,7 @@ import { Hyperlink, Icon, } from '@openedx/paragon'; import { Institution } from '@openedx/paragon/icons'; +import classNames from 'classnames'; import PropTypes from 'prop-types'; import Skeleton from 'react-loading-skeleton'; @@ -47,14 +48,23 @@ const ThirdPartyAuth = (props) => { )} {(isLoginPage && !isEnterpriseLoginDisabled && isSocialAuthActive) && ( - + {formatMessage(messages['enterprise.login.btn.text'])} )} {thirdPartyAuthApiStatus === PENDING_STATE ? ( - +
+ +
) : ( <> {(isEnterpriseLoginDisabled && isInstitutionAuthActive) && ( diff --git a/src/logistration/Logistration.jsx b/src/logistration/Logistration.jsx index 971f146f9c..cc41d5e15d 100644 --- a/src/logistration/Logistration.jsx +++ b/src/logistration/Logistration.jsx @@ -70,7 +70,10 @@ const Logistration = (props) => { setInstitutionLogin(!institutionLogin); }; - const handleOnSelect = (tabKey) => { + const handleOnSelect = (tabKey, currentTab) => { + if (tabKey === currentTab) { + return; + } sendTrackEvent(`edx.bi.${tabKey.replace('/', '')}_form.toggled`, { category: 'user-engagement' }); props.clearThirdPartyAuthContextErrorMessage(); if (tabKey === LOGIN_PAGE) { @@ -122,7 +125,7 @@ const Logistration = (props) => { ); } return ( - + handleOnSelect(tabKey, selectedPage)}> diff --git a/src/logistration/Logistration.test.jsx b/src/logistration/Logistration.test.jsx index 3b231d2276..9cdc05a0be 100644 --- a/src/logistration/Logistration.test.jsx +++ b/src/logistration/Logistration.test.jsx @@ -98,6 +98,14 @@ describe('Logistration', () => { }); }); + it('should do nothing when user clicks on the same tab (login/register) again', () => { + const { container } = render(reduxWrapper()); + // While staying on the registration form, clicking the register tab again + fireEvent.click(container.querySelector('a[data-rb-event-key="/register"]')); + + expect(sendTrackEvent).not.toHaveBeenCalledWith('edx.bi.register_form.toggled', { category: 'user-engagement' }); + }); + it('should render registration page', () => { mergeConfig({ ALLOW_PUBLIC_ACCOUNT_CREATION: true, @@ -264,9 +272,11 @@ describe('Logistration', () => { fireEvent.click(container.querySelector('a[data-rb-event-key="/login"]')); expect(store.dispatch).toHaveBeenCalledWith(backupRegistrationForm()); }); + it('should fire action to backup login form on tab click', () => { store.dispatch = jest.fn(store.dispatch); - const { container } = render(reduxWrapper()); + const props = { selectedPage: LOGIN_PAGE }; + const { container } = render(reduxWrapper()); fireEvent.click(container.querySelector('a[data-rb-event-key="/register"]')); expect(store.dispatch).toHaveBeenCalledWith(backupLoginForm()); });