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

package/src/base-container/components/default-layout/messages.js

@@ -1,16 +0,0 @@
-import { defineMessages } from '@openedx/frontend-base';
-
-const messages = defineMessages({
-  'start.learning': {
-    id: 'start.learning',
-    defaultMessage: 'Start learning',
-    description: 'Header text for logistration MFE pages',
-  },
-  'with.site.name': {
-    id: 'with.site.name',
-    defaultMessage: 'with {siteName}',
-    description: 'Header text with site name for logistration MFE pages',
-  },
-});
-
-export default messages;

package/src/base-container/components/image-layout/ExtraSmallLayout.jsx

@@ -1,31 +0,0 @@
-import { useAppConfig, getSiteConfig, useIntl } from '@openedx/frontend-base';
-import { Hyperlink, Image } from '@openedx/paragon';
-
-import messages from './messages';
-
-const ExtraSmallLayout = () => {
-  const { formatMessage } = useIntl();
-
-  return (
-    <span
-      className="w-100 bg-primary-500 banner__image extra-small-layout"
-      style={{ backgroundImage: `url(${useAppConfig().BANNER_IMAGE_EXTRA_SMALL})` }}
-    >
-      <Hyperlink destination={useAppConfig().MARKETING_SITE_BASE_URL}>
-        <Image className="company-logo" alt={getSiteConfig().siteName} src={useAppConfig().LOGO_WHITE_URL} />
-      </Hyperlink>
-      <div className="ml-4.5 mr-1 pb-3.5 pt-3.5">
-        <h1 className="banner__heading">
-          <span className="text-light-500">
-            {formatMessage(messages['your.career.turning.point'])}{' '}
-          </span>
-          <span className="text-warning-300">
-            {formatMessage(messages['is.here'])}
-          </span>
-        </h1>
-      </div>
-    </span>
-  );
-};
-
-export default ExtraSmallLayout;

package/src/base-container/components/image-layout/LargeLayout.jsx

@@ -1,32 +0,0 @@
-import { useAppConfig, getSiteConfig, useIntl } from '@openedx/frontend-base';
-import { Hyperlink, Image } from '@openedx/paragon';
-
-import './index.scss';
-import messages from './messages';
-
-const LargeLayout = () => {
-  const { formatMessage } = useIntl();
-
-  return (
-    <div
-      className="w-50 bg-primary-500 banner__image large-layout"
-      style={{ backgroundImage: `url(${useAppConfig().BANNER_IMAGE_LARGE})` }}
-    >
-      <Hyperlink destination={useAppConfig().MARKETING_SITE_BASE_URL}>
-        <Image className="company-logo position-absolute" alt={getSiteConfig().siteName} src={useAppConfig().LOGO_WHITE_URL} />
-      </Hyperlink>
-      <div className="min-vh-100 p-5 d-flex align-items-end">
-        <h1 className="display-2 mw-sm mb-3 d-flex flex-column flex-shrink-0 justify-content-center">
-          <span className="text-light-500">
-            {formatMessage(messages['your.career.turning.point'])}
-          </span>
-          <span className="text-warning-300">
-            {formatMessage(messages['is.here'])}
-          </span>
-        </h1>
-      </div>
-    </div>
-  );
-};
-
-export default LargeLayout;

package/src/base-container/components/image-layout/MediumLayout.jsx

@@ -1,32 +0,0 @@
-import { useAppConfig, getSiteConfig, useIntl } from '@openedx/frontend-base';
-import { Hyperlink, Image } from '@openedx/paragon';
-
-import './index.scss';
-import messages from './messages';
-
-const MediumLayout = () => {
-  const { formatMessage } = useIntl();
-
-  return (
-    <div
-      className="w-100 mb-3 bg-primary-500 banner__image medium-layout"
-      style={{ backgroundImage: `url(${useAppConfig().BANNER_IMAGE_MEDIUM})` }}
-    >
-      <Hyperlink destination={useAppConfig().MARKETING_SITE_BASE_URL}>
-        <Image className="company-logo" alt={getSiteConfig().siteName} src={useAppConfig().LOGO_WHITE_URL} />
-      </Hyperlink>
-      <div className="ml-5 pb-4 pt-4">
-        <h1 className="display-2 banner__heading">
-          <span className="text-light-500">
-            {formatMessage(messages['your.career.turning.point'])}{' '}
-          </span>
-          <span className="text-warning-300 d-inline-block">
-            {formatMessage(messages['is.here'])}
-          </span>
-        </h1>
-      </div>
-    </div>
-  );
-};
-
-export default MediumLayout;

