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

package/src/forgot-password/tests/ForgotPasswordPage.test.jsx

@@ -1,269 +0,0 @@
-import { Provider } from 'react-redux';
-
-import {
-  configureI18n, injectIntl, IntlProvider, mergeAppConfig
-} from '@openedx/frontend-base';
-import {
-  fireEvent, render, screen,
-} from '@testing-library/react';
-import { MemoryRouter } from 'react-router-dom';
-import configureStore from 'redux-mock-store';
-
-import { INTERNAL_SERVER_ERROR, LOGIN_PAGE } from '../../data/constants';
-import { PASSWORD_RESET } from '../../reset-password/data/constants';
-import { appId } from '../../constants';
-import { setForgotPasswordFormData } from '../data/actions';
-import ForgotPasswordPage from '../ForgotPasswordPage';
-
-const mockedNavigator = jest.fn();
-
-jest.mock('@openedx/frontend-base', () => ({
-  ...jest.requireActual('@openedx/frontend-base'),
-  sendPageEvent: jest.fn(),
-  sendTrackEvent: jest.fn(),
-  getAuthenticatedUser: jest.fn(() => ({
-    userId: 3,
-    username: 'test-user',
-  })),
-}));
-
-jest.mock('react-router-dom', () => ({
-  ...(jest.requireActual('react-router-dom')),
-  useNavigate: () => mockedNavigator,
-}));
-
-const IntlForgotPasswordPage = injectIntl(ForgotPasswordPage);
-const mockStore = configureStore();
-
-const initialState = {
-  forgotPassword: {
-    status: '',
-  },
-};
-
-describe('ForgotPasswordPage', () => {
-  mergeAppConfig(appId, {
-    LOGIN_ISSUE_SUPPORT_LINK: '',
-    INFO_EMAIL: '',
-  });
-
-  let props = {};
-  let store = {};
-
-  const reduxWrapper = children => (
-    <IntlProvider locale="en">
-      <MemoryRouter>
-        <Provider store={store}>{children}</Provider>
-      </MemoryRouter>
-    </IntlProvider>
-  );
-
-  beforeEach(() => {
-    store = mockStore(initialState);
-
-    configureI18n({
-      messages: { 'es-419': {}, de: {}, 'en-us': {} },
-    });
-    props = {
-      forgotPassword: jest.fn(),
-      status: null,
-    };
-  });
-  const findByTextContent = (container, text) => Array.from(container.querySelectorAll('*')).find(
-    element => element.textContent === text,
-  );
-
-  it('not should display need other help signing in button', () => {
-    const { queryByTestId } = render(reduxWrapper(<IntlForgotPasswordPage {...props} />));
-    const forgotPasswordButton = queryByTestId('forgot-password');
-    expect(forgotPasswordButton).toBeNull();
-  });
-
-  it('should display need other help signing in button', () => {
-    mergeAppConfig(appId, {
-      LOGIN_ISSUE_SUPPORT_LINK: '/support',
-    });
-    render(reduxWrapper(<IntlForgotPasswordPage {...props} />));
-    const forgotPasswordButton = screen.findByText('Need help signing in?');
-    expect(forgotPasswordButton).toBeDefined();
-  });
-
-  it('should display email validation error message', async () => {
-    const validationMessage = 'We were unable to contact you.Enter a valid email address below.';
-    const { container } = render(reduxWrapper(<IntlForgotPasswordPage {...props} />));
-
-    const emailInput = screen.getByLabelText('Email');
-
-    fireEvent.change(emailInput, { target: { value: 'invalid-email' } });
-
-    const submitButton = screen.getByText('Submit');
-    fireEvent.click(submitButton);
-
-    const alertElements = container.querySelectorAll('.alert-danger');
-    const validationErrors = alertElements[0].textContent;
-    expect(validationErrors).toBe(validationMessage);
-  });
-
-  it('should show alert on server error', () => {
-    store = mockStore({
-      forgotPassword: { status: INTERNAL_SERVER_ERROR },
-    });
-    const expectedMessage = 'We were unable to contact you.'
-      + 'An error has occurred. Try refreshing the page, or check your internet connection.';
-
-    const { container } = render(reduxWrapper(<IntlForgotPasswordPage {...props} />));
-
-    const alertElements = container.querySelectorAll('.alert-danger');
-    const validationErrors = alertElements[0].textContent;
-    expect(validationErrors).toBe(expectedMessage);
-  });
-
-  it('should display empty email validation message', async () => {
-    const validationMessage = 'We were unable to contact you.Enter your email below.';
-    const { container } = render(reduxWrapper(<IntlForgotPasswordPage {...props} />));
-
-    const submitButton = screen.getByText('Submit');
-    fireEvent.click(submitButton);
-
-    const alertElements = container.querySelectorAll('.alert-danger');
-    const validationErrors = alertElements[0].textContent;
-
-    expect(validationErrors).toBe(validationMessage);
-  });
-
-  it('should display request in progress error message', () => {
-    const rateLimitMessage = 'An error occurred.Your previous request is in progress, please try again in a few moments.';
-    store = mockStore({
-      forgotPassword: { status: 'forbidden' },
-    });
-
-    const { container } = render(reduxWrapper(<IntlForgotPasswordPage {...props} />));
-
-    const alertElements = container.querySelectorAll('.alert-danger');
-    const validationErrors = alertElements[0].textContent;
-    expect(validationErrors).toBe(rateLimitMessage);
-  });
-
-  it('should not display any error message on change event', () => {
-    render(reduxWrapper(<IntlForgotPasswordPage {...props} />));
-
-    const emailInput = screen.getByLabelText('Email');
-
-    fireEvent.change(emailInput, { target: { value: 'invalid-email' } });
-
-    const errorElement = screen.queryByTestId('email-invalid-feedback');
-    expect(errorElement).toBeNull();
-  });
-
-  it('should set error in redux store on onBlur', () => {
-    const forgotPasswordFormData = {
-      email: 'test@gmail',
-      emailValidationError: 'Enter a valid email address',
-    };
-
-    props = {
-      ...props,
-      email: 'test@gmail',
-      emailValidationError: '',
-    };
-
-    store.dispatch = jest.fn(store.dispatch);
-    render(reduxWrapper(<IntlForgotPasswordPage {...props} />));
-    const emailInput = screen.getByLabelText('Email');
-
-    fireEvent.blur(emailInput);
-
-    expect(store.dispatch).toHaveBeenCalledWith(setForgotPasswordFormData(forgotPasswordFormData));
-  });
-
-  it('should display error message if available in props', async () => {
-    const validationMessage = 'Enter your email';
-    props = {
-      ...props,
-      emailValidationError: validationMessage,
-      email: '',
-    };
-    const { container } = render(reduxWrapper(<IntlForgotPasswordPage {...props} />));
-    const validationElement = container.querySelector('.pgn__form-text-invalid');
-    expect(validationElement.textContent).toEqual(validationMessage);
-  });
-
-  it('should clear error in redux store on onFocus', () => {
-    const forgotPasswordFormData = {
-      emailValidationError: '',
-    };
-
-    props = {
-      ...props,
-      email: 'test@gmail',
-      emailValidationError: 'Enter a valid email address',
-    };
-
-    store.dispatch = jest.fn(store.dispatch);
-
-    render(reduxWrapper(<IntlForgotPasswordPage {...props} />));
-    const emailInput = screen.getByLabelText('Email');
-
-    fireEvent.focus(emailInput);
-
-    expect(store.dispatch).toHaveBeenCalledWith(setForgotPasswordFormData(forgotPasswordFormData));
-  });
-
-  it('should clear error message when cleared in props on focus', async () => {
-    props = {
-      ...props,
-      emailValidationError: '',
-      email: '',
-    };
-    render(reduxWrapper(<IntlForgotPasswordPage {...props} />));
-    const errorElement = screen.queryByTestId('email-invalid-feedback');
-    expect(errorElement).toBeNull();
-  });
-
-  it('should display success message after email is sent', () => {
-    store = mockStore({
-      ...initialState,
-      forgotPassword: {
-        status: 'complete',
-      },
-    });
-
-    const successMessage = 'Check your emailWe sent an email to  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, contact technical support.';
-
-    const { container } = render(reduxWrapper(<IntlForgotPasswordPage {...props} />));
-    const successElement = findByTextContent(container, successMessage);
-
-    expect(successElement).toBeDefined();
-    expect(successElement.textContent).toEqual(successMessage);
-  });
-
-  it('should display invalid password reset link error', () => {
-    store = mockStore({
-      ...initialState,
-      forgotPassword: {
-        status: PASSWORD_RESET.INVALID_TOKEN,
-      },
-    });
-    const successMessage = 'Invalid password reset link'
-      + 'This password reset link is invalid. It may have been used already. '
-      + 'Enter your email below to receive a new link.';
-
-    const { container } = render(reduxWrapper(<IntlForgotPasswordPage {...props} />));
-    const successElement = findByTextContent(container, successMessage);
-
-    expect(successElement).toBeDefined();
-    expect(successElement.textContent).toEqual(successMessage);
-  });
-
-  it('should redirect onto login page', async () => {
-    const { container } = render(reduxWrapper(<IntlForgotPasswordPage {...props} />));
-
-    const navElement = container.querySelector('nav');
-    const anchorElement = navElement.querySelector('a');
-    fireEvent.click(anchorElement);
-
-    expect(mockedNavigator).toHaveBeenCalledWith(LOGIN_PAGE);
-  });
-});

