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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,34 @@
+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',
+      },
+    );
+  });
+});