@openedx/frontend-app-authn 1.0.0-alpha.5 → 1.0.0-alpha.6

package/src/logistration/Logistration.jsx

@@ -1,189 +0,0 @@
-import { useEffect, useState } from 'react';
-import { connect } from 'react-redux';
-
-import {
-  useAppConfig, getAuthService, getSiteConfig, sendPageEvent, sendTrackEvent, useIntl
-} from '@openedx/frontend-base';
-import {
-  Icon,
-  Tab,
-  Tabs,
-} from '@openedx/paragon';
-import { ChevronLeft } from '@openedx/paragon/icons';
-import PropTypes from 'prop-types';
-import { Navigate, useNavigate } from 'react-router-dom';
-
-import BaseContainer from '../base-container';
-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 {
-  getTpaHint, getTpaProvider, updatePathWithQueryParams,
-} from '../data/utils';
-import { LoginPage } from '../login';
-import { backupLoginForm } from '../login/data/actions';
-import { RegistrationPage } from '../register';
-import { backupRegistrationForm } from '../register/data/actions';
-
-const Logistration = (props) => {
-  const { selectedPage, tpaProviders } = props;
-  const tpaHint = getTpaHint();
-  const {
-    providers, secondaryProviders,
-  } = tpaProviders;
-  const { formatMessage } = useIntl();
-  const [institutionLogin, setInstitutionLogin] = useState(false);
-  const [key, setKey] = useState('');
-  const navigate = useNavigate();
-  const disablePublicAccountCreation = useAppConfig().ALLOW_PUBLIC_ACCOUNT_CREATION === false;
-  const hideRegistrationLink = useAppConfig().SHOW_REGISTRATION_LINKS === false;
-
-  useEffect(() => {
-    const authService = getAuthService();
-    if (authService) {
-      authService.getCsrfTokenService().getCsrfToken(getSiteConfig().lmsBaseUrl);
-    }
-  });
-
-  useEffect(() => {
-    if (disablePublicAccountCreation) {
-      navigate(updatePathWithQueryParams(LOGIN_PAGE));
-    }
-  }, [navigate, disablePublicAccountCreation]);
-
-  const handleInstitutionLogin = (e) => {
-    sendTrackEvent('edx.bi.institution_login_form.toggled', { category: 'user-engagement' });
-    if (typeof e === 'string') {
-      sendPageEvent('login_and_registration', e === '/login' ? 'login' : 'register');
-    } else {
-      sendPageEvent('login_and_registration', e.target.dataset.eventName);
-    }
-
-    setInstitutionLogin(!institutionLogin);
-  };
-
-  const handleOnSelect = (tabKey, currentTab) => {
-    if (tabKey === currentTab) {
-      return;
-    }
-    sendTrackEvent(`edx.bi.${tabKey.replace('/', '')}_form.toggled`, { category: 'user-engagement' });
-    props.clearThirdPartyAuthContextErrorMessage();
-    if (tabKey === LOGIN_PAGE) {
-      props.backupRegistrationForm();
-    } else if (tabKey === REGISTER_PAGE) {
-      props.backupLoginForm();
-    }
-    setKey(tabKey);
-  };
-
-  const tabTitle = (
-    <div className="d-flex">
-      <Icon src={ChevronLeft} className="left-icon" />
-      <span className="ml-2">
-        {selectedPage === LOGIN_PAGE
-          ? formatMessage(messages['logistration.sign.in'])
-          : formatMessage(messages['logistration.register'])}
-      </span>
-    </div>
-  );
-
-  const isValidTpaHint = () => {
-    const { provider } = getTpaProvider(tpaHint, providers, secondaryProviders);
-    return !!provider;
-  };
-
-  return (
-    <BaseContainer>
-      <div>
-        {disablePublicAccountCreation
-          ? (
-            <>
-              {institutionLogin && (
-                <Tabs defaultActiveKey="" id="controlled-tab" onSelect={handleInstitutionLogin}>
-                  <Tab title={tabTitle} eventKey={LOGIN_PAGE} />
-                </Tabs>
-              )}
-              <div id="main-content" className="main-content">
-                {!institutionLogin && (
-                  <h3 className="mb-4.5">{formatMessage(messages['logistration.sign.in'])}</h3>
-                )}
-                <LoginPage institutionLogin={institutionLogin} handleInstitutionLogin={handleInstitutionLogin} />
-              </div>
-            </>
-          )
-          : (
-            <div>
-              {institutionLogin
-                ? (
-                  <Tabs defaultActiveKey="" id="controlled-tab" onSelect={handleInstitutionLogin}>
-                    <Tab title={tabTitle} eventKey={selectedPage === LOGIN_PAGE ? LOGIN_PAGE : REGISTER_PAGE} />
-                  </Tabs>
-                )
-                : (!isValidTpaHint() && !hideRegistrationLink && (
-                  <Tabs defaultActiveKey={selectedPage} id="controlled-tab" onSelect={(tabKey) => handleOnSelect(tabKey, selectedPage)}>
-                    <Tab title={formatMessage(messages['logistration.register'])} eventKey={REGISTER_PAGE} />
-                    <Tab title={formatMessage(messages['logistration.sign.in'])} eventKey={LOGIN_PAGE} />
-                  </Tabs>
-                ))}
-              {key && (
-                <Navigate to={updatePathWithQueryParams(key)} replace />
-              )}
-              <div id="main-content" className="main-content">
-                {!institutionLogin && !isValidTpaHint() && hideRegistrationLink && (
-                  <h3 className="mb-4.5">
-                    {formatMessage(messages[selectedPage === LOGIN_PAGE ? 'logistration.sign.in' : 'logistration.register'])}
-                  </h3>
-                )}
-                {selectedPage === LOGIN_PAGE
-                  ? <LoginPage institutionLogin={institutionLogin} handleInstitutionLogin={handleInstitutionLogin} />
-                  : (
-                    <RegistrationPage
-                      institutionLogin={institutionLogin}
-                      handleInstitutionLogin={handleInstitutionLogin}
-                    />
-                  )}
-              </div>
-            </div>
-          )}
-      </div>
-    </BaseContainer>
-  );
-};
-
-Logistration.propTypes = {
-  selectedPage: PropTypes.string,
-  backupLoginForm: PropTypes.func.isRequired,
-  backupRegistrationForm: PropTypes.func.isRequired,
-  clearThirdPartyAuthContextErrorMessage: PropTypes.func.isRequired,
-  tpaProviders: PropTypes.shape({
-    providers: PropTypes.arrayOf(PropTypes.shape({})),
-    secondaryProviders: PropTypes.arrayOf(PropTypes.shape({})),
-  }),
-};
-
-Logistration.defaultProps = {
-  tpaProviders: {
-    providers: [],
-    secondaryProviders: [],
-  },
-};
-
-Logistration.defaultProps = {
-  selectedPage: REGISTER_PAGE,
-};
-
-const mapStateToProps = state => ({
-  tpaProviders: tpaProvidersSelector(state),
-});
-
-export default connect(
-  mapStateToProps,
-  {
-    backupLoginForm,
-    backupRegistrationForm,
-    clearThirdPartyAuthContextErrorMessage,
-  },
-)(Logistration);