package/src/base-container/components/image-layout/SmallLayout.jsx

@@ -1,31 +0,0 @@
-import { useAppConfig, getSiteConfig, useIntl } from '@openedx/frontend-base';
-import { Hyperlink, Image } from '@openedx/paragon';
-
-import messages from './messages';
-
-const SmallLayout = () => {
-  const { formatMessage } = useIntl();
-
-  return (
-    <span
-      className="w-100 bg-primary-500 banner__image small-layout"
-      style={{ backgroundImage: `url(${useAppConfig().BANNER_IMAGE_SMALL})` }}
-    >
-      <Hyperlink destination={useAppConfig().MARKETING_SITE_BASE_URL}>
-        <Image className="company-logo" alt={getSiteConfig().siteName} src={useAppConfig().LOGO_WHITE_URL} />
-      </Hyperlink>
-      <div className="ml-5 mr-1 pb-3.5 pt-3.5">
-        <h1 className="display-2">
-          <span className="text-light-500">
-            {formatMessage(messages['your.career.turning.point'])}{' '}
-          </span>
-          <span className="text-warning-300">
-            {formatMessage(messages['is.here'])}
-          </span>
-        </h1>
-      </div>
-    </span>
-  );
-};
-
-export default SmallLayout;

package/src/base-container/components/image-layout/messages.js

@@ -1,16 +0,0 @@
-import { defineMessages } from '@openedx/frontend-base';
-
-const messages = defineMessages({
-  'your.career.turning.point': {
-    id: 'your.career.turning.point',
-    defaultMessage: 'Your career turning point',
-    description: 'Part of the heading "Your career turning point is here." shown on Authn MFE',
-  },
-  'is.here': {
-    id: 'is.here',
-    defaultMessage: 'is here.',
-    description: 'Part of the heading "Your career turning point is here." shown on Authn MFE',
-  },
-});
-
-export default messages;

package/src/base-container/components/welcome-page-layout/LargeLayout.jsx

@@ -1,46 +0,0 @@
-import { useAppConfig, getSiteConfig, useIntl } from '@openedx/frontend-base';
-import { Hyperlink, Image } from '@openedx/paragon';
-import PropTypes from 'prop-types';
-
-import messages from './messages';
-
-const LargeLayout = ({ fullName }) => {
-  const { formatMessage } = useIntl();
-
-  return (
-    <div className="w-50 d-flex">
-      <div className="col-md-10 bg-light-200 p-0">
-        <Hyperlink destination={useAppConfig().MARKETING_SITE_BASE_URL}>
-          <Image className="logo position-absolute" alt={getSiteConfig().siteName} src={useAppConfig().LOGO_URL} />
-        </Hyperlink>
-        <div className="min-vh-100 d-flex align-items-center">
-          <div className="large-screen-left-container mr-n4.5 large-yellow-line mt-5" />
-          <div>
-            <h1 className="welcome-to-platform data-hj-suppress">
-              {formatMessage(messages['welcome.to.platform'], { siteName: getSiteConfig().siteName, fullName })}
-            </h1>
-            <h2 className="complete-your-profile">
-              {formatMessage(messages['complete.your.profile.1'])}
-              <div className="text-accent-a">
-                {formatMessage(messages['complete.your.profile.2'])}
-              </div>
-            </h2>
-          </div>
-        </div>
-      </div>
-      <div className="col-md-2 bg-white p-0">
-        <svg className="m1-n1 w-100 h-100 large-screen-svg-light" preserveAspectRatio="xMaxYMin meet">
-          <g transform="skewX(171.6)">
-            <rect x="0" y="0" height="100%" width="100%" />
-          </g>
-        </svg>
-      </div>
-    </div>
-  );
-};
-
-LargeLayout.propTypes = {
-  fullName: PropTypes.string.isRequired,
-};
-
-export default LargeLayout;

