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

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/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;

package/src/register/data/sagas.js

@@ -1,58 +0,0 @@
-import { camelCaseObject, logError, logInfo } from '@openedx/frontend-base';
-import { call, put, takeEvery } from 'redux-saga/effects';
-
-import {
-  fetchRealtimeValidationsBegin,
-  fetchRealtimeValidationsFailure,
-  fetchRealtimeValidationsSuccess,
-  REGISTER_FORM_VALIDATIONS,
-  REGISTER_NEW_USER,
-  registerNewUserBegin,
-  registerNewUserFailure,
-  registerNewUserSuccess,
-} from './actions';
-import { INTERNAL_SERVER_ERROR } from './constants';
-import { getFieldsValidations, registerRequest } from './service';
-
-export function* handleNewUserRegistration(action) {
-  try {
-    yield put(registerNewUserBegin());
-
-    const { authenticatedUser, redirectUrl, success } = yield call(registerRequest, action.payload.registrationInfo);
-
-    yield put(registerNewUserSuccess(
-      camelCaseObject(authenticatedUser),
-      redirectUrl,
-      success,
-    ));
-  } catch (e) {
-    const statusCodes = [400, 403, 409];
-    if (e.response && statusCodes.includes(e.response.status)) {
-      yield put(registerNewUserFailure(camelCaseObject(e.response.data)));
-      logInfo(e);
-    } else {
-      yield put(registerNewUserFailure({ errorCode: INTERNAL_SERVER_ERROR }));
-      logError(e);
-    }
-  }
-}
-
-export function* fetchRealtimeValidations(action) {
-  try {
-    yield put(fetchRealtimeValidationsBegin());
-    const { fieldValidations } = yield call(getFieldsValidations, action.payload.formPayload);
-
-    yield put(fetchRealtimeValidationsSuccess(camelCaseObject(fieldValidations)));
-  } catch (e) {
-    if (e.response?.status === 403) {
-      yield put(fetchRealtimeValidationsFailure());
-      logInfo(e);
-    } else {
-      logError(e);
-    }
-  }
-}
-export default function* saga() {
-  yield takeEvery(REGISTER_NEW_USER.BASE, handleNewUserRegistration);
-  yield takeEvery(REGISTER_FORM_VALIDATIONS.BASE, fetchRealtimeValidations);
-}

package/src/register/data/selectors.js

@@ -1,34 +0,0 @@
-import { createSelector } from 'reselect';
-
-/**
- * Selector for backend validations which processes the api output and generates a
- * key value dict for field errors.
- * @returns {{username: string}|{name: string}|*|{}|null}
- */
-const getRegistrationError = state => state.register.registrationError;
-const getValidations = state => state.register.validations;
-
-const getBackendValidations = createSelector(
-  [getRegistrationError, getValidations],
-  (registrationError, validations) => {
-    if (validations) {
-      return validations.validationDecisions;
-    }
-
-    if (Object.keys(registrationError).length > 0) {
-      const fields = Object.keys(registrationError).filter(
-        (fieldName) => !(fieldName in ['errorCode', 'usernameSuggestions']),
-      );
-
-      const validationDecisions = {};
-      fields.forEach(field => {
-        validationDecisions[field] = registrationError[field][0].userMessage ?? '';
-      });
-      return validationDecisions;
-    }
-
-    return null;
-  }
-);
-
-export default getBackendValidations;