package/src/logistration/Logistration.test.jsx

@@ -1,275 +0,0 @@
-import { Provider } from 'react-redux';
-
-import {
-  CurrentAppProvider, configureI18n, getSiteConfig, injectIntl, IntlProvider, mergeAppConfig, sendPageEvent, sendTrackEvent
-} from '@openedx/frontend-base';
-import { fireEvent, render, screen } from '@testing-library/react';
-import { MemoryRouter } from 'react-router-dom';
-import configureStore from 'redux-mock-store';
-
-import { appId } from '../constants';
-import { clearThirdPartyAuthContextErrorMessage } from '../common-components/data/actions';
-import {
-  COMPLETE_STATE, LOGIN_PAGE, REGISTER_PAGE,
-} from '../data/constants';
-import { backupLoginForm } from '../login/data/actions';
-import { backupRegistrationForm } from '../register/data/actions';
-import Logistration from './Logistration';
-
-jest.mock('@openedx/frontend-base', () => ({
-  ...jest.requireActual('@openedx/frontend-base'),
-  sendPageEvent: jest.fn(),
-  sendTrackEvent: jest.fn(),
-  getAuthenticatedUser: jest.fn(() => ({
-    userId: 3,
-    username: 'test-user',
-  })),
-  getAuthService: jest.fn(() => null),
-}));
-
-const mockStore = configureStore();
-const IntlLogistration = injectIntl(Logistration);
-
-describe('Logistration', () => {
-  let store = {};
-
-  const secondaryProviders = {
-    id: 'saml-test',
-    name: 'Test University',
-    loginUrl: '/dummy-auth',
-    registerUrl: '/dummy_auth',
-  };
-
-  const reduxWrapper = children => (
-    <IntlProvider locale="en">
-      <MemoryRouter>
-        <CurrentAppProvider appId={appId}>
-          <Provider store={store}>{children}</Provider>
-        </CurrentAppProvider>
-      </MemoryRouter>
-    </IntlProvider>
-  );
-
-  const initialState = {
-    register: {
-      registrationFormData: {
-        configurableFormFields: {
-          marketingEmailsOptIn: true,
-        },
-        formFields: {
-          name: '', email: '', username: '', password: '',
-        },
-        emailSuggestion: {
-          suggestion: '', type: '',
-        },
-        errors: {
-          name: '', email: '', username: '', password: '',
-        },
-      },
-      registrationResult: { success: false, redirectUrl: '' },
-      registrationError: {},
-      usernameSuggestions: [],
-      validationApiRateLimited: false,
-    },
-    commonComponents: {
-      thirdPartyAuthContext: {
-        providers: [],
-        secondaryProviders: [],
-      },
-    },
-    login: {
-      loginResult: { success: false, redirectUrl: '' },
-    },
-  };
-
-  beforeEach(() => {
-    store = mockStore(initialState);
-
-    configureI18n({
-      messages: { 'es-419': {}, de: {}, 'en-us': {} },
-    });
-  });
-
-  it('should render registration page', () => {
-    mergeAppConfig(appId, {
-      ALLOW_PUBLIC_ACCOUNT_CREATION: true,
-    });
-
-    const { container } = render(reduxWrapper(<IntlLogistration />));
-
-    expect(container.querySelector('RegistrationPage')).toBeDefined();
-  });
-
-  it('should render login page', () => {
-    const props = { selectedPage: LOGIN_PAGE };
-    const { container } = render(reduxWrapper(<IntlLogistration {...props} />));
-
-    expect(container.querySelector('LoginPage')).toBeDefined();
-  });
-
-  it('should render login/register headings when show registration links is disabled', () => {
-    mergeAppConfig(appId, {
-      ALLOW_PUBLIC_ACCOUNT_CREATION: true,
-      SHOW_REGISTRATION_LINKS: false,
-    });
-
-    let props = { selectedPage: LOGIN_PAGE };
-    const { rerender } = render(reduxWrapper(<IntlLogistration {...props} />));
-
-    // verifying sign in heading
-    expect(screen.getByRole('heading', { level: 3 }).textContent).toEqual('Sign in');
-
-    // register page is still accessible when SHOW_REGISTRATION_LINKS is false
-    // but it needs to be accessed directly
-    props = { selectedPage: REGISTER_PAGE };
-    rerender(reduxWrapper(<IntlLogistration {...props} />));
-
-    // verifying register heading
-    expect(screen.getByRole('heading', { level: 3 }).textContent).toEqual('Register');
-  });
-
-  it('should render only login page when public account creation is disabled', () => {
-    mergeAppConfig(appId, {
-      ALLOW_PUBLIC_ACCOUNT_CREATION: false,
-      DISABLE_ENTERPRISE_LOGIN: 'true',
-      SHOW_REGISTRATION_LINKS: 'true',
-    });
-
-    store = mockStore({
-      ...initialState,
-      commonComponents: {
-        thirdPartyAuthContext: {
-          currentProvider: null,
-          finishAuthUrl: null,
-          providers: [],
-          secondaryProviders: [secondaryProviders],
-        },
-        thirdPartyAuthApiStatus: COMPLETE_STATE,
-      },
-    });
-
-    const props = { selectedPage: LOGIN_PAGE };
-    const { container } = render(reduxWrapper(<IntlLogistration {...props} />));
-
-    // verifying sign in heading for institution login false
-    expect(screen.getByRole('heading', { level: 3 }).textContent).toEqual('Sign in');
-
-    // verifying tabs heading for institution login true
-    fireEvent.click(screen.getByRole('link'));
-    expect(container.querySelector('#controlled-tab')).toBeDefined();
-  });
-
-  it('should display institution login option when secondary providers are present', () => {
-    mergeAppConfig(appId, {
-      DISABLE_ENTERPRISE_LOGIN: 'true',
-      ALLOW_PUBLIC_ACCOUNT_CREATION: 'true',
-    });
-
-    store = mockStore({
-      ...initialState,
-      commonComponents: {
-        thirdPartyAuthContext: {
-          currentProvider: null,
-          finishAuthUrl: null,
-          providers: [],
-          secondaryProviders: [secondaryProviders],
-        },
-        thirdPartyAuthApiStatus: COMPLETE_STATE,
-      },
-    });
-
-    const props = { selectedPage: LOGIN_PAGE };
-    render(reduxWrapper(<IntlLogistration {...props} />));
-    expect(screen.getByText('Institution/campus credentials')).toBeDefined();
-
-    // on clicking "Institution/campus credentials" button, it should display institution login page
-    fireEvent.click(screen.getByText('Institution/campus credentials'));
-    expect(screen.getByText('Test University')).toBeDefined();
-
-    mergeAppConfig(appId, {
-      DISABLE_ENTERPRISE_LOGIN: '',
-    });
-  });
-
-  it('send tracking and page events when institutional login button is clicked', () => {
-    mergeAppConfig(appId, {
-      DISABLE_ENTERPRISE_LOGIN: 'true',
-    });
-
-    store = mockStore({
-      ...initialState,
-      commonComponents: {
-        thirdPartyAuthContext: {
-          currentProvider: null,
-          finishAuthUrl: null,
-          providers: [],
-          secondaryProviders: [secondaryProviders],
-        },
-        thirdPartyAuthApiStatus: COMPLETE_STATE,
-      },
-    });
-
-    const props = { selectedPage: LOGIN_PAGE };
-    render(reduxWrapper(<IntlLogistration {...props} />));
-    fireEvent.click(screen.getByText('Institution/campus credentials'));
-
-    expect(sendTrackEvent).toHaveBeenCalledWith('edx.bi.institution_login_form.toggled', { category: 'user-engagement' });
-    expect(sendPageEvent).toHaveBeenCalledWith('login_and_registration', 'institution_login');
-
-    mergeAppConfig(appId, {
-      DISABLE_ENTERPRISE_LOGIN: '',
-    });
-  });
-
-  it('should not display institution register button', () => {
-    mergeAppConfig(appId, {
-      DISABLE_ENTERPRISE_LOGIN: 'true',
-    });
-
-    store = mockStore({
-      ...initialState,
-      commonComponents: {
-        thirdPartyAuthContext: {
-          currentProvider: null,
-          finishAuthUrl: null,
-          providers: [],
-          secondaryProviders: [secondaryProviders],
-        },
-        thirdPartyAuthApiStatus: COMPLETE_STATE,
-      },
-    });
-
-    delete window.location;
-    window.location = { hostname: getSiteConfig().siteName, href: getSiteConfig().baseUrl };
-
-    render(reduxWrapper(<IntlLogistration />));
-    fireEvent.click(screen.getByText('Institution/campus credentials'));
-    expect(screen.getByText('Test University')).toBeDefined();
-
-    mergeAppConfig(appId, {
-      DISABLE_ENTERPRISE_LOGIN: '',
-    });
-  });
-
-  it('should fire action to backup registration form on tab click', () => {
-    store.dispatch = jest.fn(store.dispatch);
-    const { container } = render(reduxWrapper(<IntlLogistration />));
-    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 props = { selectedPage: LOGIN_PAGE };
-    const { container } = render(reduxWrapper(<IntlLogistration {...props} />));
-    fireEvent.click(container.querySelector('a[data-rb-event-key="/register"]'));
-    expect(store.dispatch).toHaveBeenCalledWith(backupLoginForm());
-  });
-
-  it('should clear tpa context errorMessage tab click', () => {
-    store.dispatch = jest.fn(store.dispatch);
-    const { container } = render(reduxWrapper(<IntlLogistration />));
-    fireEvent.click(container.querySelector('a[data-rb-event-key="/login"]'));
-    expect(store.dispatch).toHaveBeenCalledWith(clearThirdPartyAuthContextErrorMessage());
-  });
-});