package/src/i18n/index.js

@@ -1,25 +0,0 @@
-// Placeholder be overridden by `make pull_translations`
-export default {
-  ar: {},
-  'zh-hk': {},
-  'zh-cn': {},
-  uk: {},
-  'tr-tr': {},
-  th: {},
-  te: {},
-  ru: {},
-  'pt-pt': {},
-  'pt-br': {},
-  'it-it': {},
-  id: {},
-  hi: {},
-  he: {},
-  'fr-ca': {},
-  fa: {},
-  'es-es': {},
-  'es-419': {},
-  el: {},
-  'de-de': {},
-  da: {},
-  bo: {},
-};

package/src/login/AccountActivationMessage.jsx

@@ -1,78 +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 { ACCOUNT_ACTIVATION_MESSAGE } from './data/constants';
-import messages from './messages';
-
-const AccountActivationMessage = ({ messageType }) => {
-  const { formatMessage } = useIntl();
-
-  if (!messageType) {
-    return null;
-  }
-
-  const variant = messageType === ACCOUNT_ACTIVATION_MESSAGE.ERROR ? 'danger' : messageType;
-  const activationOrConfirmation = useAppConfig().MARKETING_EMAILS_OPT_IN ? 'confirmation' : 'activation';
-  const iconMapping = {
-    [ACCOUNT_ACTIVATION_MESSAGE.SUCCESS]: CheckCircle,
-    [ACCOUNT_ACTIVATION_MESSAGE.ERROR]: Error,
-  };
-
-  let activationMessage;
-  let heading;
-  switch (messageType) {
-    case ACCOUNT_ACTIVATION_MESSAGE.SUCCESS: {
-      heading = formatMessage(messages[`account.${activationOrConfirmation}.success.message.title`]);
-      activationMessage = <span>{formatMessage(messages[`account.${activationOrConfirmation}.success.message`])}</span>;
-      break;
-    }
-    case ACCOUNT_ACTIVATION_MESSAGE.INFO: {
-      activationMessage = formatMessage(messages[`account.${activationOrConfirmation}.info.message`]);
-      break;
-    }
-    case ACCOUNT_ACTIVATION_MESSAGE.ERROR: {
-      const supportLink = (
-        <Alert.Link href={useAppConfig().ACTIVATION_EMAIL_SUPPORT_LINK}>
-          {formatMessage(messages['account.activation.support.link'])}
-        </Alert.Link>
-      );
-
-      heading = formatMessage(messages[`account.${activationOrConfirmation}.error.message.title`]);
-      activationMessage = (
-        <FormattedMessage
-          id="account.activation.error.message"
-          defaultMessage="Something went wrong, please {supportLink} to resolve this issue."
-          description="Account activation error message"
-          values={{ supportLink }}
-        />
-      );
-      break;
-    }
-    default:
-      break;
-  }
-
-  return activationMessage ? (
-    <Alert
-      id="account-activation-message"
-      className="mb-5"
-      variant={variant}
-      icon={iconMapping[messageType]}
-    >
-      {heading && <Alert.Heading>{heading}</Alert.Heading>}
-      {activationMessage}
-    </Alert>
-  ) : null;
-};
-
-AccountActivationMessage.propTypes = {
-  messageType: PropTypes.string,
-};
-
-AccountActivationMessage.defaultProps = {
-  messageType: null,
-};
-
-export default AccountActivationMessage;

