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

package/src/common-components/InstitutionLogistration.jsx

@@ -0,0 +1,102 @@
+import { getSiteConfig, useIntl } from '@openedx/frontend-base';
+import { Button, Hyperlink, Icon } from '@openedx/paragon';
+import { Institution } from '@openedx/paragon/icons';
+import PropTypes from 'prop-types';
+
+import messages from './messages';
+
+/**
+ * This component renders the Institution login button
+ * */
+export const RenderInstitutionButton = props => {
+  const { onSubmitHandler, buttonTitle } = props;
+
+  return (
+    <Button
+      className="btn-sm text-body p-0 mb-4 border-0"
+      variant="link"
+      data-event-name="institution_login"
+      onClick={onSubmitHandler}
+    >
+      <Icon src={Institution} className="institute-icon" />
+      {buttonTitle}
+    </Button>
+  );
+};
+
+/**
+ * This component renders the page list of available institutions for login
+ * */
+const InstitutionLogistration = props => {
+  const lmsBaseUrl = getSiteConfig().lmsBaseUrl;
+  const { formatMessage } = useIntl();
+  const {
+    secondaryProviders,
+    headingTitle,
+  } = props;
+
+  return (
+    <>
+      <div className="d-flex justify-content-left mb-4 mt-2">
+        <div className="flex-column">
+          <h4 className="mb-2 font-weight-bold institutions__heading">
+            {headingTitle}
+          </h4>
+          <p className="mb-2">
+            {formatMessage(messages['institution.login.page.sub.heading'])}
+          </p>
+        </div>
+      </div>
+      <div className="mb-5">
+        <table className="pgn__data-table table-striped table-borderless">
+          <tbody>
+            {secondaryProviders.map(provider => (
+              <tr key={provider} className="pgn__data-table-row">
+                <td>
+                  <Hyperlink
+                    className="btn nav-item p-0 mb-1 institutions--provider-link"
+                    destination={lmsBaseUrl + provider.loginUrl}
+                  >
+                    {provider.name}
+                  </Hyperlink>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </>
+  );
+};
+
+const LogistrationDefaultProps = {
+  secondaryProviders: [],
+  buttonTitle: '',
+};
+const LogistrationProps = {
+  secondaryProviders: PropTypes.arrayOf(PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    loginUrl: PropTypes.string.isRequired,
+  })),
+};
+
+RenderInstitutionButton.propTypes = {
+  ...LogistrationProps,
+  buttonTitle: PropTypes.string,
+  onSubmitHandler: PropTypes.func.isRequired,
+
+};
+RenderInstitutionButton.defaultProps = {
+  ...LogistrationDefaultProps,
+};
+
+InstitutionLogistration.propTypes = {
+  ...LogistrationProps,
+  headingTitle: PropTypes.string,
+};
+InstitutionLogistration.defaultProps = {
+  ...LogistrationDefaultProps,
+  headingTitle: '',
+};
+
+export default InstitutionLogistration;

package/src/common-components/NotFoundPage.jsx

@@ -0,0 +1,15 @@
+import { FormattedMessage } from '@openedx/frontend-base';
+
+const NotFoundPage = () => (
+  <div className="container-fluid d-flex py-5 justify-content-center align-items-start text-center">
+    <p className="my-0 py-5 text-muted mw-32em">
+      <FormattedMessage
+        id="error.notfound.message"
+        defaultMessage="The page you're looking for is unavailable or there's an error in the URL. Please check the URL and try again."
+        description="error message when a page does not exist"
+      />
+    </p>
+  </div>
+);
+
+export default NotFoundPage;

package/src/common-components/PasswordField.jsx

@@ -0,0 +1,175 @@
+import { useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { useIntl } from '@openedx/frontend-base';
+import {
+  Form, Icon, IconButton, OverlayTrigger, Tooltip, useToggle,
+} from '@openedx/paragon';
+import {
+  Check, Remove, Visibility, VisibilityOff,
+} from '@openedx/paragon/icons';
+import PropTypes from 'prop-types';
+
+import { LETTER_REGEX, NUMBER_REGEX } from '../data/constants';
+import { clearRegistrationBackendError, fetchRealtimeValidations } from '../register/data/actions';
+import { validatePasswordField } from '../register/data/utils';
+import messages from './messages';
+
+const PasswordField = (props) => {
+  const { formatMessage } = useIntl();
+  const dispatch = useDispatch();
+
+  const validationApiRateLimited = useSelector(state => state.register.validationApiRateLimited);
+  const [isPasswordHidden, setHiddenTrue, setHiddenFalse] = useToggle(true);
+  const [showTooltip, setShowTooltip] = useState(false);
+
+  const handleBlur = (e) => {
+    const { name, value } = e.target;
+    if (name === props.name && e.relatedTarget?.name === 'passwordIcon') {
+      return; // Do not run validations on password icon click
+    }
+
+    let passwordValue = value;
+    if (name === 'passwordIcon') {
+      // To validate actual password value when onBlur is triggered by focusing out the password icon
+      passwordValue = props.value;
+    }
+
+    if (props.handleBlur) {
+      props.handleBlur({
+        target: {
+          name: props.name,
+          value: passwordValue,
+        },
+      });
+    }
+
+    setShowTooltip(props.showRequirements && false);
+    if (props.handleErrorChange) { // If rendering from register page
+      const fieldError = validatePasswordField(passwordValue, formatMessage);
+      if (fieldError) {
+        props.handleErrorChange('password', fieldError);
+      } else if (!validationApiRateLimited) {
+        dispatch(fetchRealtimeValidations({ password: passwordValue }));
+      }
+    }
+  };
+
+  const handleFocus = (e) => {
+    if (e.target?.name === 'passwordIcon') {
+      return; // Do not clear error on password icon focus
+    }
+
+    if (props.handleFocus) {
+      props.handleFocus(e);
+    }
+    if (props.handleErrorChange) {
+      props.handleErrorChange('password', '');
+      dispatch(clearRegistrationBackendError('password'));
+    }
+    setTimeout(() => setShowTooltip(props.showRequirements && true), 150);
+  };
+
+  const HideButton = (
+    <IconButton
+      onFocus={handleFocus}
+      onBlur={handleBlur}
+      name="passwordIcon"
+      src={VisibilityOff}
+      iconAs={Icon}
+      onClick={setHiddenTrue}
+      size="sm"
+      variant="secondary"
+      alt={formatMessage(messages['hide.password'])}
+    />
+  );
+
+  const ShowButton = (
+    <IconButton
+      onFocus={handleFocus}
+      onBlur={handleBlur}
+      name="passwordIcon"
+      src={Visibility}
+      iconAs={Icon}
+      onClick={setHiddenFalse}
+      size="sm"
+      variant="secondary"
+      alt={formatMessage(messages['show.password'])}
+    />
+  );
+
+  const placement = window.innerWidth < 768 ? 'top' : 'left';
+  const tooltip = (
+    <Tooltip id={`password-requirement-${placement}`}>
+      <span id="letter-check" className="d-flex align-items-center">
+        {LETTER_REGEX.test(props.value) ? <Icon className="text-success mr-1" src={Check} /> : <Icon className="mr-1 text-light-700" src={Remove} />}
+        {formatMessage(messages['one.letter'])}
+      </span>
+      <span id="number-check" className="d-flex align-items-center">
+        {NUMBER_REGEX.test(props.value) ? <Icon className="text-success mr-1" src={Check} /> : <Icon className="mr-1 text-light-700" src={Remove} />}
+        {formatMessage(messages['one.number'])}
+      </span>
+      <span id="characters-check" className="d-flex align-items-center">
+        {props.value.length >= 8 ? <Icon className="text-success mr-1" src={Check} /> : <Icon className="mr-1 text-light-700" src={Remove} />}
+        {formatMessage(messages['eight.characters'])}
+      </span>
+    </Tooltip>
+  );
+
+  return (
+    <Form.Group controlId={props.name} isInvalid={props.errorMessage !== ''}>
+      <OverlayTrigger key="tooltip" placement={placement} overlay={tooltip} show={showTooltip}>
+        <Form.Control
+          as="input"
+          className="form-group__form-field"
+          type={isPasswordHidden ? 'password' : 'text'}
+          name={props.name}
+          value={props.value}
+          autoComplete={props.autoComplete}
+          aria-invalid={props.errorMessage !== ''}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          onChange={props.handleChange}
+          controlClassName={props.borderClass}
+          trailingElement={isPasswordHidden ? ShowButton : HideButton}
+          floatingLabel={props.floatingLabel}
+        />
+      </OverlayTrigger>
+      {props.errorMessage !== '' && (
+        <Form.Control.Feedback key="error" className="form-text-size" hasIcon={false} feedback-for={props.name} type="invalid">
+          {props.errorMessage}
+          {props.showScreenReaderText && <span className="sr-only">{formatMessage(messages['password.sr.only.helping.text'])}</span>}
+        </Form.Control.Feedback>
+      )}
+    </Form.Group>
+  );
+};
+
+PasswordField.defaultProps = {
+  borderClass: '',
+  errorMessage: '',
+  handleBlur: null,
+  handleFocus: null,
+  handleChange: () => {},
+  handleErrorChange: null,
+  showRequirements: true,
+  showScreenReaderText: true,
+  autoComplete: null,
+};
+
+PasswordField.propTypes = {
+  borderClass: PropTypes.string,
+  errorMessage: PropTypes.string,
+  floatingLabel: PropTypes.string.isRequired,
+  handleBlur: PropTypes.func,
+  handleFocus: PropTypes.func,
+  handleChange: PropTypes.func,
+  handleErrorChange: PropTypes.func,
+  name: PropTypes.string.isRequired,
+  showRequirements: PropTypes.bool,
+  value: PropTypes.string.isRequired,
+  autoComplete: PropTypes.string,
+  showScreenReaderText: PropTypes.bool,
+};
+
+export default PasswordField;

package/src/common-components/RedirectLogistration.jsx

@@ -0,0 +1,94 @@
+import { useAppConfig, getSiteConfig } from '@openedx/frontend-base';
+import PropTypes from 'prop-types';
+import { Navigate } from 'react-router-dom';
+
+import {
+  AUTHN_PROGRESSIVE_PROFILING, REDIRECT,
+} from '../data/constants';
+import { setCookie } from '../data/utils';
+
+const RedirectLogistration = (props) => {
+  const {
+    authenticatedUser,
+    finishAuthUrl,
+    redirectUrl,
+    redirectToProgressiveProfilingPage,
+    success,
+    optionalFields,
+    educationLevel,
+    userId,
+    registrationEmbedded,
+    host,
+  } = props;
+  let finalRedirectUrl = '';
+
+  if (success) {
+    // If we're in a third party auth pipeline, we must complete the pipeline
+    // once user has successfully logged in. Otherwise, redirect to the specified redirect url.
+    // Note: For multiple enterprise use case, we need to make sure that user first visits the
+    // enterprise selection page and then complete the auth workflow
+    if (finishAuthUrl && !redirectUrl.includes(finishAuthUrl)) {
+      finalRedirectUrl = getSiteConfig().lmsBaseUrl + finishAuthUrl;
+    } else {
+      finalRedirectUrl = redirectUrl;
+    }
+
+    // Redirect to Progressive Profiling after successful registration
+    if (redirectToProgressiveProfilingPage) {
+      // TODO: Do we still need this cookie?
+      setCookie('van-504-returning-user', true, useAppConfig().SESSION_COOKIE_DOMAIN);
+
+      if (registrationEmbedded) {
+        window.parent.postMessage({
+          action: REDIRECT,
+          redirectUrl: useAppConfig().POST_REGISTRATION_REDIRECT_URL,
+        }, host);
+        return null;
+      }
+      const registrationResult = { redirectUrl: finalRedirectUrl, success };
+      return (
+        <Navigate
+          to={AUTHN_PROGRESSIVE_PROFILING}
+          state={{
+            registrationResult,
+            optionalFields,
+            authenticatedUser,
+          }}
+          replace
+        />
+      );
+    }
+
+    window.location.href = finalRedirectUrl;
+  }
+
+  return null;
+};
+
+RedirectLogistration.defaultProps = {
+  authenticatedUser: {},
+  educationLevel: null,
+  finishAuthUrl: null,
+  success: false,
+  redirectUrl: '',
+  redirectToProgressiveProfilingPage: false,
+  optionalFields: {},
+  userId: null,
+  registrationEmbedded: false,
+  host: '',
+};
+
+RedirectLogistration.propTypes = {
+  authenticatedUser: PropTypes.shape({}),
+  educationLevel: PropTypes.string,
+  finishAuthUrl: PropTypes.string,
+  success: PropTypes.bool,
+  redirectUrl: PropTypes.string,
+  redirectToProgressiveProfilingPage: PropTypes.bool,
+  optionalFields: PropTypes.shape({}),
+  userId: PropTypes.number,
+  registrationEmbedded: PropTypes.bool,
+  host: PropTypes.string,
+};
+
+export default RedirectLogistration;

package/src/common-components/RegisterFaIcons.jsx

@@ -0,0 +1,8 @@
+import { library } from '@fortawesome/fontawesome-svg-core';
+import {
+  faApple, faFacebook, faGoogle, faMicrosoft,
+} from '@fortawesome/free-brands-svg-icons';
+
+export default function registerIcons() {
+  library.add(faApple, faFacebook, faGoogle, faMicrosoft);
+}

package/src/common-components/SocialAuthProviders.jsx

@@ -0,0 +1,75 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { getSiteConfig, useIntl } from '@openedx/frontend-base';
+import { Icon } from '@openedx/paragon';
+import { Login } from '@openedx/paragon/icons';
+import PropTypes from 'prop-types';
+
+import { LOGIN_PAGE, SUPPORTED_ICON_CLASSES } from '../data/constants';
+import messages from './messages';
+
+const SocialAuthProviders = (props) => {
+  const { formatMessage } = useIntl();
+  const { referrer, socialAuthProviders } = props;
+
+  function handleSubmit(e) {
+    e.preventDefault();
+
+    const url = e.currentTarget.dataset.providerUrl;
+    window.location.href = getSiteConfig().lmsBaseUrl + url;
+  }
+
+  const socialAuth = socialAuthProviders.map((provider, index) => (
+    <button
+      id={provider.id}
+      key={provider.id}
+      type="button"
+      className={`btn-social btn-${provider.id} ${index % 2 === 0 ? 'mr-3' : ''}`}
+      data-provider-url={referrer === LOGIN_PAGE ? provider.loginUrl : provider.registerUrl}
+      onClick={handleSubmit}
+    >
+      {provider.iconImage ? (
+        <div aria-hidden="true">
+          <img className="btn-tpa__image-icon" src={provider.iconImage} alt={`icon ${provider.name}`} />
+        </div>
+      )
+        : (
+          <div className="btn-tpa__font-container" aria-hidden="true">
+            {SUPPORTED_ICON_CLASSES.includes(provider.iconClass) ? (
+              <FontAwesomeIcon icon={['fab', provider.iconClass]} />)
+              : (
+                <Icon className="h-75" src={Login} />
+              )}
+          </div>
+        )}
+      <span id="provider-name" className="notranslate mr-auto pl-2" aria-hidden="true">{provider.name}</span>
+      <span className="sr-only">
+        {referrer === LOGIN_PAGE
+          ? formatMessage(messages['sso.sign.in.with'], { providerName: provider.name })
+          : formatMessage(messages['sso.create.account.using'], { providerName: provider.name })}
+      </span>
+    </button>
+  ));
+
+  // eslint-disable-next-line react/jsx-no-useless-fragment
+  return <>{socialAuth}</>;
+};
+
+SocialAuthProviders.defaultProps = {
+  referrer: LOGIN_PAGE,
+  socialAuthProviders: [],
+};
+
+SocialAuthProviders.propTypes = {
+  referrer: PropTypes.string,
+  socialAuthProviders: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string,
+    name: PropTypes.string,
+    iconClass: PropTypes.string,
+    iconImage: PropTypes.string,
+    loginUrl: PropTypes.string,
+    registerUrl: PropTypes.string,
+    skipRegistrationForm: PropTypes.bool,
+  })),
+};
+
+export default SocialAuthProviders;

