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

package/src/data/configureStore.js

@@ -0,0 +1,33 @@
+import { getSiteConfig } from '@openedx/frontend-base';
+import { composeWithDevTools } from '@redux-devtools/extension';
+import { applyMiddleware, compose, createStore } from 'redux';
+import { createLogger } from 'redux-logger';
+import createSagaMiddleware from 'redux-saga';
+import thunkMiddleware from 'redux-thunk';
+
+import createRootReducer from './reducers';
+import rootSaga from './sagas';
+
+const sagaMiddleware = createSagaMiddleware();
+
+function composeMiddleware() {
+  if (getSiteConfig().environment === 'development') {
+    const loggerMiddleware = createLogger({
+      collapsed: true,
+    });
+    return composeWithDevTools(applyMiddleware(thunkMiddleware, sagaMiddleware, loggerMiddleware));
+  }
+
+  return compose(applyMiddleware(thunkMiddleware, sagaMiddleware));
+}
+
+export default function configureStore(initialState = {}) {
+  const store = createStore(
+    createRootReducer(),
+    initialState,
+    composeMiddleware(),
+  );
+  sagaMiddleware.run(rootSaga);
+
+  return store;
+}

package/src/data/constants.js

@@ -0,0 +1,38 @@
+// URL Paths
+export const LOGIN_PAGE = '/login';
+export const REGISTER_PAGE = '/register';
+export const REGISTER_EMBEDDED_PAGE = '/register-embedded';
+export const RESET_PAGE = '/reset';
+export const AUTHN_PROGRESSIVE_PROFILING = '/welcome';
+export const DEFAULT_REDIRECT_URL = '/dashboard';
+export const PASSWORD_RESET_CONFIRM = '/password_reset_confirm/:token/';
+export const PAGE_NOT_FOUND = '/notfound';
+export const ENTERPRISE_LOGIN_URL = '/enterprise/login';
+
+// Constants
+export const SUPPORTED_ICON_CLASSES = ['apple', 'facebook', 'google', 'microsoft'];
+
+// Error Codes
+export const FORM_SUBMISSION_ERROR = 'form-submission-error';
+export const INTERNAL_SERVER_ERROR = 'internal-server-error';
+export const API_RATELIMIT_ERROR = 'api-ratelimit-error';
+
+// Common States
+export const DEFAULT_STATE = 'default';
+export const PENDING_STATE = 'pending';
+export const COMPLETE_STATE = 'complete';
+export const FAILURE_STATE = 'failure';
+export const FORBIDDEN_STATE = 'forbidden';
+export const EMBEDDED = 'embedded';
+
+export const LETTER_REGEX = /[a-zA-Z]/;
+export const NUMBER_REGEX = /\d/;
+export const VALID_EMAIL_REGEX = '(^[-!#$%&\'*+/=?^_`{}|~0-9A-Z]+(\\.[-!#$%&\'*+/=?^_`{}|~0-9A-Z]+)*'
+  + '|^"([\\001-\\010\\013\\014\\016-\\037!#-\\[\\]-\\177]|\\\\[\\001-\\011\\013\\014\\016-\\177])*"'
+  + ')@((?:[A-Z0-9](?:[A-Z0-9-]{0,61}[A-Z0-9])?\\.)+)(?:[A-Z0-9-]{2,63})'
+  + '|\\[(25[0-5]|2[0-4]\\d|[0-1]?\\d?\\d)(\\.(25[0-5]|2[0-4]\\d|[0-1]?\\d?\\d)){3}\\]$';
+
+// Query string parameters that can be passed to LMS to manage
+// things like auto-enrollment upon login and registration.
+export const AUTH_PARAMS = ['course_id', 'enrollment_action', 'course_mode', 'email_opt_in', 'purchase_workflow', 'next', 'register_for_free', 'track', 'is_account_recovery', 'variant', 'host', 'cta'];
+export const REDIRECT = 'redirect';

package/src/data/countries.ts

