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

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

@@ -0,0 +1,31 @@
+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/index.jsx

@@ -0,0 +1,4 @@
+export { default as ImageLargeLayout } from './LargeLayout';
+export { default as ImageMediumLayout } from './MediumLayout';
+export { default as ImageSmallLayout } from './SmallLayout';
+export { default as ImageExtraSmallLayout } from './ExtraSmallLayout';

package/src/base-container/components/image-layout/index.scss

@@ -0,0 +1,37 @@
+.company-logo {
+  width: 71px;
+  margin-top: 2rem;
+  margin-left: 1.5rem;
+}
+
+@media (max-width: 576px) {
+  .company-logo {
+    width: 44.67px;
+    margin-top: 1.25rem;
+    margin-left: 1.5rem;
+  }
+}
+
+.banner__image {
+  background-size: cover;
+  background-repeat: no-repeat;
+  border:none;
+}
+
+@media (min-width: 464px) and (max-width: 575.98px) {
+  .banner__heading {
+    font-size: 60px;
+    font-weight: 700;
+    line-height: 60px;
+    letter-spacing: -1.2px;
+  }
+}
+
+@media (min-width: 768px) and (max-width: 800px) {
+  .banner__heading {
+    font-size: 60px !important;
+    font-weight: 700 !important;
+    line-height: 60px !important;
+    letter-spacing: -2px !important;
+  }
+}

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

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

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

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

@@ -0,0 +1,38 @@
+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/index.jsx

@@ -0,0 +1,3 @@
+export { default as AuthLargeLayout } from './LargeLayout';
+export { default as AuthMediumLayout } from './MediumLayout';
+export { default as AuthSmallLayout } from './SmallLayout';

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

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

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

@@ -0,0 +1,44 @@
+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/EmbeddedRegistrationRoute.jsx

@@ -0,0 +1,26 @@
+import PropTypes from 'prop-types';
+import { Navigate } from 'react-router-dom';
+
+import { PAGE_NOT_FOUND } from '../data/constants';
+import { isHostAvailableInQueryParams } from '../data/utils';
+
+/**
+ * This wrapper redirects the requester to embedded register page only if host
+ * query param is present.
+ */
+const EmbeddedRegistrationRoute = ({ children }) => {
+  const registrationEmbedded = isHostAvailableInQueryParams();
+
+  // Show registration page for embedded experience even if the user is authenticated
+  if (registrationEmbedded) {
+    return children;
+  }
+
+  return <Navigate to={PAGE_NOT_FOUND} replace />;
+};
+
+EmbeddedRegistrationRoute.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export default EmbeddedRegistrationRoute;

package/src/common-components/EnterpriseSSO.jsx

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

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