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

package/src/common-components/data/service.js

@@ -1,23 +0,0 @@
-import { getAuthenticatedHttpClient, getSiteConfig } from '@openedx/frontend-base';
-
-export async function getThirdPartyAuthContext(urlParams) {
-  const requestConfig = {
-    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-    params: urlParams,
-    isPublic: true,
-  };
-
-  const { data } = await getAuthenticatedHttpClient()
-    .get(
-      `${getSiteConfig().lmsBaseUrl}/api/mfe_context`,
-      requestConfig,
-    )
-    .catch((e) => {
-      throw (e);
-    });
-  return {
-    fieldDescriptions: data.registrationFields || {},
-    optionalFields: data.optionalFields || {},
-    thirdPartyAuthContext: data.contextData || {},
-  };
-}

package/src/common-components/data/tests/reducer.test.js

@@ -1,82 +0,0 @@
-import { PENDING_STATE } from '../../../data/constants';
-import { THIRD_PARTY_AUTH_CONTEXT, THIRD_PARTY_AUTH_CONTEXT_CLEAR_ERROR_MSG } from '../actions';
-import reducer from '../reducers';
-
-describe('common components reducer', () => {
-  it('test mfe context response', () => {
-    const state = {
-      fieldDescriptions: {},
-      optionalFields: {},
-      thirdPartyAuthApiStatus: null,
-      thirdPartyAuthContext: {
-        currentProvider: null,
-        finishAuthUrl: null,
-        countryCode: null,
-        providers: [],
-        secondaryProviders: [],
-        pipelineUserDetails: null,
-        errorMessage: null,
-      },
-    };
-    const fieldDescriptions = {
-      fields: [],
-    };
-    const optionalFields = {
-      fields: [],
-      extended_profile: {},
-    };
-    const thirdPartyAuthContext = { ...state.thirdPartyAuthContext };
-    const action = {
-      type: THIRD_PARTY_AUTH_CONTEXT.SUCCESS,
-      payload: { fieldDescriptions, optionalFields, thirdPartyAuthContext },
-    };
-
-    expect(
-      reducer(state, action),
-    ).toEqual(
-      {
-        ...state,
-        fieldDescriptions: [],
-        optionalFields: {
-          fields: [],
-          extended_profile: {},
-        },
-        thirdPartyAuthApiStatus: 'complete',
-      },
-    );
-  });
-
-  it('should clear tpa context error message', () => {
-    const state = {
-      fieldDescriptions: {},
-      optionalFields: {},
-      thirdPartyAuthApiStatus: null,
-      thirdPartyAuthContext: {
-        currentProvider: null,
-        finishAuthUrl: null,
-        countryCode: null,
-        providers: [],
-        secondaryProviders: [],
-        pipelineUserDetails: null,
-        errorMessage: 'An error occurred',
-      },
-    };
-
-    const action = {
-      type: THIRD_PARTY_AUTH_CONTEXT_CLEAR_ERROR_MSG,
-    };
-
-    expect(
-      reducer(state, action),
-    ).toEqual(
-      {
-        ...state,
-        thirdPartyAuthApiStatus: PENDING_STATE,
-        thirdPartyAuthContext: {
-          ...state.thirdPartyAuthContext,
-          errorMessage: null,
-        },
-      },
-    );
-  });
-});

package/src/common-components/data/tests/sagas.test.js

