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

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');
-  });
-});

package/src/forgot-password/ForgotPasswordAlert.jsx

@@ -1,97 +0,0 @@
-import { FormattedMessage, useAppConfig, useIntl } from '@openedx/frontend-base';
-import { Alert } from '@openedx/paragon';
-import { CheckCircle, Error } from '@openedx/paragon/icons';
-import PropTypes from 'prop-types';
-
-import {
-  COMPLETE_STATE, FORBIDDEN_STATE, FORM_SUBMISSION_ERROR, INTERNAL_SERVER_ERROR,
-} from '../data/constants';
-import { PASSWORD_RESET } from '../reset-password/data/constants';
-import messages from './messages';
-
-const ForgotPasswordAlert = (props) => {
-  const { formatMessage } = useIntl();
-  const { email, emailError } = props;
-  let message = '';
-  let heading = formatMessage(messages['forgot.password.error.alert.title']);
-  let { status } = props;
-
-  if (emailError) {
-    status = FORM_SUBMISSION_ERROR;
-  }
-
-  switch (status) {
-    case COMPLETE_STATE:
-      heading = formatMessage(messages['confirmation.message.title']);
-      message = (
-        <FormattedMessage
-          id="forgot.password.confirmation.message"
-          defaultMessage="We sent an email to {email} with instructions to reset your password.
-          If you do not receive a password reset message after 1 minute, verify that you entered
-          the correct email address, or check your spam folder. If you need further assistance, {supportLink}."
-          description="Forgot password confirmation message"
-          values={{
-            email: <span className="data-hj-suppress">{email}</span>,
-            supportLink: (
-              <Alert.Link href={useAppConfig().PASSWORD_RESET_SUPPORT_LINK} target="_blank">
-                {formatMessage(messages['confirmation.support.link'])}
-              </Alert.Link>
-            ),
-          }}
-        />
-      );
-      break;
-    case INTERNAL_SERVER_ERROR:
-      message = formatMessage(messages['internal.server.error']);
-      break;
-    case FORBIDDEN_STATE:
-      heading = formatMessage(messages['forgot.password.error.message.title']);
-      message = formatMessage(messages['forgot.password.request.in.progress.message']);
-      break;
-    case FORM_SUBMISSION_ERROR:
-      message = formatMessage(messages['extend.field.errors'], { emailError });
-      break;
-    case PASSWORD_RESET.INVALID_TOKEN:
-      heading = formatMessage(messages['invalid.token.heading']);
-      message = formatMessage(messages['invalid.token.error.message']);
-      break;
-    case PASSWORD_RESET.FORBIDDEN_REQUEST:
-      heading = formatMessage(messages['token.validation.rate.limit.error.heading']);
-      message = formatMessage(messages['token.validation.rate.limit.error']);
-      break;
-    case PASSWORD_RESET.INTERNAL_SERVER_ERROR:
-      heading = formatMessage(messages['token.validation.internal.sever.error.heading']);
-      message = formatMessage(messages['token.validation.internal.sever.error']);
-      break;
-    default:
-      break;
-  }
-
-  if (message) {
-    return (
-      <Alert
-        id="validation-errors"
-        className="mb-4"
-        variant={`${status === 'complete' ? 'success' : 'danger'}`}
-        icon={status === 'complete' ? CheckCircle : Error}
-      >
-        <Alert.Heading>{heading}</Alert.Heading>
-        <p>{message}</p>
-      </Alert>
-    );
-  }
-  return null;
-};
-
-ForgotPasswordAlert.defaultProps = {
-  email: '',
-  emailError: '',
-};
-
-ForgotPasswordAlert.propTypes = {
-  status: PropTypes.string.isRequired,
-  email: PropTypes.string,
-  emailError: PropTypes.string,
-};
-
-export default ForgotPasswordAlert;

package/src/forgot-password/ForgotPasswordPage.jsx