package/src/base-container/components/welcome-page-layout/MediumLayout.jsx

@@ -1,49 +0,0 @@
-import { useAppConfig, getSiteConfig, useIntl } from '@openedx/frontend-base';
-import { Hyperlink, Image } from '@openedx/paragon';
-import PropTypes from 'prop-types';
-
-import messages from './messages';
-
-const MediumLayout = ({ fullName }) => {
-  const { formatMessage } = useIntl();
-
-  return (
-    <>
-      <div className="w-100 medium-screen-top-stripe" />
-      <div className="w-100 p-0 mb-3 d-flex">
-        <div className="col-md-10 bg-light-200">
-          <Hyperlink destination={useAppConfig().MARKETING_SITE_BASE_URL}>
-            <Image className="logo" alt={getSiteConfig().siteName} src={useAppConfig().LOGO_URL} />
-          </Hyperlink>
-          <div className="d-flex align-items-center justify-content-center mb-4 ml-5">
-            <div className="medium-yellow-line mt-5 mr-n2" />
-            <div>
-              <h1 className="h3 data-hj-suppress mw-320">
-                {formatMessage(messages['welcome.to.platform'], { siteName: getSiteConfig().siteName, fullName })}
-              </h1>
-              <h2 className="display-1">
-                {formatMessage(messages['complete.your.profile.1'])}
-                <div className="text-accent-a">
-                  {formatMessage(messages['complete.your.profile.2'])}
-                </div>
-              </h2>
-            </div>
-          </div>
-        </div>
-        <div className="col-md-2 bg-white p-0">
-          <svg className="w-100 h-100 medium-screen-svg-light" preserveAspectRatio="xMaxYMin meet">
-            <g transform="skewX(168)">
-              <rect x="0" y="0" height="100%" width="100%" />
-            </g>
-          </svg>
-        </div>
-      </div>
-    </>
-  );
-};
-
-MediumLayout.propTypes = {
-  fullName: PropTypes.string.isRequired,
-};
-
-export default MediumLayout;

package/src/base-container/components/welcome-page-layout/SmallLayout.jsx