@@ -1,71 +0,0 @@
-import { runSaga } from 'redux-saga';
-
-import { setCountryFromThirdPartyAuthContext } from '../../../register/data/actions';
-import { initializeMockServices } from '../../../setupTest';
-import * as actions from '../actions';
-import { fetchThirdPartyAuthContext } from '../sagas';
-import * as api from '../service';
-
-const { loggingService } = initializeMockServices();
-
-describe('fetchThirdPartyAuthContext', () => {
-  const params = {
-    payload: { urlParams: {} },
-  };
-
-  const data = {
-    currentProvider: null,
-    providers: [],
-    secondaryProviders: [],
-    finishAuthUrl: null,
-    pipelineUserDetails: {},
-  };
-
-  beforeEach(() => {
-    loggingService.logError.mockReset();
-  });
-
-  it('should call service and dispatch success action', async () => {
-    const getThirdPartyAuthContext = jest.spyOn(api, 'getThirdPartyAuthContext')
-      .mockImplementation(() => Promise.resolve({
-        thirdPartyAuthContext: data,
-        fieldDescriptions: {},
-        optionalFields: {},
-      }));
-
-    const dispatched = [];
-    await runSaga(
-      { dispatch: (action) => dispatched.push(action) },
-      fetchThirdPartyAuthContext,
-      params,
-    );
-
-    expect(getThirdPartyAuthContext).toHaveBeenCalledTimes(1);
-    expect(dispatched).toEqual([
-      actions.getThirdPartyAuthContextBegin(),
-      setCountryFromThirdPartyAuthContext(),
-      actions.getThirdPartyAuthContextSuccess({}, {}, data),
-    ]);
-    getThirdPartyAuthContext.mockClear();
-  });
-
-  it('should call service and dispatch error action', async () => {
-    const getThirdPartyAuthContext = jest.spyOn(api, 'getThirdPartyAuthContext')
-      .mockImplementation(() => Promise.reject(new Error('something went wrong')));
-
-    const dispatched = [];
-    await runSaga(
-      { dispatch: (action) => dispatched.push(action) },
-      fetchThirdPartyAuthContext,
-      params,
-    );
-
-    expect(getThirdPartyAuthContext).toHaveBeenCalledTimes(1);
-    expect(loggingService.logError).toHaveBeenCalled();
-    expect(dispatched).toEqual([
-      actions.getThirdPartyAuthContextBegin(),
-      actions.getThirdPartyAuthContextFailure(),
-    ]);
-    getThirdPartyAuthContext.mockClear();
-  });
-});

package/src/common-components/messages.jsx

