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

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

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