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

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;

package/src/field-renderer/FieldRenderer.jsx

@@ -1,156 +0,0 @@
-import { Form, Icon } from '@openedx/paragon';
-import { ExpandMore } from '@openedx/paragon/icons';
-import PropTypes from 'prop-types';
-
-const FormFieldRenderer = (props) => {
-  let formField = null;
-  const {
-    className, errorMessage, fieldData, onChangeHandler, isRequired, value,
-  } = props;
-
-  const handleFocus = (e) => {
-    if (props.handleFocus) { props.handleFocus(e); }
-  };
-
-  const handleOnBlur = (e) => {
-    if (props.handleBlur) { props.handleBlur(e); }
-  };
-
-  switch (fieldData.type) {
-    case 'select': {
-      if (!fieldData.options) {
-        return null;
-      }
-      formField = (
-        <Form.Group controlId={fieldData.name} isInvalid={!!(isRequired && errorMessage)}>
-          <Form.Control
-            className={className}
-            as="select"
-            name={fieldData.name}
-            value={value}
-            aria-invalid={isRequired && Boolean(errorMessage)}
-            onChange={(e) => onChangeHandler(e)}
-            trailingElement={<Icon src={ExpandMore} />}
-            floatingLabel={fieldData.label}
-            onBlur={handleOnBlur}
-            onFocus={handleFocus}
-          >
-            <option key="default" value="">{fieldData.label}</option>
-            {fieldData.options.map(option => (
-              <option className="data-hj-suppress" key={option[0]} value={option[0]}>{option[1]}</option>
-            ))}
-          </Form.Control>
-          {isRequired && errorMessage && (
-            <Form.Control.Feedback id={`${fieldData.name}-error`} type="invalid" className="form-text-size" hasIcon={false}>
-              {errorMessage}
-            </Form.Control.Feedback>
-          )}
-        </Form.Group>
-      );
-      break;
-    }
-    case 'textarea': {
-      formField = (
-        <Form.Group controlId={fieldData.name} isInvalid={!!(isRequired && errorMessage)}>
-          <Form.Control
-            className={className}
-            as="textarea"
-            name={fieldData.name}
-            value={value}
-            aria-invalid={isRequired && Boolean(errorMessage)}
-            onChange={(e) => onChangeHandler(e)}
-            floatingLabel={fieldData.label}
-            onBlur={handleOnBlur}
-            onFocus={handleFocus}
-          />
-          {isRequired && errorMessage && (
-            <Form.Control.Feedback id={`${fieldData.name}-error`} type="invalid" className="form-text-size" hasIcon={false}>
-              {errorMessage}
-            </Form.Control.Feedback>
-          )}
-        </Form.Group>
-      );
-      break;
-    }
-    case 'text': {
-      formField = (
-        <Form.Group controlId={fieldData.name} isInvalid={!!(isRequired && errorMessage)}>
-          <Form.Control
-            className={className}
-            name={fieldData.name}
-            value={value}
-            aria-invalid={isRequired && Boolean(errorMessage)}
-            onChange={(e) => onChangeHandler(e)}
-            floatingLabel={fieldData.label}
-            onBlur={handleOnBlur}
-            onFocus={handleFocus}
-          />
-          {isRequired && errorMessage && (
-            <Form.Control.Feedback id={`${fieldData.name}-error`} type="invalid" className="form-text-size" hasIcon={false}>
-              {errorMessage}
-            </Form.Control.Feedback>
-          )}
-        </Form.Group>
-      );
-      break;
-    }
-    case 'checkbox': {
-      formField = (
-        <Form.Group isInvalid={!!(isRequired && errorMessage)}>
-          <Form.Checkbox
-            className={className}
-            id={fieldData.name}
-            checked={!!value}
-            name={fieldData.name}
-            value={value}
-            aria-invalid={isRequired && Boolean(errorMessage)}
-            onChange={(e) => onChangeHandler(e)}
-            onBlur={handleOnBlur}
-            onFocus={handleFocus}
-          >
-            {fieldData.label}
-          </Form.Checkbox>
-          {isRequired && errorMessage && (
-            <Form.Control.Feedback id={`${fieldData.name}-error`} type="invalid" className="form-text-size" hasIcon={false}>
-              {errorMessage}
-            </Form.Control.Feedback>
-          )}
-        </Form.Group>
-      );
-      break;
-    }
-    default:
-      break;
-  }
-
-  return formField;
-};
-FormFieldRenderer.defaultProps = {
-  className: '',
-  value: '',
-  handleBlur: null,
-  handleFocus: null,
-  errorMessage: '',
-  isRequired: false,
-};
-
-FormFieldRenderer.propTypes = {
-  className: PropTypes.string,
-  fieldData: PropTypes.shape({
-    type: PropTypes.string,
-    label: PropTypes.string,
-    name: PropTypes.string,
-    options: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string)),
-  }).isRequired,
-  onChangeHandler: PropTypes.func.isRequired,
-  handleBlur: PropTypes.func,
-  handleFocus: PropTypes.func,
-  errorMessage: PropTypes.string,
-  isRequired: PropTypes.bool,
-  value: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.bool,
-  ]),
-};
-
-export default FormFieldRenderer;

