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

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

@@ -1,75 +0,0 @@
-import { IntlProvider } from '@openedx/frontend-base';
-import renderer from 'react-test-renderer';
-
-import registerIcons from '../RegisterFaIcons';
-import SocialAuthProviders from '../SocialAuthProviders';
-
-registerIcons();
-
-describe('SocialAuthProviders', () => {
-  let props = {};
-
-  const appleProvider = {
-    id: 'oa2-apple-id',
-    name: 'Apple',
-    iconClass: null,
-    iconImage: 'https://edx.devstack.lms/logo.png',
-    loginUrl: '/auth/login/apple-id/?auth_entry=login&next=/dashboard',
-  };
-
-  const facebookProvider = {
-    id: 'oa2-facebook',
-    name: 'Facebook',
-    iconClass: null,
-    iconImage: 'https://edx.devstack.lms/facebook-logo.png',
-    loginUrl: '/auth/login/facebook/?auth_entry=login&next=/dashboard',
-  };
-
-  it('should match social auth provider with iconImage snapshot', () => {
-    props = { socialAuthProviders: [appleProvider, facebookProvider] };
-
-    const tree = renderer.create(
-      <IntlProvider locale="en">
-        <SocialAuthProviders {...props} />
-      </IntlProvider>,
-    ).toJSON();
-
-    expect(tree).toMatchSnapshot();
-  });
-
-  it('should match social auth provider with iconClass snapshot', () => {
-    props = {
-      socialAuthProviders: [{
-        ...appleProvider,
-        iconClass: 'google',
-        iconImage: null,
-      }],
-    };
-
-    const tree = renderer.create(
-      <IntlProvider locale="en">
-        <SocialAuthProviders {...props} />
-      </IntlProvider>,
-    ).toJSON();
-
-    expect(tree).toMatchSnapshot();
-  });
-
-  it('should match social auth provider with default icon snapshot', () => {
-    props = {
-      socialAuthProviders: [{
-        ...appleProvider,
-        iconClass: 'default',
-        iconImage: null,
-      }],
-    };
-
-    const tree = renderer.create(
-      <IntlProvider locale="en">
-        <SocialAuthProviders {...props} />
-      </IntlProvider>,
-    ).toJSON();
-
-    expect(tree).toMatchSnapshot();
-  });
-});

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