package/src/common-components/ThirdPartyAuth.jsx

@@ -0,0 +1,123 @@
+import { useAppConfig, getSiteConfig, useIntl } from '@openedx/frontend-base';
+import {
+  Hyperlink, Icon,
+} from '@openedx/paragon';
+import { Institution } from '@openedx/paragon/icons';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import Skeleton from 'react-loading-skeleton';
+
+import {
+  ENTERPRISE_LOGIN_URL, LOGIN_PAGE, PENDING_STATE, REGISTER_PAGE,
+} from '../data/constants';
+import messages from './messages';
+
+import {
+  RenderInstitutionButton,
+  SocialAuthProviders,
+} from './index';
+
+/**
+ * This component renders the Single sign-on (SSO) buttons for the providers passed.
+ * */
+const ThirdPartyAuth = (props) => {
+  const { formatMessage } = useIntl();
+  const {
+    providers,
+    secondaryProviders,
+    currentProvider,
+    handleInstitutionLogin,
+    thirdPartyAuthApiStatus,
+    isLoginPage,
+  } = props;
+  const isInstitutionAuthActive = !!secondaryProviders.length && !currentProvider;
+  const isSocialAuthActive = !!providers.length && !currentProvider;
+  const isEnterpriseLoginDisabled = useAppConfig().DISABLE_ENTERPRISE_LOGIN;
+  const enterpriseLoginURL = getSiteConfig().lmsBaseUrl + ENTERPRISE_LOGIN_URL;
+  const isThirdPartyAuthActive = isSocialAuthActive || (isEnterpriseLoginDisabled && isInstitutionAuthActive);
+
+  return (
+    <>
+      {((isEnterpriseLoginDisabled && isInstitutionAuthActive) || isSocialAuthActive) && (
+        <div className="mt-4 mb-3 h4">
+          {isLoginPage
+            ? formatMessage(messages['login.other.options.heading'])
+            : formatMessage(messages['registration.other.options.heading'])}
+        </div>
+      )}
+      {(isLoginPage && !isEnterpriseLoginDisabled && isSocialAuthActive) && (
+        <Hyperlink
+          className={classNames(
+            'btn btn-link btn-sm text-body p-0',
+            { 'mb-0': thirdPartyAuthApiStatus === PENDING_STATE },
+            { 'mb-4': thirdPartyAuthApiStatus !== PENDING_STATE },
+          )}
+          destination={enterpriseLoginURL}
+        >
+          <Icon src={Institution} className="institute-icon" />
+          {formatMessage(messages['enterprise.login.btn.text'])}
+        </Hyperlink>
+      )}
+
+      {thirdPartyAuthApiStatus === PENDING_STATE && isThirdPartyAuthActive ? (
+        <div className="mt-4">
+          <Skeleton className="tpa-skeleton" height={36} count={2} />
+        </div>
+      ) : (
+        <>
+          {(isEnterpriseLoginDisabled && isInstitutionAuthActive) && (
+            <RenderInstitutionButton
+              onSubmitHandler={handleInstitutionLogin}
+              buttonTitle={formatMessage(messages['institution.login.button'])}
+            />
+          )}
+          {isSocialAuthActive && (
+            <div className="row m-0">
+              <SocialAuthProviders
+                socialAuthProviders={providers}
+                referrer={isLoginPage ? LOGIN_PAGE : REGISTER_PAGE}
+              />
+            </div>
+          )}
+        </>
+      )}
+    </>
+  );
+};
+
+ThirdPartyAuth.defaultProps = {
+  currentProvider: null,
+  providers: [],
+  secondaryProviders: [],
+  thirdPartyAuthApiStatus: PENDING_STATE,
+  isLoginPage: false,
+};
+
+ThirdPartyAuth.propTypes = {
+  currentProvider: PropTypes.string,
+  handleInstitutionLogin: PropTypes.func.isRequired,
+  providers: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.string,
+      name: PropTypes.string,
+      iconClass: PropTypes.string,
+      iconImage: PropTypes.string,
+      loginUrl: PropTypes.string,
+      registerUrl: PropTypes.string,
+    }),
+  ),
+  secondaryProviders: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.string,
+      name: PropTypes.string,
+      iconClass: PropTypes.string,
+      iconImage: PropTypes.string,
+      loginUrl: PropTypes.string,
+      registerUrl: PropTypes.string,
+    }),
+  ),
+  thirdPartyAuthApiStatus: PropTypes.string,
+  isLoginPage: PropTypes.bool,
+};
+
+export default ThirdPartyAuth;