package/src/field-renderer/tests/FieldRenderer.test.jsx

@@ -1,201 +0,0 @@
-import { getSiteConfig } from '@openedx/frontend-base';
-import { fireEvent, render } from '@testing-library/react';
-
-import FieldRenderer from '../FieldRenderer';
-
-describe('FieldRendererTests', () => {
-  let value = '';
-
-  const changeHandler = (e) => {
-    if (e.target.type === 'checkbox') {
-      value = e.target.checked;
-    } else {
-      value = e.target.value;
-    }
-  };
-
-  beforeEach(() => {
-    value = '';
-  });
-
-  it('should render select field type', () => {
-    const fieldData = {
-      type: 'select',
-      label: 'Year of Birth',
-      name: 'yob-field',
-      options: [['1997', '1997'], ['1998', '1998']],
-    };
-
-    const { container } = render(<FieldRenderer value={value} fieldData={fieldData} onChangeHandler={changeHandler} />);
-    const input = container.querySelector('select#yob-field');
-    const label = container.querySelector('label');
-    fireEvent.change(input, { target: { value: 1997 } });
-
-    expect(input.type).toEqual('select-one');
-    expect(label.textContent).toContain(fieldData.label);
-    expect(value).toEqual('1997');
-  });
-
-  it('should return null if no options are provided for select field', () => {
-    const fieldData = {
-      type: 'select',
-      label: 'Year of Birth',
-      name: 'yob-field',
-    };
-
-    const { container } = render(<FieldRenderer fieldData={fieldData} onChangeHandler={() => { }} />);
-    expect(container.innerHTML).toEqual('');
-  });
-
-  it('should render textarea field', () => {
-    const fieldData = {
-      type: 'textarea',
-      label: 'Why do you want to join this platform?',
-      name: 'goals-field',
-    };
-
-    const { container } = render(<FieldRenderer value={value} fieldData={fieldData} onChangeHandler={changeHandler} />);
-    const input = container.querySelector('#goals-field');
-    const label = container.querySelector('label');
-    fireEvent.change(input, { target: { value: 'These are my goals.' } });
-
-    expect(input.type).toEqual(fieldData.type);
-    expect(label.textContent).toContain('Why do you want to join this platform?');
-    expect(value).toEqual('These are my goals.');
-  });
-
-  it('should render an input field', () => {
-    const fieldData = {
-      type: 'text',
-      label: 'Company',
-      name: 'company-field',
-    };
-
-    const { container } = render(<FieldRenderer value={value} fieldData={fieldData} onChangeHandler={changeHandler} />);
-    const input = container.querySelector('input#company-field');
-    const label = container.querySelector('label');
-    fireEvent.change(input, { target: { value: 'ABC' } });
-
-    expect(input.type).toEqual(fieldData.type);
-    expect(label.textContent).toContain(fieldData.label);
-    expect(value).toEqual('ABC');
-  });
-
-  it('should render checkbox field', () => {
-    const fieldData = {
-      type: 'checkbox',
-      label: `I agree that ${getSiteConfig().siteName} may send me marketing messages.`,
-      name: 'marketing-emails-opt-in-field',
-    };
-
-    const { container } = render(<FieldRenderer value={value} fieldData={fieldData} onChangeHandler={changeHandler} />);
-    const input = container.querySelector('input#marketing-emails-opt-in-field');
-    const label = container.querySelector('label');
-    fireEvent.click(input);
-
-    expect(input.type).toEqual(fieldData.type);
-    expect(label.textContent).toContain(fieldData.label);
-    expect(value).toEqual(true);
-  });
-
-  it('should return null if field type is unknown', () => {
-    const fieldData = {
-      type: 'unknown',
-    };
-
-    const { container } = render(<FieldRenderer fieldData={fieldData} onChangeHandler={() => { }} />);
-    expect(container.innerHTML).toContain('');
-  });
-
-  it('should run onBlur and onFocus functions for a field if given', () => {
-    const fieldData = { type: 'text', label: 'Test', name: 'test-field' };
-    let functionValue = '';
-
-    const onBlur = (e) => {
-      functionValue = `${e.target.name} blurred`;
-    };
-
-    const onFocus = (e) => {
-      functionValue = `${e.target.name} focussed`;
-    };
-
-    const { container } = render(
-      <FieldRenderer
-        handleFocus={onFocus}
-        handleBlur={onBlur}
-        value={value}
-        fieldData={fieldData}
-        onChangeHandler={changeHandler}
-      />,
-    );
-    const input = container.querySelector('#test-field');
-
-    fireEvent.focus(input);
-    expect(functionValue).toEqual('test-field focussed');
-
-    fireEvent.blur(input);
-    expect(functionValue).toEqual('test-field blurred');
-  });
-
-  it('should render error message for required text fields', () => {
-    const fieldData = { type: 'text', label: 'First Name', name: 'first-name-field' };
-
-    const { container } = render(
-      <FieldRenderer
-        isRequired
-        fieldData={fieldData}
-        onChangeHandler={changeHandler}
-        errorMessage="Enter your first name"
-      />,
-    );
-
-    expect(container.querySelector(`#${fieldData.name}-error`).textContent).toEqual('Enter your first name');
-  });
-
-  it('should render error message for required select fields', () => {
-    const fieldData = {
-      type: 'select', label: 'Preference', name: 'preference-field', options: [['a', 'Opt 1'], ['b', 'Opt 2']],
-    };
-
-    const { container } = render(
-      <FieldRenderer
-        isRequired
-        fieldData={fieldData}
-        onChangeHandler={changeHandler}
-        errorMessage="Select your preference"
-      />,
-    );
-
-    expect(container.querySelector(`#${fieldData.name}-error`).textContent).toEqual('Select your preference');
-  });
-
-  it('should render error message for required textarea fields', () => {
-    const fieldData = { type: 'textarea', label: 'Goals', name: 'goals-field' };
-
-    const { container } = render(
-      <FieldRenderer
-        isRequired
-        fieldData={fieldData}
-        onChangeHandler={changeHandler}
-        errorMessage="Tell us your goals"
-      />,
-    );
-
-    expect(container.querySelector(`#${fieldData.name}-error`).textContent).toEqual('Tell us your goals');
-  });
-
-  it('should render error message for required checkbox fields', () => {
-    const fieldData = { type: 'checkbox', label: 'Honor Code', name: 'honor-code-field' };
-
-    const { container } = render(
-      <FieldRenderer
-        isRequired
-        fieldData={fieldData}
-        onChangeHandler={changeHandler}
-        errorMessage="You must agree to our Honor Code"
-      />,
-    );
-
-    expect(container.querySelector(`#${fieldData.name}-error`).textContent).toEqual('You must agree to our Honor Code');
-  });
-});