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

package/src/register/components/tests/ThirdPartyAuth.test.jsx

@@ -1,439 +0,0 @@
-import { Provider } from 'react-redux';
-
-import {
-  configureI18n, getSiteConfig, getLocale, injectIntl, IntlProvider, mergeAppConfig
-} from '@openedx/frontend-base';
-import { fireEvent, render } from '@testing-library/react';
-import { BrowserRouter as Router } from 'react-router-dom';
-import configureStore from 'redux-mock-store';
-
-import {
-  COMPLETE_STATE, LOGIN_PAGE, PENDING_STATE, REGISTER_PAGE,
-} from '../../../data/constants';
-import { appId } from '../../../constants';
-import RegistrationPage from '../../RegistrationPage';
-
-jest.mock('@openedx/frontend-base', () => ({
-  ...jest.requireActual('@openedx/frontend-base'),
-  sendPageEvent: jest.fn(),
-  sendTrackEvent: jest.fn(),
-  getLocale: jest.fn(),
-}));
-
-const IntlRegistrationPage = injectIntl(RegistrationPage);
-const mockStore = configureStore();
-
-jest.mock('react-router-dom', () => {
-  const mockNavigation = jest.fn();
-
-  // eslint-disable-next-line react/prop-types
-  const Navigate = ({ to }) => {
-    mockNavigation(to);
-    return <div />;
-  };
-
-  return {
-    ...jest.requireActual('react-router-dom'),
-    Navigate,
-    mockNavigate: mockNavigation,
-  };
-});
-
-describe('ThirdPartyAuth', () => {
-  mergeAppConfig(appId, {
-    PRIVACY_POLICY: 'https://privacy-policy.com',
-    TOS_AND_HONOR_CODE: 'https://tos-and-honot-code.com',
-    USER_RETENTION_COOKIE_NAME: 'authn-returning-user',
-  });
-
-  let props = {};
-  let store = {};
-  const registrationFormData = {
-    configurableFormFields: {
-      marketingEmailsOptIn: true,
-    },
-    formFields: {
-      name: '', email: '', username: '', password: '',
-    },
-    emailSuggestion: {
-      suggestion: '', type: '',
-    },
-    errors: {
-      name: '', email: '', username: '', password: '',
-    },
-  };
-
-  const reduxWrapper = children => (
-    <IntlProvider locale="en">
-      <Provider store={store}>{children}</Provider>
-    </IntlProvider>
-  );
-
-  const routerWrapper = children => (
-    <Router>
-      {children}
-    </Router>
-  );
-
-  const thirdPartyAuthContext = {
-    currentProvider: null,
-    finishAuthUrl: null,
-    providers: [],
-    secondaryProviders: [],
-    pipelineUserDetails: null,
-    countryCode: null,
-  };
-
-  const initialState = {
-    register: {
-      registrationResult: { success: false, redirectUrl: '' },
-      registrationError: {},
-      registrationFormData,
-      usernameSuggestions: [],
-    },
-    commonComponents: {
-      thirdPartyAuthApiStatus: null,
-      thirdPartyAuthContext,
-      fieldDescriptions: {},
-      optionalFields: {
-        fields: {},
-        extended_profile: [],
-      },
-    },
-  };
-
-  beforeEach(() => {
-    store = mockStore(initialState);
-    configureI18n({
-      messages: { 'es-419': {}, de: {}, 'en-us': {} },
-    });
-    props = {
-      handleInstitutionLogin: jest.fn(),
-      institutionLogin: false,
-    };
-    window.location = { search: '' };
-  });
-
-  afterEach(() => {
-    jest.clearAllMocks();
-  });
-
-  const ssoProvider = {
-    id: 'oa2-apple-id',
-    name: 'Apple',
-    iconClass: 'apple',
-    iconImage: 'https://openedx.devstack.lms/logo.png',
-    loginUrl: '/auth/login/apple-id/?auth_entry=login&next=/dashboard',
-  };
-
-  describe('Test Third Party Auth', () => {
-    getLocale.mockImplementation(() => ('en-us'));
-
-    const secondaryProviders = {
-      id: 'saml-test', name: 'Test University', loginUrl: '/dummy-auth', registerUrl: '/dummy_auth',
-    };
-
-    it('should not display password field when current provider is present', () => {
-      store = mockStore({
-        ...initialState,
-        commonComponents: {
-          ...initialState.commonComponents,
-          thirdPartyAuthContext: {
-            ...initialState.commonComponents.thirdPartyAuthContext,
-            currentProvider: ssoProvider.name,
-          },
-        },
-      });
-
-      const { queryByLabelText } = render(
-        routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />, { store })),
-      );
-
-      const passwordField = queryByLabelText('Password');
-
-      expect(passwordField).toBeNull();
-    });
-
-    it('should render tpa button for tpa_hint id matching one of the primary providers', () => {
-      store = mockStore({
-        ...initialState,
-        commonComponents: {
-          ...initialState.commonComponents,
-          thirdPartyAuthContext: {
-            ...initialState.commonComponents.thirdPartyAuthContext,
-            providers: [ssoProvider],
-          },
-          thirdPartyAuthApiStatus: COMPLETE_STATE,
-        },
-      });
-
-      delete window.location;
-      window.location = { href: getSiteConfig().baseUrl.concat(LOGIN_PAGE), search: `?next=/dashboard&tpa_hint=${ssoProvider.id}` };
-
-      const { container } = render(
-        routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)),
-      );
-      const tpaButton = container.querySelector(`button#${ssoProvider.id}`);
-
-      expect(tpaButton).toBeTruthy();
-      expect(tpaButton.textContent).toEqual(ssoProvider.name);
-      expect(tpaButton.classList.contains('btn-tpa')).toBe(true);
-      expect(tpaButton.classList.contains(`btn-${ssoProvider.id}`)).toBe(true);
-    });
-
-    it('should display skeleton if tpa_hint is true and thirdPartyAuthContext is pending', () => {
-      store = mockStore({
-        ...initialState,
-        commonComponents: {
-          ...initialState.commonComponents,
-          thirdPartyAuthApiStatus: PENDING_STATE,
-        },
-      });
-
-      delete window.location;
-      window.location = {
-        href: getSiteConfig().baseUrl.concat(LOGIN_PAGE),
-        search: `?next=/dashboard&tpa_hint=${ssoProvider.id}`,
-      };
-
-      const { container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
-      const skeletonElement = container.querySelector('.react-loading-skeleton');
-
-      expect(skeletonElement).toBeTruthy();
-    });
-
-    it('should render icon if icon classes are missing in providers', () => {
-      ssoProvider.iconClass = null;
-      store = mockStore({
-        ...initialState,
-        commonComponents: {
-          ...initialState.commonComponents,
-          thirdPartyAuthContext: {
-            ...initialState.commonComponents.thirdPartyAuthContext,
-            providers: [ssoProvider],
-          },
-          thirdPartyAuthApiStatus: COMPLETE_STATE,
-        },
-      });
-
-      delete window.location;
-      window.location = { href: getSiteConfig().baseUrl.concat(REGISTER_PAGE), search: `?next=/dashboard&tpa_hint=${ssoProvider.id}` };
-      ssoProvider.iconImage = null;
-
-      const { container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
-      const iconElement = container.querySelector(`button#${ssoProvider.id} div span.pgn__icon`);
-
-      expect(iconElement).toBeTruthy();
-    });
-
-    it('should render tpa button for tpa_hint id matching one of the secondary providers', () => {
-      secondaryProviders.skipHintedLogin = true;
-      store = mockStore({
-        ...initialState,
-        commonComponents: {
-          ...initialState.commonComponents,
-          thirdPartyAuthContext: {
-            ...initialState.commonComponents.thirdPartyAuthContext,
-            secondaryProviders: [secondaryProviders],
-          },
-          thirdPartyAuthApiStatus: COMPLETE_STATE,
-        },
-      });
-
-      delete window.location;
-      window.location = { href: getSiteConfig().baseUrl.concat(REGISTER_PAGE), search: `?next=/dashboard&tpa_hint=${secondaryProviders.id}` };
-
-      render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
-      expect(window.location.href).toEqual(getSiteConfig().lmsBaseUrl + secondaryProviders.registerUrl);
-    });
-
-    it('should render regular tpa button for invalid tpa_hint value', () => {
-      const expectedMessage = `${ssoProvider.name}`;
-      store = mockStore({
-        ...initialState,
-        commonComponents: {
-          ...initialState.commonComponents,
-          thirdPartyAuthContext: {
-            ...initialState.commonComponents.thirdPartyAuthContext,
-            providers: [ssoProvider],
-          },
-          thirdPartyAuthApiStatus: COMPLETE_STATE,
-        },
-      });
-
-      delete window.location;
-      window.location = { href: getSiteConfig().baseUrl.concat(LOGIN_PAGE), search: '?next=/dashboard&tpa_hint=invalid' };
-
-      const { container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
-      const providerButton = container.querySelector(`button#${ssoProvider.id} span#provider-name`);
-
-      expect(providerButton.textContent).toEqual(expectedMessage);
-    });
-
-    it('should show single sign on provider button', () => {
-      store = mockStore({
-        ...initialState,
-        commonComponents: {
-          ...initialState.commonComponents,
-          thirdPartyAuthContext: {
-            ...initialState.commonComponents.thirdPartyAuthContext,
-            providers: [ssoProvider],
-          },
-        },
-      });
-
-      const { container } = render(
-        routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />, { store })),
-      );
-
-      const buttonsWithId = container.querySelectorAll(`button#${ssoProvider.id}`);
-
-      expect(buttonsWithId.length).toEqual(1);
-    });
-
-    it('should show single sign on provider button', () => {
-      store = mockStore({
-        ...initialState,
-        commonComponents: {
-          ...initialState.commonComponents,
-          thirdPartyAuthContext: {
-            ...initialState.commonComponents.thirdPartyAuthContext,
-            providers: [ssoProvider],
-          },
-        },
-      });
-
-      const { container } = render(
-        routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)),
-      );
-
-      const buttonsWithId = container.querySelectorAll(`button#${ssoProvider.id}`);
-
-      expect(buttonsWithId.length).toEqual(1);
-    });
-
-    it('should display InstitutionLogistration if insitutionLogin prop is true', () => {
-      props = {
-        ...props,
-        institutionLogin: true,
-      };
-
-      const { getByText } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
-      const headingElement = getByText('Register with institution/campus credentials');
-      expect(headingElement).toBeTruthy();
-    });
-
-    it('should redirect to social auth provider url on SSO button click', () => {
-      const registerUrl = '/auth/login/apple-id/?auth_entry=register&next=/dashboard';
-      store = mockStore({
-        ...initialState,
-        commonComponents: {
-          ...initialState.commonComponents,
-          thirdPartyAuthContext: {
-            ...initialState.commonComponents.thirdPartyAuthContext,
-            providers: [{
-              ...ssoProvider,
-              registerUrl,
-            }],
-          },
-        },
-      });
-
-      delete window.location;
-      window.location = { href: getSiteConfig().baseUrl };
-
-      const { container } = render(
-        routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)),
-      );
-
-      const ssoButton = container.querySelector('button#oa2-apple-id');
-      fireEvent.click(ssoButton);
-
-      expect(window.location.href).toBe(getSiteConfig().lmsBaseUrl + registerUrl);
-    });
-
-    it('should redirect to finishAuthUrl upon successful registration via SSO', () => {
-      const authCompleteUrl = '/auth/complete/google-oauth2/';
-      store = mockStore({
-        ...initialState,
-        register: {
-          ...initialState.register,
-          registrationResult: {
-            success: true,
-          },
-        },
-        commonComponents: {
-          ...initialState.commonComponents,
-          thirdPartyAuthContext: {
-            ...initialState.commonComponents.thirdPartyAuthContext,
-            finishAuthUrl: authCompleteUrl,
-          },
-        },
-      });
-
-      delete window.location;
-      window.location = { href: getSiteConfig().baseUrl };
-
-      render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
-      expect(window.location.href).toBe(getSiteConfig().lmsBaseUrl + authCompleteUrl);
-    });
-
-    // ******** test alert messages ********
-
-    it('should match third party auth alert', () => {
-      store = mockStore({
-        ...initialState,
-        commonComponents: {
-          ...initialState.commonComponents,
-          thirdPartyAuthContext: {
-            ...initialState.commonComponents.thirdPartyAuthContext,
-            currentProvider: 'Apple',
-          },
-        },
-      });
-
-      const expectedMessage = `${'You\'ve successfully signed into Apple! We just need a little more information before '
-        + 'you start learning with '}${getSiteConfig().siteName}.`;
-
-      const { container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
-      const tpaAlert = container.querySelector('#tpa-alert p');
-      expect(tpaAlert.textContent).toEqual(expectedMessage);
-    });
-
-    it('should display errorMessage if third party authentication fails', () => {
-      jest.spyOn(global.Date, 'now').mockImplementation(() => 0);
-      getLocale.mockImplementation(() => ('en-us'));
-
-      store = mockStore({
-        ...initialState,
-        register: {
-          ...initialState.register,
-          backendCountryCode: 'PK',
-          userPipelineDataLoaded: false,
-        },
-        commonComponents: {
-          ...initialState.commonComponents,
-          thirdPartyAuthApiStatus: COMPLETE_STATE,
-          thirdPartyAuthContext: {
-            ...initialState.commonComponents.thirdPartyAuthContext,
-            currentProvider: null,
-            pipelineUserDetails: {},
-            errorMessage: 'An error occurred',
-          },
-        },
-      });
-
-      store.dispatch = jest.fn(store.dispatch);
-
-      const { container } = render(
-        routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)),
-      );
-
-      const alertHeading = container.querySelector('div.alert-heading');
-      expect(alertHeading).toBeTruthy();
-
-      const alert = container.querySelector('div.alert');
-      expect(alert.textContent).toContain('An error occurred');
-    });
-  });
-});