@@ -1,39 +0,0 @@
-import { IntlProvider } from '@openedx/frontend-base';
-import renderer from 'react-test-renderer';
-
-import { REGISTER_PAGE } from '../../data/constants';
-import ThirdPartyAuthAlert from '../ThirdPartyAuthAlert';
-
-describe('ThirdPartyAuthAlert', () => {
-  let props = {};
-
-  beforeEach(() => {
-    props = {
-      currentProvider: 'Google',
-      platformName: 'edX',
-    };
-  });
-
-  it('should match login page third party auth alert message snapshot', () => {
-    const tree = renderer.create(
-      <IntlProvider locale="en">
-        <ThirdPartyAuthAlert {...props} />
-      </IntlProvider>,
-    ).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-
-  it('should match register page third party auth alert message snapshot', () => {
-    props = {
-      ...props,
-      referrer: REGISTER_PAGE,
-    };
-
-    const tree = renderer.create(
-      <IntlProvider locale="en">
-        <ThirdPartyAuthAlert {...props} />
-      </IntlProvider>,
-    ).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-});

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

@@ -1,73 +0,0 @@
-/* eslint-disable import/no-import-module-exports */
-/* eslint-disable react/function-component-definition */
-
-import { fetchAuthenticatedUser, getAuthenticatedUser } 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 { UnAuthOnlyRoute } from '..';
-import { REGISTER_PAGE } from '../../data/constants';
-
-jest.mock('@openedx/frontend-base', () => ({
-  ...jest.requireActual('@openedx/frontend-base'),
-  getAuthenticatedUser: jest.fn(),
-  fetchAuthenticatedUser: jest.fn(),
-}));
-
-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_PAGE} element={<UnAuthOnlyRoute><span>Register Page</span></UnAuthOnlyRoute>} />
-      </Routes>
-    </div>
-  </Router>
-);
-
-describe('UnAuthOnlyRoute', () => {
-  const routerWrapper = () => (
-    <MemoryRouter initialEntries={[REGISTER_PAGE]}>
-      <TestApp />
-    </MemoryRouter>
-  );
-
-  afterEach(() => {
-    jest.clearAllMocks();
-  });
-
-  it('should have called with forceRefresh true', async () => {
-    const user = {
-      username: 'gonzo',
-      other: 'data',
-    };
-
-    getAuthenticatedUser.mockReturnValue(user);
-    fetchAuthenticatedUser.mockReturnValueOnce(Promise.resolve(user));
-
-    await act(async () => {
-      await render(routerWrapper());
-    });
-
-    expect(fetchAuthenticatedUser).toBeCalledWith({ forceRefresh: true });
-  });
-
-  it('should have called with forceRefresh false', async () => {
-    getAuthenticatedUser.mockReturnValue(null);
-    fetchAuthenticatedUser.mockReturnValueOnce(Promise.resolve(null));
-
-    await act(async () => {
-      await render(routerWrapper());
-    });
-
-    expect(fetchAuthenticatedUser).toBeCalledWith({ forceRefresh: false });
-  });
-});

package/src/common-components/tests/__snapshots__/SocialAuthProviders.test.jsx.snap

@@ -1,156 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`SocialAuthProviders should match social auth provider with default icon snapshot 1`] = `
-<button
-  className="btn-social btn-oa2-apple-id mr-3"
-  data-provider-url="/auth/login/apple-id/?auth_entry=login&next=/dashboard"
-  id="oa2-apple-id"
-  onClick={[Function]}
-  type="button"
->
-  <div
-    aria-hidden="true"
-    className="btn-tpa__font-container"
-  >
-    <span
-      className="pgn__icon h-75"
-    >
-      <svg
-        aria-hidden={true}
-        fill="none"
-        focusable={false}
-        height={24}
-        role="img"
-        viewBox="0 0 24 24"
-        width={24}
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M11 7 9.6 8.4l2.6 2.6H2v2h10.2l-2.6 2.6L11 17l5-5-5-5zm9 12h-8v2h10V3H12v2h8v14z"
-          fill="currentColor"
-        />
-      </svg>
-    </span>
-  </div>
-  <span
-    aria-hidden="true"
-    className="notranslate mr-auto pl-2"
-    id="provider-name"
-  >
-    Apple
-  </span>
-  <span
-    className="sr-only"
-  >
-    Sign in with Apple
-  </span>
-</button>
-`;
-
-exports[`SocialAuthProviders should match social auth provider with iconClass snapshot 1`] = `
-<button
-  className="btn-social btn-oa2-apple-id mr-3"
-  data-provider-url="/auth/login/apple-id/?auth_entry=login&next=/dashboard"
-  id="oa2-apple-id"
-  onClick={[Function]}
-  type="button"
->
-  <div
-    aria-hidden="true"
-    className="btn-tpa__font-container"
-  >
-    <svg
-      aria-hidden="true"
-      className="svg-inline--fa fa-google "
-      data-icon="google"
-      data-prefix="fab"
-      focusable="false"
-      role="img"
-      style={{}}
-      viewBox="0 0 488 512"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z"
-        fill="currentColor"
-        style={{}}
-      />
-    </svg>
-  </div>
-  <span
-    aria-hidden="true"
-    className="notranslate mr-auto pl-2"
-    id="provider-name"
-  >
-    Apple
-  </span>
-  <span
-    className="sr-only"
-  >
-    Sign in with Apple
-  </span>
-</button>
-`;
-
-exports[`SocialAuthProviders should match social auth provider with iconImage snapshot 1`] = `
-[
-  <button
-    className="btn-social btn-oa2-apple-id mr-3"
-    data-provider-url="/auth/login/apple-id/?auth_entry=login&next=/dashboard"
-    id="oa2-apple-id"
-    onClick={[Function]}
-    type="button"
-  >
-    <div
-      aria-hidden="true"
-    >
-      <img
-        alt="icon Apple"
-        className="btn-tpa__image-icon"
-        src="https://edx.devstack.lms/logo.png"
-      />
-    </div>
-    <span
-      aria-hidden="true"
-      className="notranslate mr-auto pl-2"
-      id="provider-name"
-    >
-      Apple
-    </span>
-    <span
-      className="sr-only"
-    >
-      Sign in with Apple
-    </span>
-  </button>,
-  <button
-    className="btn-social btn-oa2-facebook "
-    data-provider-url="/auth/login/facebook/?auth_entry=login&next=/dashboard"
-    id="oa2-facebook"
-    onClick={[Function]}
-    type="button"
-  >
-    <div
-      aria-hidden="true"
-    >
-      <img
-        alt="icon Facebook"
-        className="btn-tpa__image-icon"
-        src="https://edx.devstack.lms/facebook-logo.png"
-      />
-    </div>
-    <span
-      aria-hidden="true"
-      className="notranslate mr-auto pl-2"
-      id="provider-name"
-    >
-      Facebook
-    </span>
-    <span
-      className="sr-only"
-    >
-      Sign in with Facebook
-    </span>
-  </button>,
-]
-`;

package/src/common-components/tests/__snapshots__/ThirdPartyAuthAlert.test.jsx.snap

@@ -1,53 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ThirdPartyAuthAlert should match login page third party auth alert message snapshot 1`] = `
-<div
-  className="fade alert-content alert-warning mt-n2 mb-5 alert show"
-  id="tpa-alert"
-  role="alert"
->
-  <div
-    className="pgn__alert-message-wrapper"
-  >
-    <div
-      className="alert-message-content"
-    >
-      <p>
-        You have successfully signed into Google, but your Google account does not have a linked Test Site account. To link your accounts, sign in now using your Test Site password.
-      </p>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`ThirdPartyAuthAlert should match register page third party auth alert message snapshot 1`] = `
-[
-  <div
-    className="fade alert-content alert-success mt-n2 mb-5 alert show"
-    id="tpa-alert"
-    role="alert"
-  >
-    <div
-      className="pgn__alert-message-wrapper"
-    >
-      <div
-        className="alert-message-content"
-      >
-        <div
-          className="alert-heading h4"
-        >
-          Almost done!
-        </div>
-        <p>
-          You've successfully signed into Google! We just need a little more information before you start learning with Test Site.
-        </p>
-      </div>
-    </div>
-  </div>,
-  <h4
-    className="mt-4 mb-4"
-  >
-    Finish creating your account
-  </h4>,
-]
-`;