package/src/common-components/ThirdPartyAuthAlert.jsx

@@ -0,0 +1,49 @@
+import { getSiteConfig, useIntl } from '@openedx/frontend-base';
+import { Alert } from '@openedx/paragon';
+import PropTypes from 'prop-types';
+
+import { LOGIN_PAGE, REGISTER_PAGE } from '../data/constants';
+import messages from './messages';
+
+const ThirdPartyAuthAlert = (props) => {
+  const { formatMessage } = useIntl();
+  const { currentProvider, referrer } = props;
+  const platformName = getSiteConfig().siteName;
+  let message;
+
+  if (referrer === LOGIN_PAGE) {
+    message = formatMessage(messages['login.third.party.auth.account.not.linked'], { currentProvider, platformName });
+  } else {
+    message = formatMessage(messages['register.third.party.auth.account.not.linked'], { currentProvider, platformName });
+  }
+
+  if (!currentProvider) {
+    return null;
+  }
+
+  return (
+    <>
+      <Alert id="tpa-alert" className={referrer === REGISTER_PAGE ? 'alert-success mt-n2 mb-5' : 'alert-warning mt-n2 mb-5'}>
+        {referrer === REGISTER_PAGE ? (
+          <Alert.Heading>{formatMessage(messages['tpa.alert.heading'])}</Alert.Heading>
+        ) : null}
+        <p>{message}</p>
+      </Alert>
+      {referrer === REGISTER_PAGE ? (
+        <h4 className="mt-4 mb-4">{formatMessage(messages['registration.using.tpa.form.heading'])}</h4>
+      ) : null}
+    </>
+  );
+};
+
+ThirdPartyAuthAlert.defaultProps = {
+  currentProvider: '',
+  referrer: LOGIN_PAGE,
+};
+
+ThirdPartyAuthAlert.propTypes = {
+  currentProvider: PropTypes.string,
+  referrer: PropTypes.string,
+};
+
+export default ThirdPartyAuthAlert;