@@ -0,0 +1,59 @@
+import { getPrimaryLanguageSubtag } from '@openedx/frontend-base';
+import COUNTRIES, { langs as countryLangs } from 'i18n-iso-countries';
+import arLocale from 'i18n-iso-countries/langs/ar.json';
+import caLocale from 'i18n-iso-countries/langs/ca.json';
+import enLocale from 'i18n-iso-countries/langs/en.json';
+import esLocale from 'i18n-iso-countries/langs/es.json';
+import frLocale from 'i18n-iso-countries/langs/fr.json';
+import heLocale from 'i18n-iso-countries/langs/he.json';
+import idLocale from 'i18n-iso-countries/langs/id.json';
+import koLocale from 'i18n-iso-countries/langs/ko.json';
+import plLocale from 'i18n-iso-countries/langs/pl.json';
+import ptLocale from 'i18n-iso-countries/langs/pt.json';
+import ruLocale from 'i18n-iso-countries/langs/ru.json';
+import ukLocale from 'i18n-iso-countries/langs/uk.json';
+import zhLocale from 'i18n-iso-countries/langs/zh.json';
+
+COUNTRIES.registerLocale(arLocale);
+COUNTRIES.registerLocale(enLocale);
+COUNTRIES.registerLocale(esLocale);
+COUNTRIES.registerLocale(frLocale);
+COUNTRIES.registerLocale(zhLocale);
+COUNTRIES.registerLocale(caLocale);
+COUNTRIES.registerLocale(heLocale);
+COUNTRIES.registerLocale(idLocale);
+COUNTRIES.registerLocale(koLocale);
+COUNTRIES.registerLocale(plLocale);
+COUNTRIES.registerLocale(ptLocale);
+COUNTRIES.registerLocale(ruLocale);
+COUNTRIES.registerLocale(ukLocale);
+
+/**
+ * Provides a lookup table of country IDs to country names for the current locale.
+ *
+ * @memberof module:I18n
+ */
+export function getCountryMessages(locale) {
+  const primaryLanguageSubtag = getPrimaryLanguageSubtag(locale);
+  const languageCode = countryLangs().includes(primaryLanguageSubtag) ? primaryLanguageSubtag : 'en';
+
+  return COUNTRIES.getNames(languageCode);
+}
+
+/**
+ * Provides a list of countries represented as objects of the following shape:
+ *
+ * {
+ *   key, // The ID of the country
+ *   name // The localized name of the country
+ * }
+ *
+ * TODO: ARCH-878: The list should be sorted alphabetically in the current locale.
+ * This is useful for populating dropdowns.
+ *
+ * @memberof module:I18n
+ */
+export function getCountryList(locale) {
+  const countryMessages = getCountryMessages(locale);
+  return Object.entries(countryMessages).map(([code, name]) => ({ code, name }));
+}

package/src/data/oneTrust.js

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

package/src/data/reducers.js

@@ -0,0 +1,36 @@
+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/sagas.js

@@ -0,0 +1,19 @@
+import { all } from 'redux-saga/effects';
+
+import { saga as commonComponentsSaga } from '../common-components';
+import { saga as forgotPasswordSaga } from '../forgot-password';
+import { saga as loginSaga } from '../login';
+import { saga as authnProgressiveProfilingSaga } from '../progressive-profiling';
+import { saga as registrationSaga } from '../register';
+import { saga as resetPasswordSaga } from '../reset-password';
+
+export default function* rootSaga() {
+  yield all([
+    loginSaga(),
+    registrationSaga(),
+    commonComponentsSaga(),
+    forgotPasswordSaga(),
+    resetPasswordSaga(),
+    authnProgressiveProfilingSaga(),
+  ]);
+}

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

@@ -0,0 +1,42 @@
+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

@@ -0,0 +1,19 @@
+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

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,81 @@
+// 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

@@ -0,0 +1,11 @@
+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

@@ -0,0 +1,34 @@
+/**
+ * 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

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1,156 @@
+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/index.jsx

@@ -0,0 +1,2 @@
+/* eslint-disable import/prefer-default-export */
+export { default as FormFieldRenderer } from './FieldRenderer';