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

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;