@@ -1,127 +0,0 @@
-import { defineMessages } from '@openedx/frontend-base';
-
-const messages = defineMessages({
-  // institution login strings
-  'institution.login.page.sub.heading': {
-    id: 'institution.login.page.sub.heading',
-    defaultMessage: 'Choose your institution from the list below',
-    description: 'Heading of the institutions list',
-  },
-  // logistration strings
-  'logistration.sign.in': {
-    id: 'logistration.sign.in',
-    defaultMessage: 'Sign in',
-    description: 'Text that appears on the tab to switch between login and register',
-  },
-  'logistration.register': {
-    id: 'logistration.register',
-    defaultMessage: 'Register',
-    description: 'Text that appears on the tab to switch between login and register',
-  },
-  // enterprise sso strings
-  'enterprisetpa.title.heading': {
-    id: 'enterprisetpa.title.heading',
-    defaultMessage: 'Would you like to sign in using your {providerName} credentials?',
-    description: 'Header text used in enterprise third party authentication',
-  },
-  'enterprisetpa.login.button.text': {
-    id: 'enterprisetpa.login.button.text',
-    defaultMessage: 'Show me other ways to sign in or register',
-    description: 'Button text for login',
-  },
-  'enterprisetpa.login.button.text.public.account.creation.disabled': {
-    id: 'enterprisetpa.login.button.text.public.account.creation.disabled',
-    defaultMessage: 'Show me other ways to sign in',
-    description: 'Button text for login when account creation is disabled',
-  },
-  // social auth providers
-  'sso.sign.in.with': {
-    id: 'sso.sign.in.with',
-    defaultMessage: 'Sign in with {providerName}',
-    description: 'Screen reader text that appears before social auth provider name',
-  },
-  'sso.create.account.using': {
-    id: 'sso.create.account.using',
-    defaultMessage: 'Create account using {providerName}',
-    description: 'Screen reader text that appears before social auth provider name',
-  },
-  // password field strings
-  'show.password': {
-    id: 'show.password',
-    defaultMessage: 'Show password',
-    description: 'aria label for show password icon on password field',
-  },
-  'hide.password': {
-    id: 'hide.password',
-    defaultMessage: 'Hide password',
-    description: 'aria label for hide password icon on password field',
-  },
-  'one.letter': {
-    id: 'one.letter',
-    defaultMessage: '1 letter',
-    description: 'password requirement to have 1 letter',
-  },
-  'one.number': {
-    id: 'one.number',
-    defaultMessage: '1 number',
-    description: 'password requirement to have 1 number',
-  },
-  'eight.characters': {
-    id: 'eight.characters',
-    defaultMessage: '8 characters',
-    description: 'password requirement to have a minimum of 8 characters',
-  },
-  'password.sr.only.helping.text': {
-    id: 'password.sr.only.helping.text',
-    defaultMessage: 'Password must contain at least 8 characters, at least one letter, and at least one number',
-    description: 'Password helping text for the sr-only class',
-  },
-  // third party auth
-  'tpa.alert.heading': {
-    id: 'tpa.alert.heading',
-    defaultMessage: 'Almost done!',
-    description: 'Success alert heading after user has successfully signed in with social auth',
-  },
-  'login.third.party.auth.account.not.linked': {
-    id: 'login.third.party.auth.account.not.linked',
-    defaultMessage: 'You have successfully signed into {currentProvider}, but your {currentProvider} '
-      + 'account does not have a linked {platformName} account. To link your accounts, '
-      + 'sign in now using your {platformName} password.',
-    description: 'Message that appears on login page if user has successfully authenticated with social '
-      + 'auth but no associated platform account exists',
-  },
-  'register.third.party.auth.account.not.linked': {
-    id: 'register.third.party.auth.account.not.linked',
-    defaultMessage: 'You\'ve successfully signed into {currentProvider}! We just need a little more information '
-      + 'before you start learning with {platformName}.',
-    description: 'Message that appears on register page if user has successfully authenticated with TPA '
-      + 'but no associated platform account exists',
-  },
-  'registration.using.tpa.form.heading': {
-    id: 'registration.using.tpa.form.heading',
-    defaultMessage: 'Finish creating your account',
-    description: 'Heading that appears above form when user is trying to create account using social auth',
-  },
-  'registration.other.options.heading': {
-    id: 'registration.other.options.heading',
-    defaultMessage: 'Or register with:',
-    description: 'A message that appears above third party auth providers i.e saml, google, facebook etc',
-  },
-  'institution.login.button': {
-    id: 'institution.login.button',
-    defaultMessage: 'Institution/campus credentials',
-    description: 'shows institutions list',
-  },
-  'login.other.options.heading': {
-    id: 'login.other.options.heading',
-    defaultMessage: 'Or sign in with:',
-    description: 'Text that appears above other sign in options like social auth buttons',
-  },
-  'enterprise.login.btn.text': {
-    id: 'enterprise.login.btn.text',
-    defaultMessage: 'Company or school credentials',
-    description: 'Company or school login link text.',
-  },
-});
-
-export default messages;

package/src/common-components/tests/EmbeddedRegistrationRoute.test.jsx