@@ -1,38 +0,0 @@
-import { useAppConfig, getSiteConfig, useIntl } from '@openedx/frontend-base';
-import { Hyperlink, Image } from '@openedx/paragon';
-import PropTypes from 'prop-types';
-
-import messages from './messages';
-
-const SmallLayout = ({ fullName }) => {
-  const { formatMessage } = useIntl();
-
-  return (
-    <div className="min-vw-100 bg-light-200">
-      <div className="col-md-12 small-screen-top-stripe" />
-      <Hyperlink destination={useAppConfig().MARKETING_SITE_BASE_URL}>
-        <Image className="logo-small" alt={getSiteConfig().siteName} src={useAppConfig().LOGO_URL} />
-      </Hyperlink>
-      <div className="d-flex align-items-center m-3.5">
-        <div className="small-yellow-line mt-4.5" />
-        <div>
-          <h1 className="h5 data-hj-suppress">
-            {formatMessage(messages['welcome.to.platform'], { siteName: getSiteConfig().siteName, fullName })}
-          </h1>
-          <h2 className="h1">
-            {formatMessage(messages['complete.your.profile.1'])}
-            <div className="text-accent-a">
-              {formatMessage(messages['complete.your.profile.2'])}
-            </div>
-          </h2>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-SmallLayout.propTypes = {
-  fullName: PropTypes.string.isRequired,
-};
-
-export default SmallLayout;

package/src/base-container/components/welcome-page-layout/messages.js

@@ -1,21 +0,0 @@
-import { defineMessages } from '@openedx/frontend-base';
-
-const messages = defineMessages({
-  'welcome.to.platform': {
-    id: 'welcome.to.platform',
-    defaultMessage: 'Welcome to {siteName}, {fullName}!',
-    description: 'Welcome message that appears on progressive profile page',
-  },
-  'complete.your.profile.1': {
-    id: 'complete.your.profile.1',
-    defaultMessage: 'Complete',
-    description: 'part of text "complete your profile"',
-  },
-  'complete.your.profile.2': {
-    id: 'complete.your.profile.2',
-    defaultMessage: 'your profile',
-    description: 'part of text "complete your profile"',
-  },
-});
-
-export default messages;

package/src/base-container/index.jsx

@@ -1,70 +0,0 @@
-import { useAppConfig } from '@openedx/frontend-base';
-import { breakpoints } from '@openedx/paragon';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import MediaQuery from 'react-responsive';
-
-import { DefaultLargeLayout, DefaultMediumLayout, DefaultSmallLayout } from './components/default-layout';
-import {
-  ImageExtraSmallLayout, ImageLargeLayout, ImageMediumLayout, ImageSmallLayout,
-} from './components/image-layout';
-import { AuthLargeLayout, AuthMediumLayout, AuthSmallLayout } from './components/welcome-page-layout';
-
-const BaseContainer = ({ children, showWelcomeBanner, fullName }) => {
-  const enableImageLayout = useAppConfig().ENABLE_IMAGE_LAYOUT;
-
-  if (enableImageLayout) {
-    return (
-      <div className="layout">
-        <MediaQuery maxWidth={breakpoints.extraSmall.maxWidth - 1}>
-          {showWelcomeBanner ? <AuthSmallLayout fullName={fullName} /> : <ImageExtraSmallLayout />}
-        </MediaQuery>
-        <MediaQuery minWidth={breakpoints.small.minWidth} maxWidth={breakpoints.small.maxWidth - 1}>
-          {showWelcomeBanner ? <AuthSmallLayout fullName={fullName} /> : <ImageSmallLayout />}
-        </MediaQuery>
-        <MediaQuery minWidth={breakpoints.medium.minWidth} maxWidth={breakpoints.large.maxWidth - 1}>
-          {showWelcomeBanner ? <AuthMediumLayout fullName={fullName} /> : <ImageMediumLayout />}
-        </MediaQuery>
-        <MediaQuery minWidth={breakpoints.extraLarge.minWidth}>
-          {showWelcomeBanner ? <AuthLargeLayout fullName={fullName} /> : <ImageLargeLayout />}
-        </MediaQuery>
-        <div className={classNames('content', { 'align-items-center mt-0': showWelcomeBanner })}>
-          {children}
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <>
-      <div className="col-md-12 extra-large-screen-top-stripe" />
-      <div className="layout">
-        <MediaQuery maxWidth={breakpoints.small.maxWidth - 1}>
-          {showWelcomeBanner ? <AuthSmallLayout fullName={fullName} /> : <DefaultSmallLayout />}
-        </MediaQuery>
-        <MediaQuery minWidth={breakpoints.medium.minWidth} maxWidth={breakpoints.large.maxWidth - 1}>
-          {showWelcomeBanner ? <AuthMediumLayout fullName={fullName} /> : <DefaultMediumLayout />}
-        </MediaQuery>
-        <MediaQuery minWidth={breakpoints.extraLarge.minWidth}>
-          {showWelcomeBanner ? <AuthLargeLayout fullName={fullName} /> : <DefaultLargeLayout />}
-        </MediaQuery>
-        <div className={classNames('content', { 'align-items-center mt-0': showWelcomeBanner })}>
-          {children}
-        </div>
-      </div>
-    </>
-  );
-};
-
-BaseContainer.defaultProps = {
-  showWelcomeBanner: false,
-  fullName: null,
-};
-
-BaseContainer.propTypes = {
-  children: PropTypes.node.isRequired,
-  showWelcomeBanner: PropTypes.bool,
-  fullName: PropTypes.string,
-};
-
-export default BaseContainer;

package/src/base-container/tests/BaseContainer.test.jsx

@@ -1,44 +0,0 @@
-import { IntlProvider, mergeAppConfig } from '@openedx/frontend-base';
-import { render } from '@testing-library/react';
-import { Context as ResponsiveContext } from 'react-responsive';
-
-import BaseContainer from '../index';
-import { appId } from '../../constants';
-
-const LargeScreen = {
-  wrappingComponent: ResponsiveContext.Provider,
-  wrappingComponentProps: { value: { width: 1200 } },
-};
-
-describe('Base component tests', () => {
-  it('should show default layout', () => {
-    const { container } = render(
-      <IntlProvider locale="en">
-        <BaseContainer>
-          <div>Test Content</div>
-        </BaseContainer>
-      </IntlProvider>,
-      LargeScreen,
-    );
-
-    expect(container.querySelector('.banner__image')).toBeNull();
-    expect(container.querySelector('.large-screen-svg-primary')).toBeDefined();
-  });
-
-  it('renders Image layout when ENABLE_IMAGE_LAYOUT configuration is enabled', () => {
-    mergeAppConfig(appId, {
-      ENABLE_IMAGE_LAYOUT: true,
-    });
-
-    const { container } = render(
-      <IntlProvider locale="en">
-        <BaseContainer showWelcomeBanner={false}>
-          <div>Test Content</div>
-        </BaseContainer>
-      </IntlProvider>,
-      LargeScreen,
-    );
-
-    expect(container.querySelector('.banner__image')).toBeDefined();
-  });
-});

package/src/common-components/EnterpriseSSO.jsx

@@ -1,110 +0,0 @@
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { useAppConfig, getSiteConfig, useIntl } from '@openedx/frontend-base';
-import {
-  Button, Form,
-  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';
-
-/**
- * This component renders the Single sign-on (SSO) button only for the tpa provider passed
- * */
-const EnterpriseSSO = (props) => {
-  const { formatMessage } = useIntl();
-  const tpaProvider = props.provider;
-  const hideRegistrationLink = useAppConfig().ALLOW_PUBLIC_ACCOUNT_CREATION === false
-    || useAppConfig().SHOW_REGISTRATION_LINKS === false;
-
-  const handleSubmit = (e, url) => {
-    e.preventDefault();
-    window.location.href = getSiteConfig().lmsBaseUrl + url;
-  };
-
-  const handleClick = (e) => {
-    e.preventDefault();
-    window.location.href = LOGIN_PAGE;
-  };
-
-  if (tpaProvider) {
-    return (
-      <div className="d-flex justify-content-center m-4">
-        <div className="d-flex flex-column">
-          <div className="mw-450">
-            <Form className="m-0">
-              <p>{formatMessage(messages['enterprisetpa.title.heading'], { providerName: tpaProvider.name })}</p>
-              <Button
-                id={tpaProvider.id}
-                key={tpaProvider.id}
-                type="submit"
-                variant="link"
-                className={`btn-tpa btn-${tpaProvider.id}`}
-                onClick={(e) => handleSubmit(e, tpaProvider.loginUrl)}
-              >
-                {tpaProvider.iconImage ? (
-                  <div aria-hidden="true">
-                    <img className="btn-tpa__image-icon" src={tpaProvider.iconImage} alt={`icon ${tpaProvider.name}`} />
-                    <span className="pl-2" aria-hidden="true">{tpaProvider.name}</span>
-                  </div>
-                )
-                  : (
-                    <>
-                      <div className="btn-tpa__font-container" aria-hidden="true">
-                        {SUPPORTED_ICON_CLASSES.includes(tpaProvider.iconClass) ? (
-                          <FontAwesomeIcon icon={['fab', tpaProvider.iconClass]} />)
-                          : (
-                            <Icon className="h-75" src={Login} />
-                          )}
-                      </div>
-                      <span className="pl-2" aria-hidden="true">{tpaProvider.name}</span>
-                    </>
-                  )}
-              </Button>
-              <div className="mb-4" />
-              <Button
-                type="submit"
-                id="other-ways-to-sign-in"
-                variant="outline-primary"
-                state="Complete"
-                className="w-100"
-                onClick={(e) => handleClick(e)}
-              >
-                {hideRegistrationLink
-                  ? formatMessage(messages['enterprisetpa.login.button.text.public.account.creation.disabled'])
-                  : formatMessage(messages['enterprisetpa.login.button.text'])}
-              </Button>
-            </Form>
-          </div>
-        </div>
-      </div>
-    );
-  }
-  return <div />;
-};
-
-EnterpriseSSO.defaultProps = {
-  provider: {
-    id: '',
-    name: '',
-    iconClass: '',
-    iconImage: '',
-    loginUrl: '',
-    registerUrl: '',
-  },
-};
-
-EnterpriseSSO.propTypes = {
-  provider: PropTypes.shape({
-    id: PropTypes.string,
-    name: PropTypes.string,
-    iconClass: PropTypes.string,
-    iconImage: PropTypes.string,
-    loginUrl: PropTypes.string,
-    registerUrl: PropTypes.string,
-  }),
-};
-
-export default EnterpriseSSO;

package/src/common-components/FormGroup.jsx

@@ -1,106 +0,0 @@
-import { useState } from 'react';
-
-import {
-  Form, TransitionReplace,
-} from '@openedx/paragon';
-import PropTypes from 'prop-types';
-
-const FormGroup = (props) => {
-  const [hasFocus, setHasFocus] = useState(false);
-
-  const handleFocus = (e) => {
-    setHasFocus(true);
-    if (props.handleFocus) { props.handleFocus(e); }
-  };
-  const handleClick = (e) => {
-    if (props.handleClick) { props.handleClick(e); }
-  };
-  const handleOnBlur = (e) => {
-    setHasFocus(false);
-    if (props.handleBlur) { props.handleBlur(e); }
-  };
-
-  return (
-    <Form.Group controlId={props.name} className={props.className} isInvalid={props.errorMessage !== ''}>
-      <Form.Control
-        as={props.as}
-        readOnly={props.readOnly}
-        type={props.type}
-        aria-invalid={props.errorMessage !== ''}
-        className="form-group__form-field"
-        autoComplete={props.autoComplete}
-        spellCheck={props.spellCheck}
-        name={props.name}
-        value={props.value}
-        onFocus={handleFocus}
-        onBlur={handleOnBlur}
-        onClick={handleClick}
-        onChange={props.handleChange}
-        controlClassName={props.borderClass}
-        trailingElement={props.trailingElement}
-        floatingLabel={props.floatingLabel}
-      >
-        {props.options ? props.options() : null}
-      </Form.Control>
-      <TransitionReplace>
-        {hasFocus && props.helpText ? (
-          <Form.Control.Feedback type="default" key="help-text" className="d-block form-text-size">
-            {props.helpText.map((message, index) => (
-              <span key={`help-text-${index.toString()}`}>
-                {message}
-                <br />
-              </span>
-            ))}
-          </Form.Control.Feedback>
-        ) : <div key="empty" />}
-      </TransitionReplace>
-      {props.errorMessage !== '' && (
-        <Form.Control.Feedback key="error" className="form-text-size" hasIcon={false} feedback-for={props.name} type="invalid">{props.errorMessage}</Form.Control.Feedback>
-      )}
-      {props.children}
-    </Form.Group>
-  );
-};
-
-FormGroup.defaultProps = {
-  as: 'input',
-  autoComplete: null,
-  borderClass: '',
-  children: null,
-  className: '',
-  errorMessage: '',
-  handleBlur: null,
-  handleChange: () => {},
-  handleClick: null,
-  handleFocus: null,
-  helpText: [],
-  options: null,
-  readOnly: false,
-  spellCheck: null,
-  trailingElement: null,
-  type: 'text',
-};
-
-FormGroup.propTypes = {
-  as: PropTypes.string,
-  autoComplete: PropTypes.string,
-  borderClass: PropTypes.string,
-  children: PropTypes.element,
-  className: PropTypes.string,
-  errorMessage: PropTypes.string,
-  floatingLabel: PropTypes.string.isRequired,
-  handleBlur: PropTypes.func,
-  handleChange: PropTypes.func,
-  handleClick: PropTypes.func,
-  handleFocus: PropTypes.func,
-  helpText: PropTypes.arrayOf(PropTypes.string),
-  name: PropTypes.string.isRequired,
-  options: PropTypes.func,
-  readOnly: PropTypes.bool,
-  spellCheck: PropTypes.string,
-  trailingElement: PropTypes.element,
-  type: PropTypes.string,
-  value: PropTypes.string.isRequired,
-};
-
-export default FormGroup;