package/src/login/ChangePasswordPrompt.jsx

@@ -1,91 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import { getSiteConfig, useIntl } from '@openedx/frontend-base';
-import {
-  ActionRow, ModalDialog, useToggle,
-} from '@openedx/paragon';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import { Link, useNavigate } from 'react-router-dom';
-
-import { DEFAULT_REDIRECT_URL, RESET_PAGE } from '../data/constants';
-import { updatePathWithQueryParams } from '../data/utils';
-import useMobileResponsive from '../data/utils/useMobileResponsive';
-import messages from './messages';
-
-const ChangePasswordPrompt = ({ variant, redirectUrl }) => {
-  const isMobileView = useMobileResponsive();
-  const [redirectToResetPasswordPage, setRedirectToResetPasswordPage] = useState(false);
-  const handlers = {
-    handleToggleOff: () => {
-      if (variant === 'block') {
-        setRedirectToResetPasswordPage(true);
-      } else {
-        window.location.href = redirectUrl || getSiteConfig().lmsBaseUrl.concat(DEFAULT_REDIRECT_URL);
-      }
-    },
-  };
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [isOpen, open, close] = useToggle(true, handlers);
-  const { formatMessage } = useIntl();
-  const navigate = useNavigate();
-
-  useEffect(() => {
-    if (redirectToResetPasswordPage) {
-      navigate(updatePathWithQueryParams(RESET_PAGE));
-    }
-  }, [redirectToResetPasswordPage, navigate]);
-
-  return (
-    <ModalDialog
-      title="Password security"
-      isOpen={isOpen}
-      onClose={close}
-      size={isMobileView ? 'sm' : 'md'}
-      hasCloseButton={false}
-    >
-      <ModalDialog.Header>
-        <ModalDialog.Title>
-          {formatMessage(messages[`password.security.${variant}.title`])}
-        </ModalDialog.Title>
-      </ModalDialog.Header>
-      <ModalDialog.Body>
-        {formatMessage(messages[`password.security.${variant}.body`])}
-      </ModalDialog.Body>
-      <ModalDialog.Footer>
-        <ActionRow className={classNames(
-          { 'd-flex flex-column': isMobileView },
-        )}
-        >
-          {variant === 'nudge' ? (
-            <ModalDialog.CloseButton id="password-security-close" variant="tertiary">
-              {formatMessage(messages['password.security.close.button'])}
-            </ModalDialog.CloseButton>
-          ) : null}
-          <Link
-            id="password-security-reset-password"
-            className={classNames(
-              'btn btn-primary',
-              { 'w-100': isMobileView },
-            )}
-            to={updatePathWithQueryParams(RESET_PAGE)}
-          >
-            {formatMessage(messages['password.security.redirect.to.reset.password.button'])}
-          </Link>
-        </ActionRow>
-      </ModalDialog.Footer>
-    </ModalDialog>
-  );
-};
-
-ChangePasswordPrompt.defaultProps = {
-  variant: 'block',
-  redirectUrl: null,
-};
-
-ChangePasswordPrompt.propTypes = {
-  variant: PropTypes.oneOf(['nudge', 'block']),
-  redirectUrl: PropTypes.string,
-};
-
-export default ChangePasswordPrompt;