package/src/data/oneTrust.js

@@ -1,3 +0,0 @@
-const isOneTrustFunctionalCookieEnabled = () => !!window?.OnetrustActiveGroups?.includes('C0003');
-
-export default isOneTrustFunctionalCookieEnabled;

package/src/data/reducers.js

@@ -1,36 +0,0 @@
-import { combineReducers } from 'redux';
-
-import {
-  reducer as commonComponentsReducer,
-  storeName as commonComponentsStoreName,
-} from '../common-components';
-import {
-  reducer as forgotPasswordReducer,
-  storeName as forgotPasswordStoreName,
-} from '../forgot-password';
-import {
-  reducer as loginReducer,
-  storeName as loginStoreName,
-} from '../login';
-import {
-  reducer as authnProgressiveProfilingReducers,
-  storeName as authnProgressiveProfilingStoreName,
-} from '../progressive-profiling';
-import {
-  reducer as registerReducer,
-  storeName as registerStoreName,
-} from '../register';
-import {
-  reducer as resetPasswordReducer,
-  storeName as resetPasswordStoreName,
-} from '../reset-password';
-
-const createRootReducer = () => combineReducers({
-  [loginStoreName]: loginReducer,
-  [registerStoreName]: registerReducer,
-  [commonComponentsStoreName]: commonComponentsReducer,
-  [forgotPasswordStoreName]: forgotPasswordReducer,
-  [resetPasswordStoreName]: resetPasswordReducer,
-  [authnProgressiveProfilingStoreName]: authnProgressiveProfilingReducers,
-});
-export default createRootReducer;

package/src/data/tests/cookies.test.js

