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

package/{src → dist}/sass/_style.scss

@@ -1,5 +1,3 @@
-@use "@openedx/paragon/scss/core/core" as paragon;
-
 // Load component based styles
 @use "_base_component.scss";
 @use "_registration.scss";
@@ -42,7 +40,7 @@ $elevation-level-2-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
 }
 
 .main-content {
-  @extend .pt-4;
+  padding-top: var(--pgn-spacing-spacer-4) !important;
   min-width: 464px !important;
 }
 
@@ -82,15 +80,15 @@ $elevation-level-2-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
 .alert-link {
   font-weight: normal;
   text-decoration: underline;
-  color: paragon.$info-300 !important;
+  color: var(--pgn-color-info-300) !important;
 
   &:hover {
-    color: paragon.$info-500 !important;
+    color: var(--pgn-color-info-500) !important;
   }
 }
 
 .form-control {
-  background-color: $white !important;
+  background-color: var(--pgn-color-white) !important;
   font-size: 0.875rem;
   line-height: 1.5;
   height: 2.75rem;
@@ -105,11 +103,11 @@ $elevation-level-2-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
   margin-bottom: 1rem;
   font-size: 14px;
 
-  background-color: $white;
-  border: 1px solid paragon.$primary;
+  background-color: var(--pgn-color-white);
+  border: 1px solid var(--pgn-color-primary-base);
   width: 224px;
   height: 36px;
-  color: paragon.$primary;
+  color: var(--pgn-color-primary-base);
 
   .btn-tpa__image-icon {
     background-color: transparent;
@@ -134,8 +132,8 @@ $elevation-level-2-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
 }
 
 .btn-tpa__font-container {
-  background-color: paragon.$primary;
-  color: $white;
+  background-color: var(--pgn-color-primary-base);
+  color: var(--pgn-color-white);
   font-size: 11px;
 
   margin-left: -6px;
@@ -145,7 +143,7 @@ $elevation-level-2-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
 }
 
 .btn-oa2-facebook {
-  color: $white;
+  color: var(--pgn-color-white);
   border-color: $facebook-blue;
   background-color: $facebook-blue;
 
@@ -153,12 +151,12 @@ $elevation-level-2-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
   &:focus {
     background-color: $facebook-focus-blue;
     border: 1px solid $facebook-focus-blue;
-    color: $white;
+    color: var(--pgn-color-white);
   }
 }
 
 .btn-oa2-google-oauth2 {
-  color: $white;
+  color: var(--pgn-color-white);
   border-color: $google-blue;
   background-color: $google-blue;
 
@@ -173,12 +171,12 @@ $elevation-level-2-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
   &:focus {
     background-color: $google-focus-blue;
     border: 1px solid $google-focus-blue;
-    color: $white;
+    color: var(--pgn-color-white);
   }
 }
 
 .btn-oa2-apple-id {
-  color: $white;
+  color: var(--pgn-color-white);
   border-color: $apple-black;
   background-color: $apple-black;
   font-size: 16px;
@@ -192,12 +190,12 @@ $elevation-level-2-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
   &:focus {
     background-color: $apple-focus-black;
     border: 1px solid $apple-focus-black;
-    color: $white;
+    color: var(--pgn-color-white);
   }
 }
 
 .btn-oa2-azuread-oauth2 {
-  color: $white;
+  color: var(--pgn-color-white);
   border-color: $microsoft-black;
   background-color: $microsoft-black;
 
@@ -205,7 +203,7 @@ $elevation-level-2-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
   &:focus {
     background-color: $microsoft-focus-black;
     border: 1px solid $microsoft-focus-black;
-    color: $white;
+    color: var(--pgn-color-white);
   }
 }
 
@@ -216,9 +214,8 @@ $elevation-level-2-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
 }
 
 .institute-icon {
-  @extend .mr-1;
-  @extend .text-gray;
-
+  margin: var(--pgn-spacing-spacer-1) !important;
+  color: var(--pgn-color-gray-base) !important;
   display: inline-block;
   margin-bottom: 0.25rem;
   height: 18px;
@@ -234,7 +231,7 @@ $elevation-level-2-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
 }
 
 .invalid-feedback {
-  color: paragon.$red;
+  color: var(--pgn-color-red);
 }
 
 .full-vertical-height {
@@ -292,24 +289,24 @@ select.form-control {
 
 #password-requirement-left {
   opacity: 1;
-  @extend .x-small;
+  font-size: var(--pgn-typography-font-size-xs) !important;
   filter: drop-shadow($elevation-level-2-shadow) drop-shadow($elevation-level-2-shadow) !important;
   right: 0.2rem !important;
 
   .tooltip-inner {
-    background: $white;
+    background: var(--pgn-color-white);
     display: block;
-    color: paragon.$gray-500;
+    color: var(--pgn-color-gray-500);
   }
 
   .arrow::before {
-    border-left-color: $white;
+    border-left-color: var(--pgn-color-white);
   }
 }
 
 #password-requirement-top {
-  @extend .x-small;
-  filter: drop-shadow($elevation-level-2-shadow) drop-shadow($elevation-level-2-shadow) !important;
+  font-size: var(--pgn-typography-font-size-xs) !important;
+  filter: drop-shadow(var(--pgn-elevation-box-shadow-level-2)) drop-shadow(var(--pgn-elevation-box-shadow-level-2)) !important;
   opacity: 1;
   width: 90%;
   bottom: 10px !important;
@@ -318,31 +315,31 @@ select.form-control {
 
   .tooltip-inner {
     min-width: 464px !important;
-    background: $white;
+    background: var(--pgn-color-white);
     display: block;
-    color: paragon.$gray-500;
+    color: var(--pgn-color-gray-500);
   }
 
   .arrow::before {
-    border-top-color: $white;
+    border-top-color: var(--pgn-color-white);
   }
 
 }
 
 .yellow-border {
-  border: 2px solid paragon.$accent-b;
+  border: 2px solid var(--pgn-color-accent-b);
 }
 
 .institutions__heading {
-  color: paragon.$primary-700;
+  color: var(--pgn-color-primary-700);
 }
 
 .logistration-button {
-  color: paragon.$gray-700;
+  color: var(--pgn-color-gray-700);
 }
 
-.logistration-button:hover {
-  color: paragon.$gray-700;
+.logistration-button:hover{
+  color: var(--pgn-color-gray-700);
   text-decoration: none;
 }
 
@@ -358,7 +355,7 @@ select.form-control {
 }
 
 .has-floating-label {
-  color: paragon.$gray-500;
+  color: var(--pgn-color-gray-500);
 }
 
 .pgn__form-control-floating-label .pgn__form-control-floating-label-content {
@@ -370,9 +367,9 @@ select.form-control {
   font-size: 0.75rem;
 }
 
-.form-group__form-field .form-control:focus~.pgn__form-control-floating-label .pgn__form-control-floating-label-content {
-  font-size: 16px;
-  color: paragon.$primary-700;
+.form-group__form-field .form-control:focus ~ .pgn__form-control-floating-label .pgn__form-control-floating-label-content {
+    font-size: 16px;
+    color: var(--pgn-color-primary-700);
 }
 
 .form-group__form-field .form-control:not([value='']):not(:focus)~.pgn__form-control-floating-label .pgn__form-control-floating-label-content {
@@ -450,14 +447,14 @@ select.form-control {
 }
 
 .table-striped tbody tr:nth-of-type(odd) {
-  background-color: paragon.$light-200;
+  background-color: var(--pgn-color-light-200);
 }
 
 .institutions--provider-link {
   font-weight: normal;
   font-size: 0.875rem;
   line-height: 1.5rem;
-  color: paragon.$primary-700
+  color: var(--pgn-color-primary-700)
 }
 
 .pgn__form-control-decorator-trailing {

package/package.json

@@ -1,14 +1,20 @@
 {
   "name": "@openedx/frontend-app-authn",
-  "version": "1.0.0-alpha.4",
+  "version": "1.0.0-alpha.6",
   "description": "Frontend authentication",
+  "engines": {
+    "node": "^24.12"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/openedx/frontend-app-authn.git"
   },
-  "main": "src/index.ts",
+  "exports": {
+    ".": "./dist/index.js",
+    "./app.scss": "./dist/app.scss"
+  },
   "files": [
-    "/src"
+    "/dist"
   ],
   "browserslist": [
     "extends @edx/browserslist-config"
@@ -18,10 +24,13 @@
     "*.scss"
   ],
   "scripts": {
+    "build": "make build",
+    "clean": "make clean",
     "dev": "PORT=1999 PUBLIC_PATH=/authn openedx dev",
     "i18n_extract": "openedx formatjs extract",
     "lint": "openedx lint .",
     "lint:fix": "openedx lint --fix .",
+    "prepack": "npm run build",
     "snapshot": "openedx test --updateSnapshot",
     "test": "openedx test --coverage --passWithNoTests"
   },
@@ -64,11 +73,13 @@
     "babel-plugin-formatjs": "10.5.38",
     "eslint-plugin-import": "2.31.0",
     "jest": "^29.7.0",
-    "react-test-renderer": "^18.3.1"
+    "react-test-renderer": "^18.3.1",
+    "ts-jest": "^29.4.0",
+    "tsc-alias": "^1.8.16"
   },
   "peerDependencies": {
-    "@openedx/frontend-base": "^1.0.0-alpha.6",
-    "@openedx/paragon": "^22",
+    "@openedx/frontend-base": "^1.0.0-alpha.13",
+    "@openedx/paragon": "^23",
     "react": "^18",
     "react-dom": "^18",
     "react-redux": "^8",

package/src/__mocks__/file.js

@@ -1 +0,0 @@
-module.exports = 'FileMock';

package/src/__mocks__/svg.js

@@ -1 +0,0 @@
-module.exports = 'SvgURL';

package/src/app.scss

@@ -1,6 +0,0 @@
-@use "@edx/brand/paragon/fonts";
-@use "@edx/brand/paragon/variables";
-@use "@openedx/paragon/scss/core/core";
-@use "@edx/brand/paragon/overrides";
-
-@use "sass/style";

package/src/app.ts

@@ -1,43 +0,0 @@
-import { App } from '@openedx/frontend-base';
-import { appId } from './constants';
-import routes from './routes';
-import messages from './i18n';
-
-const app: App = {
-  appId,
-  routes,
-  messages,
-  config: {
-    ACTIVATION_EMAIL_SUPPORT_LINK: null,
-    ALLOW_PUBLIC_ACCOUNT_CREATION: true,
-    AUTHN_PROGRESSIVE_PROFILING_SUPPORT_LINK: null,
-    BANNER_IMAGE_EXTRA_SMALL: '',
-    BANNER_IMAGE_LARGE: '',
-    BANNER_IMAGE_MEDIUM: '',
-    BANNER_IMAGE_SMALL: '',
-    DISABLE_ENTERPRISE_LOGIN: true,
-    ENABLE_AUTO_GENERATED_USERNAME: false,
-    ENABLE_DYNAMIC_REGISTRATION_FIELDS: false,
-    ENABLE_IMAGE_LAYOUT: false,
-    ENABLE_PROGRESSIVE_PROFILING_ON_AUTHN: false,
-    FAVICON_URL: 'https://edx-cdn.org/v3/default/favicon.ico',
-    INFO_EMAIL: '',
-    LOGIN_ISSUE_SUPPORT_LINK: null,
-    LOGO_TRADEMARK_URL: 'https://edx-cdn.org/v3/default/logo-trademark.svg',
-    LOGO_URL: 'https://edx-cdn.org/v3/default/logo.svg',
-    LOGO_WHITE_URL: 'https://edx-cdn.org/v3/default/logo-white.svg',
-    MARKETING_EMAILS_OPT_IN: '',
-    MARKETING_SITE_BASE_URL: 'http://local.openedx.io',
-    PASSWORD_RESET_SUPPORT_LINK: null,
-    POST_REGISTRATION_REDIRECT_URL: '',
-    PRIVACY_POLICY: null,
-    SEARCH_CATALOG_URL: null,
-    SESSION_COOKIE_DOMAIN: 'local.openedx.io',
-    SHOW_REGISTRATION_LINKS: true,
-    TOS_AND_HONOR_CODE: null,
-    TOS_LINK: null,
-    USER_RETENTION_COOKIE_NAME: '',
-  },
-};
-
-export default app;

package/src/base-container/components/default-layout/DefaultLayout.test.jsx

@@ -1,48 +0,0 @@
-import { IntlProvider } from '@openedx/frontend-base';
-import { render, screen } from '@testing-library/react';
-
-import { DefaultLargeLayout, DefaultMediumLayout, DefaultSmallLayout } from './index';
-
-describe('Default Layout tests', () => {
-  it('should display the form passed as a child in SmallScreenLayout', () => {
-    render(
-      <IntlProvider locale="en">
-        <div>
-          <DefaultSmallLayout />
-          <form aria-label="form">
-            <input type="text" />
-          </form>
-        </div>
-      </IntlProvider>,
-    );
-    expect(screen.getByRole('form')).toBeDefined();
-  });
-
-  it('should display the form passed as a child in MediumScreenLayout', () => {
-    render(
-      <IntlProvider locale="en">
-        <div>
-          <DefaultMediumLayout />
-          <form aria-label="form">
-            <input type="text" />
-          </form>
-        </div>
-      </IntlProvider>,
-    );
-    expect(screen.getByRole('form')).toBeDefined();
-  });
-
-  it('should display the form passed as a child in LargeScreenLayout', () => {
-    render(
-      <IntlProvider locale="en">
-        <div>
-          <DefaultLargeLayout />
-          <form aria-label="form">
-            <input type="text" />
-          </form>
-        </div>
-      </IntlProvider>,
-    );
-    expect(screen.getByRole('form')).toBeDefined();
-  });
-});

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

@@ -1,42 +0,0 @@
-import { useAppConfig, getSiteConfig, useIntl } from '@openedx/frontend-base';
-import { Hyperlink, Image } from '@openedx/paragon';
-import classNames from 'classnames';
-
-import messages from './messages';
-
-const LargeLayout = () => {
-  const { formatMessage } = useIntl();
-
-  return (
-    <div className="w-50 d-flex">
-      <div className="col-md-9 bg-primary-400">
-        <Hyperlink destination={useAppConfig().MARKETING_SITE_BASE_URL}>
-          <Image className="logo position-absolute" alt={getSiteConfig().siteName} src={useAppConfig().LOGO_WHITE_URL} />
-        </Hyperlink>
-        <div className="min-vh-100 d-flex align-items-center">
-          <div className={classNames({ 'large-yellow-line mr-n4.5': getSiteConfig().siteName === 'edX' })} />
-          <h1
-            className={classNames(
-              'display-2 text-white mw-xs',
-              { 'ml-6': getSiteConfig().siteName !== 'edX' },
-            )}
-          >
-            {formatMessage(messages['start.learning'])}
-            <div className="text-accent-a">
-              {formatMessage(messages['with.site.name'], { siteName: getSiteConfig().siteName })}
-            </div>
-          </h1>
-        </div>
-      </div>
-      <div className="col-md-3 bg-white p-0">
-        <svg className="ml-n1 w-100 h-100 large-screen-svg-primary" preserveAspectRatio="xMaxYMin meet">
-          <g transform="skewX(171.6)">
-            <rect x="0" y="0" height="100%" width="100%" />
-          </g>
-        </svg>
-      </div>
-    </div>
-  );
-};
-
-export default LargeLayout;

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

@@ -1,49 +0,0 @@
-import { useAppConfig, getSiteConfig, useIntl } from '@openedx/frontend-base';
-import { Hyperlink, Image } from '@openedx/paragon';
-import classNames from 'classnames';
-
-import messages from './messages';
-
-const MediumLayout = () => {
-  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-primary-400">
-          <Hyperlink destination={useAppConfig().MARKETING_SITE_BASE_URL}>
-            <Image alt={getSiteConfig().siteName} className="logo" src={useAppConfig().LOGO_WHITE_URL} />
-          </Hyperlink>
-          <div className="d-flex align-items-center justify-content-center mb-4 ">
-            <div className={classNames({ 'mt-1 medium-yellow-line': getSiteConfig().siteName === 'edX' })} />
-            <div>
-              <h1
-                className={classNames(
-                  'display-1 text-white mt-5 mb-5 mr-2 main-heading',
-                  { 'ml-4.5': getSiteConfig().siteName !== 'edX' },
-                )}
-              >
-                <span>
-                  {formatMessage(messages['start.learning'])}{' '}
-                  <span className="text-accent-a d-inline-block">
-                    {formatMessage(messages['with.site.name'], { siteName: getSiteConfig().siteName })}
-                  </span>
-                </span>
-              </h1>
-            </div>
-          </div>
-        </div>
-        <div className="col-md-2 bg-white p-0">
-          <svg className="w-100 h-100 medium-screen-svg-primary" preserveAspectRatio="xMaxYMin meet">
-            <g transform="skewX(168)">
-              <rect x="0" y="0" height="100%" width="100%" />
-            </g>
-          </svg>
-        </div>
-      </div>
-    </>
-  );
-};
-
-export default MediumLayout;

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

@@ -1,37 +0,0 @@
-import { useAppConfig, getSiteConfig, useIntl } from '@openedx/frontend-base';
-import { Hyperlink, Image } from '@openedx/paragon';
-import classNames from 'classnames';
-
-import messages from './messages';
-
-const SmallLayout = () => {
-  const { formatMessage } = useIntl();
-
-  return (
-    <span className="bg-primary-400 w-100">
-      <div className="col-md-12 small-screen-top-stripe" />
-      <div>
-        <Hyperlink destination={useAppConfig().MARKETING_SITE_BASE_URL}>
-          <Image className="logo-small" alt={getSiteConfig().siteName} src={useAppConfig().LOGO_WHITE_URL} />
-        </Hyperlink>
-        <div className="d-flex align-items-center m-3.5">
-          <div className={classNames({ 'small-yellow-line mr-n2.5': getSiteConfig().siteName === 'edX' })} />
-          <h1
-            className={classNames(
-              'text-white mt-3.5 mb-3.5',
-            )}
-          >
-            <span>
-              {formatMessage(messages['start.learning'])}{' '}
-              <span className="text-accent-a d-inline-block">
-                {formatMessage(messages['with.site.name'], { siteName: getSiteConfig().siteName })}
-              </span>
-            </span>
-          </h1>
-        </div>
-      </div>
-    </span>
-  );
-};
-
-export default SmallLayout;

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;