package/src/register/data/actions.js

@@ -1,85 +0,0 @@
-import { AsyncActionType } from '../../data/utils';
-
-export const BACKUP_REGISTRATION_DATA = new AsyncActionType('REGISTRATION', 'BACKUP_REGISTRATION_DATA');
-export const REGISTER_FORM_VALIDATIONS = new AsyncActionType('REGISTRATION', 'GET_FORM_VALIDATIONS');
-export const REGISTER_NEW_USER = new AsyncActionType('REGISTRATION', 'REGISTER_NEW_USER');
-export const REGISTER_CLEAR_USERNAME_SUGGESTIONS = 'REGISTRATION_CLEAR_USERNAME_SUGGESTIONS';
-export const REGISTRATION_CLEAR_BACKEND_ERROR = 'REGISTRATION_CLEAR_BACKEND_ERROR';
-export const REGISTER_SET_COUNTRY_CODE = 'REGISTER_SET_COUNTRY_CODE';
-export const REGISTER_SET_USER_PIPELINE_DATA_LOADED = 'REGISTER_SET_USER_PIPELINE_DATA_LOADED';
-export const REGISTER_SET_EMAIL_SUGGESTIONS = 'REGISTER_SET_EMAIL_SUGGESTIONS';
-
-// Backup registration form
-export const backupRegistrationForm = () => ({
-  type: BACKUP_REGISTRATION_DATA.BASE,
-});
-
-export const backupRegistrationFormBegin = (data) => ({
-  type: BACKUP_REGISTRATION_DATA.BEGIN,
-  payload: { ...data },
-});
-
-// Validate fields from the backend
-export const fetchRealtimeValidations = (formPayload) => ({
-  type: REGISTER_FORM_VALIDATIONS.BASE,
-  payload: { formPayload },
-});
-
-export const fetchRealtimeValidationsBegin = () => ({
-  type: REGISTER_FORM_VALIDATIONS.BEGIN,
-});
-
-export const fetchRealtimeValidationsSuccess = (validations) => ({
-  type: REGISTER_FORM_VALIDATIONS.SUCCESS,
-  payload: { validations },
-});
-
-export const fetchRealtimeValidationsFailure = () => ({
-  type: REGISTER_FORM_VALIDATIONS.FAILURE,
-});
-
-// Set email field frontend validations
-export const setEmailSuggestionInStore = (emailSuggestion) => ({
-  type: REGISTER_SET_EMAIL_SUGGESTIONS,
-  payload: { emailSuggestion },
-});
-
-// Register
-export const registerNewUser = registrationInfo => ({
-  type: REGISTER_NEW_USER.BASE,
-  payload: { registrationInfo },
-});
-
-export const registerNewUserBegin = () => ({
-  type: REGISTER_NEW_USER.BEGIN,
-});
-
-export const registerNewUserSuccess = (authenticatedUser, redirectUrl, success) => ({
-  type: REGISTER_NEW_USER.SUCCESS,
-  payload: { authenticatedUser, redirectUrl, success },
-
-});
-
-export const registerNewUserFailure = (error) => ({
-  type: REGISTER_NEW_USER.FAILURE,
-  payload: { ...error },
-});
-
-export const clearUsernameSuggestions = () => ({
-  type: REGISTER_CLEAR_USERNAME_SUGGESTIONS,
-});
-
-export const clearRegistrationBackendError = (fieldName) => ({
-  type: REGISTRATION_CLEAR_BACKEND_ERROR,
-  payload: fieldName,
-});
-
-export const setCountryFromThirdPartyAuthContext = (countryCode) => ({
-  type: REGISTER_SET_COUNTRY_CODE,
-  payload: { countryCode },
-});
-
-export const setUserPipelineDataLoaded = (value) => ({
-  type: REGISTER_SET_USER_PIPELINE_DATA_LOADED,
-  payload: { value },
-});