@@ -1,42 +0,0 @@
-import Cookies from 'universal-cookie';
-
-import { setCookie } from '../utils';
-
-// Mock Cookies class
-jest.mock('universal-cookie');
-
-describe('setCookie function', () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  it('should set a cookie with default options', () => {
-    setCookie('testCookie', 'testValue', 'example.com');
-
-    expect(Cookies).toHaveBeenCalled();
-    expect(Cookies).toHaveBeenCalledWith();
-    expect(Cookies.prototype.set).toHaveBeenCalledWith('testCookie', 'testValue', {
-      domain: 'example.com',
-      path: '/',
-    });
-  });
-
-  it('should set a cookie with specified expiry', () => {
-    const expiry = new Date('2023-12-31');
-    setCookie('testCookie', 'testValue', 'example.com', expiry);
-
-    expect(Cookies).toHaveBeenCalled();
-    expect(Cookies).toHaveBeenCalledWith();
-    expect(Cookies.prototype.set).toHaveBeenCalledWith('testCookie', 'testValue', {
-      domain: 'example.com',
-      path: '/',
-      expires: expiry,
-    });
-  });
-
-  it('should not set a cookie if cookieName is undefined', () => {
-    setCookie(undefined, 'testValue', 'example.com');
-
-    expect(Cookies).not.toHaveBeenCalled();
-  });
-});

package/src/data/tests/dataUtils.test.js

@@ -1,19 +0,0 @@
-import { LOGIN_PAGE } from '../constants';
-import { updatePathWithQueryParams } from '../utils/dataUtils';
-
-describe('updatePathWithQueryParams', () => {
-  it('should append query params into the path', () => {
-    const params = '?course_id=testCourseId';
-    const expectedPath = `${LOGIN_PAGE}${params}`;
-
-    Object.defineProperty(window, 'location', {
-      value: {
-        href: 'http://localhost/',
-        search: params,
-      },
-    });
-    const updatedPath = updatePathWithQueryParams(LOGIN_PAGE);
-
-    expect(updatedPath).toEqual(expectedPath);
-  });
-});

package/src/data/tests/reduxUtils.test.js

@@ -1,14 +0,0 @@
-import AsyncActionType from '../utils/reduxUtils';
-
-describe('AsyncActionType', () => {
-  it('should return well formatted action strings', () => {
-    const actionType = new AsyncActionType('HOUSE_CATS', 'START_THE_RACE');
-
-    expect(actionType.BASE).toBe('HOUSE_CATS__START_THE_RACE');
-    expect(actionType.BEGIN).toBe('HOUSE_CATS__START_THE_RACE__BEGIN');
-    expect(actionType.SUCCESS).toBe('HOUSE_CATS__START_THE_RACE__SUCCESS');
-    expect(actionType.FAILURE).toBe('HOUSE_CATS__START_THE_RACE__FAILURE');
-    expect(actionType.RESET).toBe('HOUSE_CATS__START_THE_RACE__RESET');
-    expect(actionType.FORBIDDEN).toBe('HOUSE_CATS__START_THE_RACE__FORBIDDEN');
-  });
-});

package/src/data/utils/cookies.js

@@ -1,12 +0,0 @@
-import Cookies from 'universal-cookie';
-
-export default function setCookie(cookieName, cookieValue, cookieDomain, cookieExpiry) {
-  if (cookieName) { // To avoid setting getting exception when setting cookie with undefined names.
-    const cookies = new Cookies();
-    const options = { domain: cookieDomain, path: '/' };
-    if (cookieExpiry) {
-      options.expires = cookieExpiry;
-    }
-    cookies.set(cookieName, cookieValue, options);
-  }
-}

package/src/data/utils/dataUtils.js