package/src/common-components/UnAuthOnlyRoute.jsx

@@ -0,0 +1,41 @@
+import { useEffect, useState } from 'react';
+
+import { fetchAuthenticatedUser, getAuthenticatedUser, getSiteConfig } from '@openedx/frontend-base';
+import PropTypes from 'prop-types';
+
+import {
+  DEFAULT_REDIRECT_URL,
+} from '../data/constants';
+
+/**
+ * This wrapper redirects the requester to our default redirect url if they are
+ * already authenticated.
+ */
+const UnAuthOnlyRoute = ({ children }) => {
+  const [authUser, setAuthUser] = useState({});
+  const [isReady, setIsReady] = useState(false);
+
+  useEffect(() => {
+    fetchAuthenticatedUser({ forceRefresh: !!getAuthenticatedUser() }).then((authenticatedUser) => {
+      setAuthUser(authenticatedUser);
+      setIsReady(true);
+    });
+  }, []);
+
+  if (isReady) {
+    if (authUser && authUser.username) {
+      global.location.href = getSiteConfig().lmsBaseUrl.concat(DEFAULT_REDIRECT_URL);
+      return null;
+    }
+
+    return children;
+  }
+
+  return null;
+};
+
+UnAuthOnlyRoute.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export default UnAuthOnlyRoute;