@@ -1,193 +0,0 @@
-import { useEffect, useState } from 'react';
-import { connect } from 'react-redux';
-
-import {
-  useAppConfig,
-  getSiteConfig, sendPageEvent, sendTrackEvent, useIntl
-} from '@openedx/frontend-base';
-import {
-  Form,
-  Hyperlink,
-  Icon,
-  StatefulButton,
-  Tab,
-  Tabs,
-} from '@openedx/paragon';
-import { ChevronLeft } from '@openedx/paragon/icons';
-import PropTypes from 'prop-types';
-import { Helmet } from 'react-helmet';
-import { useNavigate } from 'react-router-dom';
-
-import BaseContainer from '../base-container';
-import { FormGroup } from '../common-components';
-import { DEFAULT_STATE, LOGIN_PAGE, VALID_EMAIL_REGEX } from '../data/constants';
-import { updatePathWithQueryParams, windowScrollTo } from '../data/utils';
-import { forgotPassword, setForgotPasswordFormData } from './data/actions';
-import { forgotPasswordResultSelector } from './data/selectors';
-import ForgotPasswordAlert from './ForgotPasswordAlert';
-import messages from './messages';
-
-const ForgotPasswordPage = (props) => {
-  const platformName = getSiteConfig().siteName;
-  const emailRegex = new RegExp(VALID_EMAIL_REGEX, 'i');
-  const {
-    status, submitState, emailValidationError,
-  } = props;
-
-  const { formatMessage } = useIntl();
-  const [email, setEmail] = useState(props.email);
-  const [bannerEmail, setBannerEmail] = useState('');
-  const [formErrors, setFormErrors] = useState('');
-  const [validationError, setValidationError] = useState(emailValidationError);
-  const navigate = useNavigate();
-
-  useEffect(() => {
-    sendPageEvent('login_and_registration', 'reset');
-    sendTrackEvent('edx.bi.password_reset_form.viewed', { category: 'user-engagement' });
-  }, []);
-
-  useEffect(() => {
-    setValidationError(emailValidationError);
-  }, [emailValidationError]);
-
-  useEffect(() => {
-    if (status === 'complete') {
-      setEmail('');
-    }
-  }, [status]);
-
-  const getValidationMessage = (value) => {
-    let error = '';
-
-    if (value === '') {
-      error = formatMessage(messages['forgot.password.empty.email.field.error']);
-    } else if (!emailRegex.test(value)) {
-      error = formatMessage(messages['forgot.password.page.invalid.email.message']);
-    }
-
-    return error;
-  };
-
-  const handleBlur = () => {
-    props.setForgotPasswordFormData({ email, emailValidationError: getValidationMessage(email) });
-  };
-
-  const handleFocus = () => props.setForgotPasswordFormData({ emailValidationError: '' });
-
-  const handleSubmit = (e) => {
-    e.preventDefault();
-    setBannerEmail(email);
-
-    const error = getValidationMessage(email);
-    if (error) {
-      setFormErrors(error);
-      props.setForgotPasswordFormData({ email, emailValidationError: error });
-      windowScrollTo({ left: 0, top: 0, behavior: 'smooth' });
-    } else {
-      props.forgotPassword(email);
-    }
-  };
-
-  const tabTitle = (
-    <div className="d-inline-flex flex-wrap align-items-center">
-      <Icon src={ChevronLeft} />
-      <span className="ml-2">{formatMessage(messages['sign.in.text'])}</span>
-    </div>
-  );
-
-  return (
-    <BaseContainer>
-      <Helmet>
-        <title>
-          {formatMessage(
-            messages['forgot.password.page.title'],
-            { siteName: getSiteConfig().siteName }
-          )}
-        </title>
-      </Helmet>
-      <div>
-        <Tabs activeKey="" id="controlled-tab" onSelect={(key) => navigate(updatePathWithQueryParams(key))}>
-          <Tab title={tabTitle} eventKey={LOGIN_PAGE} />
-        </Tabs>
-        <div id="main-content" className="main-content">
-          <Form id="forget-password-form" name="forget-password-form" className="mw-xs">
-            <ForgotPasswordAlert email={bannerEmail} emailError={formErrors} status={status} />
-            <h2 className="h4">
-              {formatMessage(messages['forgot.password.page.heading'])}
-            </h2>
-            <p className="mb-4">
-              {formatMessage(messages['forgot.password.page.instructions'])}
-            </p>
-            <FormGroup
-              floatingLabel={formatMessage(messages['forgot.password.page.email.field.label'])}
-              name="email"
-              value={email}
-              autoComplete="on"
-              errorMessage={validationError}
-              handleChange={(e) => setEmail(e.target.value)}
-              handleBlur={handleBlur}
-              handleFocus={handleFocus}
-              helpText={[formatMessage(messages['forgot.password.email.help.text'], { platformName })]}
-            />
-            <StatefulButton
-              id="submit-forget-password"
-              name="submit-forget-password"
-              type="submit"
-              variant="brand"
-              className="forgot-password--button"
-              state={submitState}
-              labels={{
-                default: formatMessage(messages['forgot.password.page.submit.button']),
-                pending: '',
-              }}
-              onClick={handleSubmit}
-              onMouseDown={(e) => e.preventDefault()}
-            />
-            {(useAppConfig().LOGIN_ISSUE_SUPPORT_LINK) && (
-              <Hyperlink
-                id="forgot-password"
-                name="forgot-password"
-                className="ml-4 font-weight-500 text-body"
-                destination={useAppConfig().LOGIN_ISSUE_SUPPORT_LINK}
-                target="_blank"
-                showLaunchIcon={false}
-              >
-                {formatMessage(messages['need.help.sign.in.text'])}
-              </Hyperlink>
-            )}
-            <p className="mt-5.5 small text-gray-700">
-              {formatMessage(messages['additional.help.text'], { platformName })}
-              <span>
-                <Hyperlink isInline destination={`mailto:${useAppConfig().INFO_EMAIL}`}>{useAppConfig().INFO_EMAIL}</Hyperlink>
-              </span>
-            </p>
-          </Form>
-        </div>
-      </div>
-    </BaseContainer>
-  );
-};
-
-ForgotPasswordPage.propTypes = {
-  email: PropTypes.string,
-  emailValidationError: PropTypes.string,
-  forgotPassword: PropTypes.func.isRequired,
-  setForgotPasswordFormData: PropTypes.func.isRequired,
-  status: PropTypes.string,
-  submitState: PropTypes.string,
-};
-
-ForgotPasswordPage.defaultProps = {
-  email: '',
-  emailValidationError: '',
-  status: null,
-  submitState: DEFAULT_STATE,
-};
-
-export default connect(
-  forgotPasswordResultSelector,
-  {
-    forgotPassword,
-    setForgotPasswordFormData,
-  },
-)(ForgotPasswordPage);