@@ -1,76 +0,0 @@
-/* eslint-disable import/no-import-module-exports */
-/* eslint-disable react/function-component-definition */
-
-import { getSiteConfig } from '@openedx/frontend-base';
-import { render } from '@testing-library/react';
-import { act } from 'react-dom/test-utils';
-import {
-  MemoryRouter, Route, BrowserRouter as Router, Routes,
-} from 'react-router-dom';
-
-import { PAGE_NOT_FOUND, REGISTER_EMBEDDED_PAGE } from '../../data/constants';
-import EmbeddedRegistrationRoute from '../EmbeddedRegistrationRoute';
-
-const RRD = require('react-router-dom');
-// Just render plain div with its children
-// eslint-disable-next-line react/prop-types
-RRD.BrowserRouter = ({ children }) => <div>{children}</div>;
-module.exports = RRD;
-
-const TestApp = () => (
-  <Router>
-    <div>
-      <Routes>
-        <Route
-          path={REGISTER_EMBEDDED_PAGE}
-          element={<EmbeddedRegistrationRoute><span>Embedded Register Page</span></EmbeddedRegistrationRoute>}
-        />
-        <Route
-          path={PAGE_NOT_FOUND}
-          element={<span>Page not found</span>}
-        />
-      </Routes>
-    </div>
-  </Router>
-);
-
-describe('EmbeddedRegistrationRoute', () => {
-  const routerWrapper = () => (
-    <MemoryRouter initialEntries={[REGISTER_EMBEDDED_PAGE]}>
-      <TestApp />
-    </MemoryRouter>
-  );
-
-  afterEach(() => {
-    jest.clearAllMocks();
-  });
-
-  it('should not render embedded register page if host query param is not available in the url', async () => {
-    let embeddedRegistrationPage = null;
-    await act(async () => {
-      const { container } = await render(routerWrapper());
-      embeddedRegistrationPage = container;
-    });
-
-    const renderedPage = embeddedRegistrationPage.querySelector('span');
-    expect(renderedPage.textContent).toBe('Page not found');
-  });
-
-  it('should render embedded register page if host query param is available in the url (embedded)', async () => {
-    delete window.location;
-    window.location = {
-      href: getSiteConfig().baseUrl.concat(REGISTER_EMBEDDED_PAGE),
-      search: '?host=http://localhost/host-websit',
-    };
-
-    let embeddedRegistrationPage = null;
-    await act(async () => {
-      const { container } = await render(routerWrapper());
-      embeddedRegistrationPage = container;
-    });
-
-    const renderedPage = embeddedRegistrationPage.querySelector('span');
-    expect(renderedPage).toBeTruthy();
-    expect(renderedPage.textContent).toBe('Embedded Register Page');
-  });
-});

package/src/common-components/tests/FormField.test.jsx

