@openedx/frontend-app-authn 1.0.0-alpha.0

package/src/logistration/Logistration.jsx

@@ -0,0 +1,189 @@
+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

@@ -0,0 +1,275 @@
+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());
+  });
+});