package/src/register/data/reducers.js

@@ -1,140 +0,0 @@
-import {
-  BACKUP_REGISTRATION_DATA,
-  REGISTER_CLEAR_USERNAME_SUGGESTIONS,
-  REGISTER_FORM_VALIDATIONS,
-  REGISTER_NEW_USER,
-  REGISTER_SET_COUNTRY_CODE,
-  REGISTER_SET_EMAIL_SUGGESTIONS,
-  REGISTER_SET_USER_PIPELINE_DATA_LOADED,
-  REGISTRATION_CLEAR_BACKEND_ERROR,
-} from './actions';
-import {
-  DEFAULT_STATE,
-  PENDING_STATE,
-} from '../../data/constants';
-
-export const storeName = 'register';
-
-export const defaultState = {
-  backendCountryCode: '',
-  registrationError: {},
-  registrationResult: {},
-  registrationFormData: {
-    configurableFormFields: {
-      marketingEmailsOptIn: true,
-    },
-    formFields: {
-      name: '', email: '', username: '', password: '',
-    },
-    emailSuggestion: {
-      suggestion: '', type: '',
-    },
-    errors: {
-      name: '', email: '', username: '', password: '',
-    },
-  },
-  validations: null,
-  submitState: DEFAULT_STATE,
-  userPipelineDataLoaded: false,
-  usernameSuggestions: [],
-  validationApiRateLimited: false,
-  shouldBackupState: false,
-};
-
-const reducer = (state = defaultState, action = {}) => {
-  switch (action.type) {
-    case BACKUP_REGISTRATION_DATA.BASE:
-      return {
-        ...state,
-        shouldBackupState: true,
-      };
-    case BACKUP_REGISTRATION_DATA.BEGIN:
-      return {
-        ...state,
-        usernameSuggestions: state.usernameSuggestions,
-        registrationFormData: { ...action.payload },
-        userPipelineDataLoaded: state.userPipelineDataLoaded,
-      };
-    case REGISTER_NEW_USER.BEGIN:
-      return {
-        ...state,
-        submitState: PENDING_STATE,
-        registrationError: {},
-      };
-    case REGISTER_NEW_USER.SUCCESS: {
-      return {
-        ...state,
-        registrationResult: action.payload,
-      };
-    }
-    case REGISTER_NEW_USER.FAILURE: {
-      const { usernameSuggestions } = action.payload;
-      return {
-        ...state,
-        registrationError: { ...action.payload },
-        submitState: DEFAULT_STATE,
-        validations: null,
-        usernameSuggestions: usernameSuggestions || state.usernameSuggestions,
-      };
-    }
-    case REGISTRATION_CLEAR_BACKEND_ERROR: {
-      const registrationErrorTemp = state.registrationError;
-      delete registrationErrorTemp[action.payload];
-      return {
-        ...state,
-        registrationError: { ...registrationErrorTemp },
-      };
-    }
-    case REGISTER_FORM_VALIDATIONS.SUCCESS: {
-      const { usernameSuggestions, ...validationWithoutUsernameSuggestions } = action.payload.validations;
-      return {
-        ...state,
-        validations: validationWithoutUsernameSuggestions,
-        usernameSuggestions: usernameSuggestions || state.usernameSuggestions,
-      };
-    }
-    case REGISTER_FORM_VALIDATIONS.FAILURE:
-      return {
-        ...state,
-        validationApiRateLimited: true,
-        validations: null,
-      };
-    case REGISTER_CLEAR_USERNAME_SUGGESTIONS:
-      return {
-        ...state,
-        usernameSuggestions: [],
-      };
-    case REGISTER_SET_COUNTRY_CODE: {
-      const { countryCode } = action.payload;
-      if (!state.registrationFormData.configurableFormFields.country) {
-        return {
-          ...state,
-          backendCountryCode: countryCode,
-        };
-      }
-      return state;
-    }
-    case REGISTER_SET_USER_PIPELINE_DATA_LOADED: {
-      const { value } = action.payload;
-      return {
-        ...state,
-        userPipelineDataLoaded: value,
-      };
-    }
-    case REGISTER_SET_EMAIL_SUGGESTIONS:
-      return {
-        ...state,
-        registrationFormData: {
-          ...state.registrationFormData,
-          emailSuggestion: action.payload.emailSuggestion,
-        },
-      };
-    default:
-      return {
-        ...state,
-        shouldBackupState: false,
-      };
-  }
-};
-
-export default reducer;