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

package/src/common-components/InstitutionLogistration.jsx

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

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

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

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

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

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

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

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

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