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

package/src/login/LoginFailure.jsx

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

package/src/login/LoginPage.jsx

@@ -0,0 +1,368 @@
+import { useEffect, useMemo, useState } from 'react';
+import { connect } from 'react-redux';
+
+import {
+  getSiteConfig, injectIntl, sendPageEvent, sendTrackEvent, useIntl
+} from '@openedx/frontend-base';
+import {
+  Form, StatefulButton,
+} from '@openedx/paragon';
+import PropTypes from 'prop-types';
+import { Helmet } from 'react-helmet';
+import Skeleton from 'react-loading-skeleton';
+import { Link } from 'react-router-dom';
+
+import {
+  FormGroup,
+  InstitutionLogistration,
+  PasswordField,
+  RedirectLogistration,
+  ThirdPartyAuthAlert,
+} from '../common-components';
+import { getThirdPartyAuthContext } from '../common-components/data/actions';
+import { thirdPartyAuthContextSelector } from '../common-components/data/selectors';
+import EnterpriseSSO from '../common-components/EnterpriseSSO';
+import ThirdPartyAuth from '../common-components/ThirdPartyAuth';
+import {
+  DEFAULT_STATE, PENDING_STATE, RESET_PAGE,
+} from '../data/constants';
+import {
+  getActivationStatus,
+  getAllPossibleQueryParams,
+  getTpaHint,
+  getTpaProvider,
+  updatePathWithQueryParams,
+} from '../data/utils';
+import ResetPasswordSuccess from '../reset-password/ResetPasswordSuccess';
+import AccountActivationMessage from './AccountActivationMessage';
+import {
+  backupLoginFormBegin,
+  dismissPasswordResetBanner,
+  loginRequest,
+} from './data/actions';
+import { INVALID_FORM, TPA_AUTHENTICATION_FAILURE } from './data/constants';
+import LoginFailureMessage from './LoginFailure';
+import messages from './messages';
+
+const LoginPage = (props) => {
+  const {
+    backedUpFormData,
+    loginErrorCode,
+    loginErrorContext,
+    loginResult,
+    shouldBackupState,
+    thirdPartyAuthContext: {
+      providers,
+      currentProvider,
+      secondaryProviders,
+      finishAuthUrl,
+      platformName,
+      errorMessage: thirdPartyErrorMessage,
+    },
+    thirdPartyAuthApiStatus,
+    institutionLogin,
+    showResetPasswordSuccessBanner,
+    submitState,
+    // Actions
+    backupFormState,
+    handleInstitutionLogin,
+    getTPADataFromBackend,
+  } = props;
+  const { formatMessage } = useIntl();
+  const activationMsgType = getActivationStatus();
+  const queryParams = useMemo(() => getAllPossibleQueryParams(), []);
+
+  const [formFields, setFormFields] = useState({ ...backedUpFormData.formFields });
+  const [errorCode, setErrorCode] = useState({ type: '', count: 0, context: {} });
+  const [errors, setErrors] = useState({ ...backedUpFormData.errors });
+  const tpaHint = getTpaHint();
+
+  useEffect(() => {
+    sendPageEvent('login_and_registration', 'login');
+  }, []);
+
+  useEffect(() => {
+    const payload = { ...queryParams };
+    if (tpaHint) {
+      payload.tpa_hint = tpaHint;
+    }
+    getTPADataFromBackend(payload);
+  }, [getTPADataFromBackend, queryParams, tpaHint]);
+  /**
+   * Backup the login form in redux when login page is toggled.
+   */
+  useEffect(() => {
+    if (shouldBackupState) {
+      backupFormState({
+        formFields: { ...formFields },
+        errors: { ...errors },
+      });
+    }
+  }, [shouldBackupState, formFields, errors, backupFormState]);
+
+  useEffect(() => {
+    if (loginErrorCode) {
+      setErrorCode(prevState => ({
+        type: loginErrorCode,
+        count: prevState.count + 1,
+        context: { ...loginErrorContext },
+      }));
+    }
+  }, [loginErrorCode, loginErrorContext]);
+
+  useEffect(() => {
+    if (thirdPartyErrorMessage) {
+      setErrorCode((prevState) => ({
+        type: TPA_AUTHENTICATION_FAILURE,
+        count: prevState.count + 1,
+        context: {
+          errorMessage: thirdPartyErrorMessage,
+        },
+      }));
+    }
+  }, [thirdPartyErrorMessage]);
+
+  const validateFormFields = (payload) => {
+    const { emailOrUsername, password } = payload;
+    const fieldErrors = { ...errors };
+
+    if (emailOrUsername === '') {
+      fieldErrors.emailOrUsername = formatMessage(messages['email.validation.message']);
+    } else if (emailOrUsername.length < 2) {
+      fieldErrors.emailOrUsername = formatMessage(messages['username.or.email.format.validation.less.chars.message']);
+    }
+    if (password === '') {
+      fieldErrors.password = formatMessage(messages['password.validation.message']);
+    }
+
+    return { ...fieldErrors };
+  };
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    if (showResetPasswordSuccessBanner) {
+      props.dismissPasswordResetBanner();
+    }
+
+    const formData = { ...formFields };
+    const validationErrors = validateFormFields(formData);
+    if (validationErrors.emailOrUsername || validationErrors.password) {
+      setErrors({ ...validationErrors });
+      setErrorCode(prevState => ({ type: INVALID_FORM, count: prevState.count + 1, context: {} }));
+      return;
+    }
+
+    // add query params to the payload
+    const payload = {
+      email_or_username: formData.emailOrUsername,
+      password: formData.password,
+      ...queryParams,
+    };
+    props.loginRequest(payload);
+  };
+
+  const handleOnChange = (event) => {
+    const { name, value } = event.target;
+    setFormFields(prevState => ({ ...prevState, [name]: value }));
+  };
+
+  const handleOnFocus = (event) => {
+    const { name } = event.target;
+    setErrors(prevErrors => ({ ...prevErrors, [name]: '' }));
+  };
+  const trackForgotPasswordLinkClick = () => {
+    sendTrackEvent('edx.bi.password-reset_form.toggled', { category: 'user-engagement' });
+  };
+
+  const { provider, skipHintedLogin } = getTpaProvider(tpaHint, providers, secondaryProviders);
+
+  if (tpaHint) {
+    if (thirdPartyAuthApiStatus === PENDING_STATE) {
+      return <Skeleton height={36} />;
+    }
+
+    if (skipHintedLogin) {
+      window.location.href = getSiteConfig().lmsBaseUrl + provider.loginUrl;
+      return null;
+    }
+
+    if (provider) {
+      return <EnterpriseSSO provider={provider} />;
+    }
+  }
+
+  if (institutionLogin) {
+    return (
+      <InstitutionLogistration
+        secondaryProviders={secondaryProviders}
+        headingTitle={formatMessage(messages['institution.login.page.title'])}
+      />
+    );
+  }
+  return (
+    <>
+      <Helmet>
+        <title>{formatMessage(messages['login.page.title'], { siteName: getSiteConfig().siteName })}</title>
+      </Helmet>
+      <RedirectLogistration
+        success={loginResult.success}
+        redirectUrl={loginResult.redirectUrl}
+        finishAuthUrl={finishAuthUrl}
+      />
+      <div className="mw-xs mt-3 mb-2">
+        <LoginFailureMessage
+          errorCode={errorCode.type}
+          errorCount={errorCode.count}
+          context={errorCode.context}
+        />
+        <ThirdPartyAuthAlert
+          currentProvider={currentProvider}
+          platformName={platformName}
+        />
+        <AccountActivationMessage
+          messageType={activationMsgType}
+        />
+        {showResetPasswordSuccessBanner && <ResetPasswordSuccess />}
+        <Form id="sign-in-form" name="sign-in-form">
+          <FormGroup
+            name="emailOrUsername"
+            value={formFields.emailOrUsername}
+            autoComplete="on"
+            handleChange={handleOnChange}
+            handleFocus={handleOnFocus}
+            errorMessage={errors.emailOrUsername}
+            floatingLabel={formatMessage(messages['login.user.identity.label'])}
+          />
+          <PasswordField
+            name="password"
+            value={formFields.password}
+            autoComplete="off"
+            showScreenReaderText={false}
+            showRequirements={false}
+            handleChange={handleOnChange}
+            handleFocus={handleOnFocus}
+            errorMessage={errors.password}
+            floatingLabel={formatMessage(messages['login.password.label'])}
+          />
+          <StatefulButton
+            name="sign-in"
+            id="sign-in"
+            type="submit"
+            variant="brand"
+            className="login-button-width"
+            state={submitState}
+            labels={{
+              default: formatMessage(messages['sign.in.button']),
+              pending: '',
+            }}
+            onClick={handleSubmit}
+            onMouseDown={(event) => event.preventDefault()}
+          />
+          <Link
+            id="forgot-password"
+            name="forgot-password"
+            className="btn btn-link font-weight-500 text-body"
+            to={updatePathWithQueryParams(RESET_PAGE)}
+            onClick={trackForgotPasswordLinkClick}
+          >
+            {formatMessage(messages['forgot.password'])}
+          </Link>
+          <ThirdPartyAuth
+            currentProvider={currentProvider}
+            providers={providers}
+            secondaryProviders={secondaryProviders}
+            handleInstitutionLogin={handleInstitutionLogin}
+            thirdPartyAuthApiStatus={thirdPartyAuthApiStatus}
+            isLoginPage
+          />
+        </Form>
+      </div>
+    </>
+  );
+};
+
+const mapStateToProps = state => {
+  const loginPageState = state.login;
+  return {
+    backedUpFormData: loginPageState.loginFormData,
+    loginErrorCode: loginPageState.loginErrorCode,
+    loginErrorContext: loginPageState.loginErrorContext,
+    loginResult: loginPageState.loginResult,
+    shouldBackupState: loginPageState.shouldBackupState,
+    showResetPasswordSuccessBanner: loginPageState.showResetPasswordSuccessBanner,
+    submitState: loginPageState.submitState,
+    thirdPartyAuthContext: thirdPartyAuthContextSelector(state),
+    thirdPartyAuthApiStatus: state.commonComponents.thirdPartyAuthApiStatus,
+  };
+};
+
+LoginPage.propTypes = {
+  backedUpFormData: PropTypes.shape({
+    formFields: PropTypes.shape({}),
+    errors: PropTypes.shape({}),
+  }),
+  loginErrorCode: PropTypes.string,
+  loginErrorContext: PropTypes.shape({
+    email: PropTypes.string,
+    redirectUrl: PropTypes.string,
+    context: PropTypes.shape({}),
+  }),
+  loginResult: PropTypes.shape({
+    redirectUrl: PropTypes.string,
+    success: PropTypes.bool,
+  }),
+  shouldBackupState: PropTypes.bool,
+  showResetPasswordSuccessBanner: PropTypes.bool,
+  submitState: PropTypes.string,
+  thirdPartyAuthApiStatus: PropTypes.string,
+  institutionLogin: PropTypes.bool.isRequired,
+  thirdPartyAuthContext: PropTypes.shape({
+    currentProvider: PropTypes.string,
+    errorMessage: PropTypes.string,
+    platformName: PropTypes.string,
+    providers: PropTypes.arrayOf(PropTypes.shape({})),
+    secondaryProviders: PropTypes.arrayOf(PropTypes.shape({})),
+    finishAuthUrl: PropTypes.string,
+  }),
+  // Actions
+  backupFormState: PropTypes.func.isRequired,
+  dismissPasswordResetBanner: PropTypes.func.isRequired,
+  loginRequest: PropTypes.func.isRequired,
+  getTPADataFromBackend: PropTypes.func.isRequired,
+  handleInstitutionLogin: PropTypes.func.isRequired,
+};
+
+LoginPage.defaultProps = {
+  backedUpFormData: {
+    formFields: {
+      emailOrUsername: '', password: '',
+    },
+    errors: {
+      emailOrUsername: '', password: '',
+    },
+  },
+  loginErrorCode: null,
+  loginErrorContext: {},
+  loginResult: {},
+  shouldBackupState: false,
+  showResetPasswordSuccessBanner: false,
+  submitState: DEFAULT_STATE,
+  thirdPartyAuthApiStatus: PENDING_STATE,
+  thirdPartyAuthContext: {
+    currentProvider: null,
+    errorMessage: null,
+    finishAuthUrl: null,
+    providers: [],
+    secondaryProviders: [],
+  },
+};
+
+export default connect(
+  mapStateToProps,
+  {
+    backupFormState: backupLoginFormBegin,
+    dismissPasswordResetBanner,
+    loginRequest,
+    getTPADataFromBackend: getThirdPartyAuthContext,
+  },
+)(injectIntl(LoginPage));