package/src/login/LoginFailure.jsx

@@ -1,231 +0,0 @@
-import { useEffect } from 'react';
-
-import {
-  FormattedMessage, getAuthService, getSiteConfig, useIntl
-} from '@openedx/frontend-base';
-import { Alert, Hyperlink } from '@openedx/paragon';
-import { Error } from '@openedx/paragon/icons';
-import PropTypes from 'prop-types';
-
-import { windowScrollTo } from '../data/utils';
-import ChangePasswordPrompt from './ChangePasswordPrompt';
-import {
-  ACCOUNT_LOCKED_OUT,
-  ALLOWED_DOMAIN_LOGIN_ERROR,
-  FAILED_LOGIN_ATTEMPT,
-  FORBIDDEN_REQUEST,
-  INACTIVE_USER,
-  INCORRECT_EMAIL_PASSWORD,
-  INTERNAL_SERVER_ERROR,
-  INVALID_FORM,
-  NON_COMPLIANT_PASSWORD_EXCEPTION,
-  NUDGE_PASSWORD_CHANGE,
-  REQUIRE_PASSWORD_CHANGE,
-  TPA_AUTHENTICATION_FAILURE,
-} from './data/constants';
-import messages from './messages';
-
-const LoginFailureMessage = (props) => {
-  const { formatMessage } = useIntl();
-  const authService = getAuthService();
-  const {
-    context,
-    errorCode,
-    errorCount, // This is used to trigger the useEffect, facilitating the scrolling to the top.
-  } = props;
-
-  useEffect(() => {
-    windowScrollTo({ left: 0, top: 0, behavior: 'smooth' });
-  }, [errorCode, errorCount]);
-
-  if (!errorCode) {
-    return null;
-  }
-
-  let resetLink = (
-    <Hyperlink destination="reset" isInline>
-      {formatMessage(messages['login.incorrect.credentials.error.reset.link.text'])}
-    </Hyperlink>
-  );
-
-  let errorMessage;
-  switch (errorCode) {
-    case NON_COMPLIANT_PASSWORD_EXCEPTION: {
-      errorMessage = (
-        <>
-          <strong>{formatMessage(messages['non.compliant.password.title'])}</strong>
-          <p>{formatMessage(messages['non.compliant.password.message'])}</p>
-        </>
-      );
-      break;
-    }
-    case FORBIDDEN_REQUEST:
-      errorMessage = <p>{formatMessage(messages['login.rate.limit.reached.message'])}</p>;
-      break;
-    case INACTIVE_USER: {
-      const supportLink = (
-        <a href={context.supportLink}>
-          {formatMessage(messages['contact.support.link'], { platformName: context.platformName })}
-        </a>
-      );
-      errorMessage = (
-        <p>
-          <FormattedMessage
-            id="login.inactive.user.error"
-            defaultMessage="In order to sign in, you need to activate your account.{lineBreak}
-            {lineBreak}We just sent an activation link to {email}. If you do not receive an email,
-            check your spam folders or {supportLink}."
-            description="An error message shown to users when they sign in if they have not yet activated their account. It attempts to explain to them how to activate their account by looking for an email from the system."
-            values={{
-              lineBreak: <br />,
-              email: <strong className="data-hj-suppress">{context.email}</strong>,
-              supportLink,
-            }}
-          />
-        </p>
-      );
-      break;
-    }
-    case ALLOWED_DOMAIN_LOGIN_ERROR: {
-      const url = `${getSiteConfig().lmsBaseUrl}/dashboard/?tpa_hint=${context.tpaHint}`;
-      const tpaLink = (
-        <a href={url}>
-          {formatMessage(messages['tpa.account.link'], { provider: context.provider })}
-        </a>
-      );
-      errorMessage = (
-        <p>
-          <FormattedMessage
-            id="allowed.domain.login.error"
-            description="Display this error message when staff user try to login through password"
-            defaultMessage="As {allowedDomain} user, You must login with your {allowedDomain} {tpaLink}."
-            values={{ allowedDomain: context.allowedDomain, tpaLink }}
-          />
-        </p>
-      );
-      break;
-    }
-    case INVALID_FORM:
-      errorMessage = <p>{formatMessage(messages['login.form.invalid.error.message'])}</p>;
-      break;
-    case FAILED_LOGIN_ATTEMPT: {
-      resetLink = (
-        <Hyperlink destination="reset" isInline>
-          {formatMessage(messages['login.incorrect.credentials.error.before.account.blocked.text'])}
-        </Hyperlink>
-      );
-      errorMessage = (
-        <>
-          <p>
-            <FormattedMessage
-              id="login.incorrect.credentials.error.attempts.text.1"
-              description="Error message for incorrect email or password"
-              defaultMessage="The username, email or password you entered is incorrect. You have {remainingAttempts} more sign in
-                attempts before your account is temporarily locked."
-              values={{ remainingAttempts: context.remainingAttempts }}
-            />
-          </p>
-          <p>
-            <FormattedMessage
-              id="login.incorrect.credentials.error.attempts.text.2"
-              description="Part of error message for incorrect email or password"
-              defaultMessage="If you've forgotten your password, {resetLink}"
-              values={{ resetLink }}
-            />
-          </p>
-        </>
-      );
-      break;
-    }
-    case ACCOUNT_LOCKED_OUT: {
-      errorMessage = (
-        <>
-          <p>{formatMessage(messages['account.locked.out.message.1'])}</p>
-          <p>
-            <FormattedMessage
-              id="account.locked.out.message.2"
-              description="Part of message for when user account has been locked out after multiple failed login attempts"
-              defaultMessage="To be on the safe side, you can {resetLink} before trying again."
-              values={{ resetLink }}
-            />
-          </p>
-        </>
-      );
-      break;
-    }
-    case INCORRECT_EMAIL_PASSWORD:
-      if (context.failureCount <= 1) {
-        errorMessage = <p>{formatMessage(messages['login.incorrect.credentials.error'])}</p>;
-      } else if (context.failureCount === 2) {
-        errorMessage = (
-          <p>
-            <FormattedMessage
-              id="login.incorrect.credentials.error.with.reset.link"
-              defaultMessage="The username, email, or password you entered is incorrect. Please try again or {resetLink}."
-              description="An error message shown to users if some part of their login information was incorrect."
-              values={{ resetLink }}
-            />
-          </p>
-        );
-      }
-      break;
-    case NUDGE_PASSWORD_CHANGE:
-      // Need to clear the CSRF token here to fetch a new one because token is already rotated after successful login.
-      if (authService) {
-        authService.getCsrfTokenService().clearCsrfTokenCache();
-      }
-      return (
-        <ChangePasswordPrompt
-          redirectUrl={context.redirectUrl}
-          variant="nudge"
-        />
-      );
-    case REQUIRE_PASSWORD_CHANGE:
-      return <ChangePasswordPrompt />;
-    case TPA_AUTHENTICATION_FAILURE:
-      errorMessage = (
-        <p>
-          {formatMessage(messages['login.tpa.authentication.failure'], {
-            platform_name: getSiteConfig().siteName,
-            lineBreak: <br />,
-            errorMessage: context.errorMessage,
-          })}
-        </p>
-      );
-      break;
-    case INTERNAL_SERVER_ERROR:
-    default:
-      errorMessage = <p>{formatMessage(messages['internal.server.error.message'])}</p>;
-      break;
-  }
-
-  return (
-    <Alert id="login-failure-alert" className="mb-5" variant="danger" icon={Error}>
-      <Alert.Heading>{formatMessage(messages['login.failure.header.title'])}</Alert.Heading>
-      {errorMessage}
-    </Alert>
-  );
-};
-
-LoginFailureMessage.defaultProps = {
-  context: {},
-};
-
-LoginFailureMessage.propTypes = {
-  context: PropTypes.shape({
-    supportLink: PropTypes.string,
-    platformName: PropTypes.string,
-    tpaHint: PropTypes.string,
-    provider: PropTypes.string,
-    allowedDomain: PropTypes.string,
-    remainingAttempts: PropTypes.number,
-    failureCount: PropTypes.number,
-    errorMessage: PropTypes.string,
-    email: PropTypes.string,
-    redirectUrl: PropTypes.string,
-  }),
-  errorCode: PropTypes.string.isRequired,
-  errorCount: PropTypes.number.isRequired,
-};
-
-export default LoginFailureMessage;