package/src/forgot-password/data/actions.js

@@ -1,32 +0,0 @@
-import { AsyncActionType } from '../../data/utils';
-
-export const FORGOT_PASSWORD = new AsyncActionType('FORGOT', 'PASSWORD');
-export const FORGOT_PASSWORD_PERSIST_FORM_DATA = 'FORGOT_PASSWORD_PERSIST_FORM_DATA';
-
-// Forgot Password
-export const forgotPassword = email => ({
-  type: FORGOT_PASSWORD.BASE,
-  payload: { email },
-});
-
-export const forgotPasswordBegin = () => ({
-  type: FORGOT_PASSWORD.BEGIN,
-});
-
-export const forgotPasswordSuccess = email => ({
-  type: FORGOT_PASSWORD.SUCCESS,
-  payload: { email },
-});
-
-export const forgotPasswordForbidden = () => ({
-  type: FORGOT_PASSWORD.FORBIDDEN,
-});
-
-export const forgotPasswordServerError = () => ({
-  type: FORGOT_PASSWORD.FAILURE,
-});
-
-export const setForgotPasswordFormData = (forgotPasswordFormData) => ({
-  type: FORGOT_PASSWORD_PERSIST_FORM_DATA,
-  payload: { forgotPasswordFormData },
-});

package/src/forgot-password/data/reducers.js