package/src/login/data/actions.js

@@ -0,0 +1,39 @@
+import { AsyncActionType } from '../../data/utils';
+
+export const BACKUP_LOGIN_DATA = new AsyncActionType('LOGIN', 'BACKUP_LOGIN_DATA');
+export const LOGIN_REQUEST = new AsyncActionType('LOGIN', 'REQUEST');
+export const DISMISS_PASSWORD_RESET_BANNER = 'DISMISS_PASSWORD_RESET_BANNER';
+
+// Backup login form data
+export const backupLoginForm = () => ({
+  type: BACKUP_LOGIN_DATA.BASE,
+});
+
+export const backupLoginFormBegin = (data) => ({
+  type: BACKUP_LOGIN_DATA.BEGIN,
+  payload: { ...data },
+});
+
+// Login
+export const loginRequest = creds => ({
+  type: LOGIN_REQUEST.BASE,
+  payload: { creds },
+});
+
+export const loginRequestBegin = () => ({
+  type: LOGIN_REQUEST.BEGIN,
+});
+
+export const loginRequestSuccess = (redirectUrl, success) => ({
+  type: LOGIN_REQUEST.SUCCESS,
+  payload: { redirectUrl, success },
+});
+
+export const loginRequestFailure = (loginError) => ({
+  type: LOGIN_REQUEST.FAILURE,
+  payload: { loginError },
+});
+
+export const dismissPasswordResetBanner = () => ({
+  type: DISMISS_PASSWORD_RESET_BANNER,
+});

package/src/login/data/constants.js

@@ -0,0 +1,20 @@
+// Login Error Codes
+export const INACTIVE_USER = 'inactive-user';
+export const INTERNAL_SERVER_ERROR = 'internal-server-error';
+export const INVALID_FORM = 'invalid-form';
+export const NON_COMPLIANT_PASSWORD_EXCEPTION = 'NonCompliantPasswordException';
+export const FORBIDDEN_REQUEST = 'forbidden-request';
+export const FAILED_LOGIN_ATTEMPT = 'failed-login-attempt';
+export const ACCOUNT_LOCKED_OUT = 'account-locked-out';
+export const INCORRECT_EMAIL_PASSWORD = 'incorrect-email-or-password';
+export const NUDGE_PASSWORD_CHANGE = 'nudge-password-change';
+export const REQUIRE_PASSWORD_CHANGE = 'require-password-change';
+export const ALLOWED_DOMAIN_LOGIN_ERROR = 'allowed-domain-login-error';
+export const TPA_AUTHENTICATION_FAILURE = 'tpa-authentication-failure';
+
+// Account Activation Message
+export const ACCOUNT_ACTIVATION_MESSAGE = {
+  INFO: 'info',
+  SUCCESS: 'success',
+  ERROR: 'error',
+};