@@ -1,289 +0,0 @@
-import { Provider } from 'react-redux';
-
-import { injectIntl, IntlProvider } from '@openedx/frontend-base';
-import { fireEvent, render } from '@testing-library/react';
-import { act } from 'react-dom/test-utils';
-import { MemoryRouter } from 'react-router-dom';
-import configureStore from 'redux-mock-store';
-
-import { fetchRealtimeValidations } from '../../register/data/actions';
-import FormGroup from '../FormGroup';
-import PasswordField from '../PasswordField';
-
-describe('FormGroup', () => {
-  const props = {
-    floatingLabel: 'Email',
-    helpText: ['Email field help text'],
-    name: 'email',
-    value: '',
-    handleFocus: jest.fn(),
-  };
-
-  it('should show help text on field focus', () => {
-    const { queryByText, getByLabelText } = render(<FormGroup {...props} />);
-    const emailInput = getByLabelText('Email');
-
-    expect(queryByText('Email field help text')).toBeNull();
-
-    fireEvent.focus(emailInput);
-
-    const helpText = queryByText('Email field help text');
-
-    expect(helpText).toBeTruthy();
-    expect(helpText.textContent).toEqual('Email field help text');
-  });
-});
-
-describe('PasswordField', () => {
-  const mockStore = configureStore();
-  const IntlPasswordField = injectIntl(PasswordField);
-  let props = {};
-  let store = {};
-
-  const reduxWrapper = children => (
-    <IntlProvider locale="en">
-      <MemoryRouter>
-        <Provider store={store}>{children}</Provider>
-      </MemoryRouter>
-    </IntlProvider>
-  );
-
-  const initialState = {
-    register: {
-      validationApiRateLimited: false,
-    },
-  };
-
-  beforeEach(() => {
-    store = mockStore(initialState);
-    props = {
-      floatingLabel: 'Password',
-      name: 'password',
-      value: 'password123',
-      handleFocus: jest.fn(),
-    };
-  });
-
-  it('should show/hide password on icon click', () => {
-    const { getByLabelText } = render(reduxWrapper(<IntlPasswordField {...props} />));
-    const passwordInput = getByLabelText('Password');
-
-    const showPasswordButton = getByLabelText('Show password');
-    fireEvent.click(showPasswordButton);
-    expect(passwordInput.type).toBe('text');
-
-    const hidePasswordButton = getByLabelText('Hide password');
-    fireEvent.click(hidePasswordButton);
-    expect(passwordInput.type).toBe('password');
-  });
-
-  it('should show password requirement tooltip on focus', async () => {
-    const { getByLabelText } = render(reduxWrapper(<IntlPasswordField {...props} />));
-    const passwordInput = getByLabelText('Password');
-    jest.useFakeTimers();
-    await act(async () => {
-      fireEvent.focus(passwordInput);
-      jest.runAllTimers();
-    });
-    const passwordRequirementTooltip = document.querySelector('#password-requirement-left');
-
-    expect(passwordRequirementTooltip).toBeTruthy();
-  });
-
-  it('should show all password requirement checks as failed', async () => {
-    props = {
-      ...props,
-      value: '',
-    };
-    const { getByLabelText } = render(reduxWrapper(<IntlPasswordField {...props} />));
-    const passwordInput = getByLabelText('Password');
-    jest.useFakeTimers();
-    await act(async () => {
-      fireEvent.focus(passwordInput);
-      jest.runAllTimers();
-    });
-
-    const letterCheckIcon = document.querySelector('#letter-check span');
-    const numberCheckIcon = document.querySelector('#number-check span');
-    const charactersCheckIcon = document.querySelector('#characters-check span');
-
-    expect(letterCheckIcon).toBeTruthy();
-    expect(letterCheckIcon.className).toContain('pgn__icon mr-1 text-light-700');
-
-    expect(numberCheckIcon).toBeTruthy();
-    expect(numberCheckIcon.className).toContain('pgn__icon mr-1 text-light-700');
-
-    expect(charactersCheckIcon).toBeTruthy();
-    expect(charactersCheckIcon.className).toContain('pgn__icon mr-1 text-light-700');
-  });
-
-  it('should update password requirement checks', async () => {
-    const { getByLabelText } = render(reduxWrapper(<IntlPasswordField {...props} />));
-    const passwordInput = getByLabelText('Password');
-    jest.useFakeTimers();
-    await act(async () => {
-      fireEvent.focus(passwordInput);
-      jest.runAllTimers();
-    });
-
-    const letterCheckIcon = document.querySelector('#letter-check span');
-    const numberCheckIcon = document.querySelector('#number-check span');
-    const charactersCheckIcon = document.querySelector('#characters-check span');
-
-    expect(letterCheckIcon).toBeTruthy();
-    expect(letterCheckIcon.className).toContain('pgn__icon text-success mr-1');
-
-    expect(numberCheckIcon).toBeTruthy();
-    expect(numberCheckIcon.className).toContain('pgn__icon text-success mr-1');
-
-    expect(charactersCheckIcon).toBeTruthy();
-    expect(charactersCheckIcon.className).toContain('pgn__icon text-success mr-1');
-  });
-
-  it('should not run validations when blur is fired on password icon click', () => {
-    const { container, getByLabelText } = render(reduxWrapper(<IntlPasswordField {...props} />));
-    const passwordInput = container.querySelector('input[name="password"]');
-
-    const passwordIcon = getByLabelText('Show password');
-
-    fireEvent.blur(passwordInput, {
-      target: {
-        name: 'password',
-        value: 'invalid',
-      },
-      relatedTarget: passwordIcon,
-    });
-
-    expect(container.querySelector('div[feedback-for="password"]')).toBeNull();
-  });
-
-  it('should call props handle blur if available', () => {
-    props = {
-      ...props,
-      handleBlur: jest.fn(),
-    };
-    const { container } = render(reduxWrapper(<IntlPasswordField {...props} />));
-    const passwordInput = container.querySelector('input[name="password"]');
-
-    fireEvent.blur(passwordInput, {
-      target: {
-        name: 'password',
-        value: '',
-      },
-    });
-
-    expect(props.handleBlur).toHaveBeenCalledTimes(1);
-  });
-
-  it('should run validations on blur event when rendered from register page', () => {
-    props = {
-      ...props,
-      handleErrorChange: jest.fn(),
-    };
-    const { container } = render(reduxWrapper(<IntlPasswordField {...props} />));
-    const passwordInput = container.querySelector('input[name="password"]');
-
-    fireEvent.blur(passwordInput, {
-      target: {
-        name: 'password',
-        value: '',
-      },
-    });
-
-    expect(props.handleErrorChange).toHaveBeenCalledTimes(1);
-    expect(props.handleErrorChange).toHaveBeenCalledWith(
-      'password',
-      'Password criteria has not been met',
-    );
-  });
-
-  it('should not clear error when focus is fired on password icon click when rendered from register page', () => {
-    props = {
-      ...props,
-      handleErrorChange: jest.fn(),
-    };
-
-    const { getByLabelText } = render(reduxWrapper(<IntlPasswordField {...props} />));
-
-    const passwordIcon = getByLabelText('Show password');
-
-    fireEvent.focus(passwordIcon, {
-      target: {
-        name: 'passwordIcon',
-        value: '',
-      },
-    });
-
-    expect(props.handleErrorChange).toHaveBeenCalledTimes(0);
-  });
-
-  it('should clear error when focus is fired on password icon click when rendered from register page', () => {
-    props = {
-      ...props,
-      handleErrorChange: jest.fn(),
-    };
-
-    const { getByLabelText } = render(reduxWrapper(<IntlPasswordField {...props} />));
-
-    const passwordIcon = getByLabelText('Show password');
-
-    fireEvent.focus(passwordIcon, {
-      target: {
-        name: 'password',
-        value: 'invalid',
-      },
-    });
-
-    expect(props.handleErrorChange).toHaveBeenCalledTimes(1);
-    expect(props.handleErrorChange).toHaveBeenCalledWith(
-      'password',
-      '',
-    );
-  });
-
-  it('should run backend validations when frontend validations pass on blur when rendered from register page', () => {
-    store.dispatch = jest.fn(store.dispatch);
-    props = {
-      ...props,
-      handleErrorChange: jest.fn(),
-    };
-    const { getByLabelText } = render(reduxWrapper(<IntlPasswordField {...props} />));
-    const passwordField = getByLabelText('Password');
-    fireEvent.blur(passwordField, {
-      target: {
-        name: 'password',
-        value: 'password123',
-      },
-    });
-
-    expect(store.dispatch).toHaveBeenCalledWith(fetchRealtimeValidations({ password: 'password123' }));
-  });
-
-  it('should use password value from prop when password icon is focused out (blur due to icon)', () => {
-    store.dispatch = jest.fn(store.dispatch);
-    props = {
-      ...props,
-      value: 'testPassword',
-      handleErrorChange: jest.fn(),
-      handleBlur: jest.fn(),
-    };
-    const { getByLabelText } = render(reduxWrapper(<IntlPasswordField {...props} />));
-
-    const passwordIcon = getByLabelText('Show password');
-
-    fireEvent.blur(passwordIcon, {
-      target: {
-        name: 'passwordIcon',
-        value: undefined,
-      },
-    });
-
-    expect(props.handleBlur).toHaveBeenCalledTimes(1);
-    expect(props.handleBlur).toHaveBeenCalledWith({
-      target: {
-        name: 'password',
-        value: 'testPassword',
-      },
-    });
-  });
-});