@@ -1,81 +0,0 @@
-// Utility functions
-import * as QueryString from 'query-string';
-
-import { AUTH_PARAMS } from '../constants';
-
-export const getTpaProvider = (tpaHintProvider, primaryProviders, secondaryProviders) => {
-  let tpaProvider = null;
-  let skipHintedLogin = false;
-  [...primaryProviders, ...secondaryProviders].forEach((provider) => {
-    if (provider.id === tpaHintProvider) {
-      tpaProvider = provider;
-      if (provider.skipHintedLogin) {
-        skipHintedLogin = true;
-      }
-    }
-  });
-  return { provider: tpaProvider, skipHintedLogin };
-};
-
-export const getTpaHint = () => {
-  const params = QueryString.parse(window.location.search);
-  let tpaHint = null;
-  tpaHint = params.tpa_hint;
-  if (!tpaHint) {
-    const { next } = params;
-    if (next) {
-      const index = next.indexOf('tpa_hint=');
-      if (index !== -1) {
-        tpaHint = next.substring(index + 'tpa_hint='.length, next.length);
-      }
-    }
-  }
-  return tpaHint;
-};
-
-export const updatePathWithQueryParams = (path) => {
-  let queryParams = window.location.search;
-
-  if (!queryParams) {
-    return path;
-  }
-
-  if (queryParams.includes('track=pwreset')) {
-    queryParams = queryParams.replace('?track=pwreset&', '?',).replace('?track=pwreset', '').replace('&track=pwreset', '').replace('?&', '?');
-  }
-
-  return `${path}${queryParams}`;
-};
-
-export const getAllPossibleQueryParams = (locationURl = null) => {
-  const urlParams = locationURl ? QueryString.parseUrl(locationURl).query : QueryString.parse(window.location.search);
-  const params = {};
-  Object.entries(urlParams).forEach(([key, value]) => {
-    if (AUTH_PARAMS.includes(key)) {
-      params[key] = value;
-    }
-  });
-
-  return params;
-};
-
-export const getActivationStatus = () => {
-  const params = QueryString.parse(window.location.search);
-
-  return params.account_activation_status;
-};
-
-export const isScrollBehaviorSupported = () => 'scrollBehavior' in document.documentElement.style;
-
-export const windowScrollTo = (options) => {
-  if (isScrollBehaviorSupported()) {
-    return window.scrollTo(options);
-  }
-
-  return window.scrollTo(options.top, options.left);
-};
-
-export const isHostAvailableInQueryParams = () => {
-  const queryParams = getAllPossibleQueryParams();
-  return 'host' in queryParams;
-};

package/src/data/utils/index.js

@@ -1,11 +0,0 @@
-export {
-  getTpaProvider,
-  getTpaHint,
-  getAllPossibleQueryParams,
-  getActivationStatus,
-  isHostAvailableInQueryParams,
-  updatePathWithQueryParams,
-  windowScrollTo,
-} from './dataUtils';
-export { default as AsyncActionType } from './reduxUtils';
-export { default as setCookie } from './cookies';

package/src/data/utils/reduxUtils.js

@@ -1,34 +0,0 @@
-/**
- * Helper class to save time when writing out action types for asynchronous methods.  Also helps
- * ensure that actions are namespaced.
- */
-export default class AsyncActionType {
-  constructor(topic, name) {
-    this.topic = topic;
-    this.name = name;
-  }
-
-  get BASE() {
-    return `${this.topic}__${this.name}`;
-  }
-
-  get BEGIN() {
-    return `${this.topic}__${this.name}__BEGIN`;
-  }
-
-  get SUCCESS() {
-    return `${this.topic}__${this.name}__SUCCESS`;
-  }
-
-  get FAILURE() {
-    return `${this.topic}__${this.name}__FAILURE`;
-  }
-
-  get RESET() {
-    return `${this.topic}__${this.name}__RESET`;
-  }
-
-  get FORBIDDEN() {
-    return `${this.topic}__${this.name}__FORBIDDEN`;
-  }
-}

package/src/data/utils/useMobileResponsive.js

@@ -1,24 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import { breakpoints } from '@openedx/paragon';
-
-/**
- * A react hook used to determine if the current window is mobile or not.
- * returns true if the window is of mobile size.
- * Code source: https://github.com/edx/prospectus/blob/master/src/utils/useMobileResponsive.js
- */
-const useMobileResponsive = (breakpoint) => {
-  const [isMobileWindow, setIsMobileWindow] = useState();
-  const checkForMobile = () => {
-    setIsMobileWindow(window.matchMedia(`(max-width: ${breakpoint || breakpoints.small.maxWidth}px)`).matches);
-  };
-  useEffect(() => {
-    checkForMobile();
-    window.addEventListener('resize', checkForMobile);
-    // return this function here to clean up the event listener
-    return () => window.removeEventListener('resize', checkForMobile);
-  });
-  return isMobileWindow;
-};
-
-export default useMobileResponsive;