@@ -1,58 +0,0 @@
-import { FORGOT_PASSWORD, FORGOT_PASSWORD_PERSIST_FORM_DATA } from './actions';
-import { INTERNAL_SERVER_ERROR, PENDING_STATE } from '../../data/constants';
-import { PASSWORD_RESET_FAILURE } from '../../reset-password/data/actions';
-
-export const defaultState = {
-  status: '',
-  submitState: '',
-  email: '',
-  emailValidationError: '',
-};
-
-const reducer = (state = defaultState, action = null) => {
-  if (action !== null) {
-    switch (action.type) {
-      case FORGOT_PASSWORD.BEGIN:
-        return {
-          email: state.email,
-          status: 'pending',
-          submitState: PENDING_STATE,
-        };
-      case FORGOT_PASSWORD.SUCCESS:
-        return {
-          ...defaultState,
-          status: 'complete',
-        };
-      case FORGOT_PASSWORD.FORBIDDEN:
-        return {
-          email: state.email,
-          status: 'forbidden',
-        };
-      case FORGOT_PASSWORD.FAILURE:
-        return {
-          email: state.email,
-          status: INTERNAL_SERVER_ERROR,
-        };
-      case PASSWORD_RESET_FAILURE:
-        return {
-          status: action.payload.errorCode,
-        };
-      case FORGOT_PASSWORD_PERSIST_FORM_DATA: {
-        const { forgotPasswordFormData } = action.payload;
-        return {
-          ...state,
-          ...forgotPasswordFormData,
-        };
-      }
-      default:
-        return {
-          ...defaultState,
-          email: state.email,
-          emailValidationError: state.emailValidationError,
-        };
-    }
-  }
-  return state;
-};
-
-export default reducer;

package/src/forgot-password/data/sagas.js

@@ -1,35 +0,0 @@
-import { logError, logInfo } from '@openedx/frontend-base';
-import { call, put, takeEvery } from 'redux-saga/effects';
-
-// Actions
-import {
-  FORGOT_PASSWORD,
-  forgotPasswordBegin,
-  forgotPasswordForbidden,
-  forgotPasswordServerError,
-  forgotPasswordSuccess,
-} from './actions';
-import { forgotPassword } from './service';
-
-// Services
-export function* handleForgotPassword(action) {
-  try {
-    yield put(forgotPasswordBegin());
-
-    yield call(forgotPassword, action.payload.email);
-
-    yield put(forgotPasswordSuccess(action.payload.email));
-  } catch (e) {
-    if (e.response && e.response.status === 403) {
-      yield put(forgotPasswordForbidden());
-      logInfo(e);
-    } else {
-      yield put(forgotPasswordServerError());
-      logError(e);
-    }
-  }
-}
-
-export default function* saga() {
-  yield takeEvery(FORGOT_PASSWORD.BASE, handleForgotPassword);
-}

package/src/forgot-password/data/selectors.js

@@ -1,10 +0,0 @@
-import { createSelector } from 'reselect';
-
-export const storeName = 'forgotPassword';
-
-export const forgotPasswordSelector = state => ({ ...state[storeName] });
-
-export const forgotPasswordResultSelector = createSelector(
-  forgotPasswordSelector,
-  forgotPassword => forgotPassword,
-);

package/src/forgot-password/data/service.js

@@ -1,21 +0,0 @@
-import { getAuthenticatedHttpClient, getSiteConfig } from '@openedx/frontend-base';
-import formurlencoded from 'form-urlencoded';
-
-export async function forgotPassword(email) {
-  const requestConfig = {
-    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-    isPublic: true,
-  };
-
-  const { data } = await getAuthenticatedHttpClient()
-    .post(
-      `${getSiteConfig().lmsBaseUrl}/account/password`,
-      formurlencoded({ email }),
-      requestConfig,
-    )
-    .catch((e) => {
-      throw (e);
-    });
-
-  return data;
-}

package/src/forgot-password/data/tests/reducers.test.js

@@ -1,34 +0,0 @@
-import {
-  FORGOT_PASSWORD_PERSIST_FORM_DATA,
-} from '../actions';
-import reducer from '../reducers';
-
-describe('forgot password reducer', () => {
-  it('should set email and emailValidationError', () => {
-    const state = {
-      status: '',
-      submitState: '',
-      email: '',
-      emailValidationError: '',
-    };
-    const forgotPasswordFormData = {
-      email: 'test@gmail',
-      emailValidationError: 'Enter a valid email address',
-    };
-    const action = {
-      type: FORGOT_PASSWORD_PERSIST_FORM_DATA,
-      payload: { forgotPasswordFormData },
-    };
-
-    expect(
-      reducer(state, action),
-    ).toEqual(
-      {
-        status: '',
-        submitState: '',
-        email: 'test@gmail',
-        emailValidationError: 'Enter a valid email address',
-      },
-    );
-  });
-});