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

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;

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;