Merge pull request #1571 from openedx/aansari/INF-2127

feat: added captcha v3 on registration

.env

@@ -15,22 +15,35 @@ SEGMENT_KEY=''
 SITE_NAME=null
 INFO_EMAIL=''
 # ***** Cookies *****
-REGISTER_CONVERSION_COOKIE_NAME=null
-USER_SURVEY_COOKIE_NAME=null
+USER_RETENTION_COOKIE_NAME=null
+# ***** Cohesion Keys *****
+COHESION_WRITE_KEY=''
+COHESION_SOURCE_KEY=''
 # ***** Links *****
 LOGIN_ISSUE_SUPPORT_LINK=''
 AUTHN_PROGRESSIVE_PROFILING_SUPPORT_LINK=null
+POST_REGISTRATION_REDIRECT_URL=''
+SEARCH_CATALOG_URL=''
 # ***** Features flags *****
 DISABLE_ENTERPRISE_LOGIN=''
-ENABLE_COOKIE_POLICY_BANNER=''
+ENABLE_AUTO_GENERATED_USERNAME=''
 ENABLE_DYNAMIC_REGISTRATION_FIELDS=''
 ENABLE_PROGRESSIVE_PROFILING_ON_AUTHN=''
-ENABLE_PERSONALIZED_RECOMMENDATIONS=''
+ENABLE_POST_REGISTRATION_RECOMMENDATIONS=''
 MARKETING_EMAILS_OPT_IN=''
 SHOW_CONFIGURABLE_EDX_FIELDS=''
+ENABLE_IMAGE_LAYOUT=''
 # ***** Zendesk related keys *****
 ZENDESK_KEY=''
 ZENDESK_LOGO_URL=''
+# ***** Base Container Images *****
+BANNER_IMAGE_LARGE=''
+BANNER_IMAGE_MEDIUM=''
+BANNER_IMAGE_SMALL=''
+BANNER_IMAGE_EXTRA_SMALL=''
 # ***** Miscellaneous *****
 APP_ID=''
 MFE_CONFIG_API_URL=''
+# Fallback in local style files
+PARAGON_THEME_URLS={}
+RECAPTCHA_SITE_KEY_WEB=''

.env.development

@@ -19,19 +19,31 @@ REFRESH_ACCESS_TOKEN_ENDPOINT='http://localhost:18000/login_refresh'
 SEGMENT_KEY=''
 SITE_NAME='Your Platform Name Here'
 INFO_EMAIL='info@example.com'
+# ***** Features *****
+ENABLE_DYNAMIC_REGISTRATION_FIELDS='true'
+ENABLE_PROGRESSIVE_PROFILING_ON_AUTHN='true'
 # ***** Cookies *****
-REGISTER_CONVERSION_COOKIE_NAME='openedx-user-register-conversion'
 SESSION_COOKIE_DOMAIN='localhost'
 USER_INFO_COOKIE_NAME='edx-user-info'
-USER_SURVEY_COOKIE_NAME='openedx-user-survey-type'
+# ***** Cohesion Keys *****
+COHESION_WRITE_KEY=''
+COHESION_SOURCE_KEY=''
 # ***** Links *****
 LOGIN_ISSUE_SUPPORT_LINK='http://localhost:18000/login-issue-support-url'
 TOS_AND_HONOR_CODE='http://localhost:18000/honor'
 TOS_LINK='http://localhost:18000/tos'
 PRIVACY_POLICY='http://localhost:18000/privacy'
 AUTHN_PROGRESSIVE_PROFILING_SUPPORT_LINK='http://localhost:1999/welcome'
+# ***** Base Container Images *****
+BANNER_IMAGE_LARGE=''
+BANNER_IMAGE_MEDIUM=''
+BANNER_IMAGE_SMALL=''
+BANNER_IMAGE_EXTRA_SMALL=''
 # ***** Miscellaneous *****
 APP_ID=''
 MFE_CONFIG_API_URL=''
 ZENDESK_KEY=''
 ZENDESK_LOGO_URL=''
+# Fallback in local style files
+PARAGON_THEME_URLS={}
+RECAPTCHA_SITE_KEY_WEB=''

.env.private.example

@@ -1,5 +1,4 @@
 # Copy these to the .env.private to enable edX specific functionality on local system
-ENABLE_COOKIE_POLICY_BANNER='true'
 ENABLE_PROGRESSIVE_PROFILING_ON_AUTHN='true'
 MARKETING_EMAILS_OPT_IN='true'
 SHOW_CONFIGURABLE_EDX_FIELDS='true'

.env.test

@@ -16,7 +16,9 @@ ORDER_HISTORY_URL='http://localhost:1996/orders'
 REFRESH_ACCESS_TOKEN_ENDPOINT='http://localhost:18000/login_refresh'
 SEGMENT_KEY=''
 SITE_NAME='Your Platform Name Here'
-USER_SURVEY_COOKIE_NAME='openedx-user-survey-type'
-REGISTER_CONVERSION_COOKIE_NAME='openedx-user-register-conversion'
 APP_ID=''
 MFE_CONFIG_API_URL=''
+COHESION_WRITE_KEY=''
+COHESION_SOURCE_KEY=''
+PARAGON_THEME_URLS={}
+RECAPTCHA_SITE_KEY_WEB=''

.eslintrc.js

@@ -1,12 +1,12 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
-const { createConfig } = require('@edx/frontend-build');
+const { createConfig } = require('@openedx/frontend-build');
 
-module.exports = createConfig('eslint', {
+const config = createConfig('eslint', {
   rules: {
     // Temporarily update the 'indent', 'template-curly-spacing' and
     // 'no-multiple-empty-lines' rules since they are causing eslint
     // to fail for no apparent reason since upgrading
-    // @edx/frontend-build from v3 to v5:
+    // @openedx/frontend-build from v3 to v5:
     // - TypeError: Cannot read property 'range' of null
     indent: [
       'error',
@@ -48,7 +48,16 @@ module.exports = createConfig('eslint', {
       },
     ],
     'function-paren-newline': 'off',
-    'no-import-assign': 'off',
-    'react/no-unstable-nested-components': 'off',
   },
 });
+
+config.settings = {
+  'import/resolver': {
+    node: {
+      paths: ['src', 'node_modules'],
+      extensions: ['.js', '.jsx'],
+    },
+  },
+};
+
+module.exports = config;

.github/CODEOWNERS

@@ -0,0 +1 @@
+*   @openedx/2U-infinity

.github/dependabot.yml

@@ -0,0 +1,7 @@
+version: 2
+updates:
+    # Adding new check for github-actions
+  - package-ecosystem: "github-actions"
+    directory: "/"
+    schedule:
+        interval: "weekly"

.github/pull_request_template.md

@@ -25,5 +25,5 @@ Include a link to the sandbox for design changes or screenshot for before and af
 
 #### Post-merge Checklist
 
-* [ ] Deploy the changes to prod after verifying on stage or ask **@openedx/vanguards** to do it. 
+* [ ] Deploy the changes to prod after verifying on stage or ask **@openedx/2u-infinity** to do it. 
 * [ ] 🎉 🙌 Celebrate! Thanks for your contribution.

.github/workflows/autoupdate-pull-request.yml

@@ -3,14 +3,18 @@ on:
   push:
     branches:
       - master
+  pull_request:
+    types: [ labeled ]  
+    branches:
+      - master  
 jobs:
   autoupdate:
     name: autoupdate
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-latest
     steps:
       - uses: docker://chinthakagodawita/autoupdate-action:v1
         env:
-          GITHUB_TOKEN: "${{ secrets.CC_GITHUB_TOKEN }}"
+          GITHUB_TOKEN: "${{ secrets.GITHUB_TOKEN }}"
           DRY_RUN: "false"
           PR_FILTER: "labelled"
           PR_LABELS: "autoupdate"

.github/workflows/ci.yml

@@ -10,17 +10,15 @@ on:
 
 jobs:
   tests:
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-latest
 
     steps:
     - name: Checkout
-      uses: actions/checkout@v3
-    - name: Setup Nodejs Env
-      run: echo "NODE_VER=`cat .nvmrc`" >> $GITHUB_ENV
+      uses: actions/checkout@v4
     - name: Setup Nodejs
-      uses: actions/setup-node@v3
+      uses: actions/setup-node@v4
       with:
-        node-version: ${{ env.NODE_VER }}
+        node-version-file: '.nvmrc'
 
     - name: Install Dependencies
       run: npm ci
@@ -41,4 +39,7 @@ jobs:
       run: npm run build
 
     - name: Run Code Coverage
-      uses: codecov/codecov-action@v3
+      uses: codecov/codecov-action@v5
+      with:
+        token: ${{ secrets.CODECOV_TOKEN }}
+        fail_ci_if_error: true

.gitignore

@@ -18,3 +18,4 @@ temp/babel-plugin-react-intl
 *~
 /temp
 /.vscode
+src/i18n/messages

.nvmrc

@@ -1 +1 @@
-18
+20

.tx/config

@@ -1,9 +0,0 @@
-[main]
-host = https://www.transifex.com
-
-[o:open-edx:p:edx-platform:r:frontend-app-authn]
-file_filter = src/i18n/messages/<lang>.json
-source_file = src/i18n/transifex_input.json
-source_lang = en
-type        = KEYVALUEJSON
-

CODEOWNERS

@@ -1,2 +0,0 @@
-# The following users are the owners of all frontend-app-authn files
-*       @openedx/vanguards

Makefile

@@ -1,19 +1,17 @@
-export TRANSIFEX_RESOURCE = frontend-app-authn
-transifex_langs = "ar,fr,es_419,zh_CN,it_IT,pt_PT,de_DE,uk,ru,hi"
-
+intl_imports = ./node_modules/.bin/intl-imports.js
 transifex_utils = ./node_modules/.bin/transifex-utils.js
 i18n = ./src/i18n
 transifex_input = $(i18n)/transifex_input.json
 
 # This directory must match .babelrc .
-transifex_temp = ./temp/babel-plugin-react-intl
+transifex_temp = ./temp/babel-plugin-formatjs
 
 precommit:
 	npm run lint
 	npm audit
 
 requirements:
-	npm install
+	npm ci
 
 i18n.extract:
 	# Pulling display strings from .jsx files into .json files...
@@ -31,22 +29,31 @@ detect_changed_source_translations:
 	# Checking for changed translations...
 	git diff --exit-code $(i18n)
 
-# Pushes translations to Transifex.  You must run make extract_translations first.
-push_translations:
-	# Pushing strings to Transifex...
-	tx push -s
-	# Fetching hashes from Transifex...
-	./node_modules/@edx/reactifex/bash_scripts/get_hashed_strings_v3.sh
-	# Writing out comments to file...
-	$(transifex_utils) $(transifex_temp) --comments --v3-scripts-path
-	# Pushing comments to Transifex...
-	./node_modules/@edx/reactifex/bash_scripts/put_comments_v3.sh
-
-# Pulls translations from Transifex.
 pull_translations:
-	tx pull -t -f --mode reviewed --languages=$(transifex_langs)
+	rm -rf src/i18n/messages
+	mkdir src/i18n/messages
+	cd src/i18n/messages \
+	  && atlas pull $(ATLAS_OPTIONS) \
+	           translations/paragon/src/i18n/messages:paragon \
+	           translations/frontend-platform/src/i18n/messages:frontend-platform \
+	           translations/frontend-app-authn/src/i18n/messages:frontend-app-authn
 
-# This target is used by CI.
+	$(intl_imports) paragon frontend-platform frontend-app-authn
+
+# This target is used by Travis.
 validate-no-uncommitted-package-lock-changes:
 	# Checking for package-lock.json changes...
 	git diff --exit-code package-lock.json
+
+.PHONY: validate
+validate:
+	make validate-no-uncommitted-package-lock-changes
+	npm run i18n_extract
+	npm run lint -- --max-warnings 0
+	npm run test
+	npm run build
+
+.PHONY: validate.ci
+validate.ci:
+	npm ci
+	make validate

README.rst

@@ -1,12 +1,12 @@
+##################
+frontend-app-authn
+##################
+
 |Build Status| |ci-badge| |Codecov| |semantic-release|
 
-frontend-app-authn
-====================
-
-Please tag **@openedx/vanguards** on any PRs or issues.  Thanks!
-
-Introduction
-------------
+********
+Purpose
+********
 
 This is a micro-frontend application responsible for the login, registration and password reset functionality.
 
@@ -22,11 +22,20 @@ This is a micro-frontend application responsible for the login, registration and
 
 - Progressive profiling page
 
+***************
+Getting Started
+***************
 
 Installation
-------------
+============
 
-This MFE is bundled with `Devstack <https://github.com/openedx/devstack>`_, see the `Getting Started <https://github.com/openedx/devstack#getting-started>`_ section for setup instructions.
+`Tutor`_ is currently recommended as a development environment for your new MFE. Please refer to the `relevant tutor-mfe documentation`_ to get started using it.
+
+.. _Tutor: https://github.com/overhangio/tutor
+.. _relevant tutor-mfe documentation: https://github.com/overhangio/tutor-mfe?tab=readme-ov-file#mfe-development
+
+Devstack (Deprecated) instructions
+==================================
 
 1. Install Devstack using the `Getting Started <https://github.com/openedx/devstack#getting-started>`_ instructions.
 
@@ -46,9 +55,9 @@ This MFE is bundled with `Devstack <https://github.com/openedx/devstack>`_, see
    **Note:** Follow `Enable social auth locally <docs/how_tos/enable_social_auth.rst>`_ for enabling Social Sign-on Buttons (SSO) locally
 
 Environment Variables/Setup Notes
----------------------------------
+=================================
 
-This MFE is configured via environment variables supplied at build time.  All micro-frontends have a shared set of required environment variables, as documented in the Open edX Developer Guide under `Required Environment Variables <https://edx.readthedocs.io/projects/edx-developer-docs/en/latest/developers_guide/micro_frontends_in_open_edx.html#required-environment-variables>`__.
+This MFE is configured via environment variables supplied at build time.  All micro-frontends have a shared set of required environment variables, as documented in the Open edX Developer Guide under `Required Environment Variables <https://github.com/overhangio/tutor-mfe?tab=readme-ov-file#mfe-development>`__.
 
 The authentication micro-frontend also requires the following additional variable:
 
@@ -112,12 +121,13 @@ The authentication micro-frontend also requires the following additional variabl
      - Name of MFE, this will be used by the API to get runtime configurations for the specific micro frontend. For a frontend repo `frontend-app-appName`, use `appName` as APP_ID.
      - ``authn`` | ``''``
 
-   * - ``ENABLE_COOKIE_POLICY_BANNER``
-     - Enables support for displaying the cookies acceptance banner.
-     - ``true`` | ``''`` (empty strings are falsy)     
+   * - ``ENABLE_IMAGE_LAYOUT``
+     - Enables the image layout feature within the authn. When set to True, this feature allows the inclusion of images in the base container layout. For more details on configuring this feature, please refer to the `Modifying base container <docs/how_tos/modifying_base_container.rst>`_.
+     - ``true`` | ``''`` (empty strings are falsy)
+
 
 edX-specific Environment Variables
-**********************************
+==================================
 
 Furthermore, there are several edX-specific environment variables that enable integrations with closed-source services private to the edX organization, and might be unsupported in Open edX.
 
@@ -138,12 +148,13 @@ Furthermore, there are several edX-specific environment variables that enable in
      - ``true`` | ``''`` (empty strings are falsy)    
 
 For more information see the document: `Micro-frontend applications in Open
-edX <https://edx.readthedocs.io/projects/edx-developer-docs/en/latest/developers_guide/micro_frontends_in_open_edx.html#required-environment-variables>`__.
+edX <https://github.com/overhangio/tutor-mfe?tab=readme-ov-file#mfe-development>`__.
 
 How To Contribute
-------------
+=================
+
 Contributions are very welcome, and strongly encouraged! We've
-put together `some documentation that describes our contribution process <https://edx.readthedocs.org/projects/edx-developer-guide/en/latest/process/index.html>`_.
+put together `some documentation that describes our contribution process <https://docs.openedx.org/en/latest/developers/references/developer_guide/process/index.html>`_.
 
 Even though they were written with edx-platform in mind, the guidelines should be followed for Open edX code in general.
 
@@ -152,34 +163,58 @@ can find it it at `PULL_REQUEST_TEMPLATE.md <https://github.com/openedx/frontend
 
 This project is currently accepting all types of contributions, bug fixes and security fixes.
 
-Open edX Code of Conduct
-------------------------
+Getting Help
+============
+
+If you're having trouble, we have discussion forums at
+https://discuss.openedx.org where you can connect with others in the community.
+
+Our real-time conversations are on Slack. You can request a `Slack
+invitation`_, then join our `community Slack workspace`_.  Because this is a
+frontend repository, the best place to discuss it would be in the `#wg-frontend
+channel`_.
+
+For anything non-trivial, the best path is to open an issue in this repository
+with as many details about the issue you are facing as you can provide.
+
+https://github.com/openedx/frontend-app-authn/issues
+
+For more information about these options, see the `Getting Help`_ page.
+
+.. _Slack invitation: https://openedx.org/slack
+.. _community Slack workspace: https://openedx.slack.com/
+.. _#wg-frontend channel: https://openedx.slack.com/archives/C04BM6YC7A6
+.. _Getting Help: https://openedx.org/community/connect
+
+The Open edX Code of Conduct
+============================
 All community members are expected to follow the `Open edX Code of Conduct <https://openedx.org/code-of-conduct/>`_.
 
 People
-------
+======
 The assigned maintainers for this component and other project details may be
-found in `Backstage <https://backstage.openedx.org/catalog/default/group/vanguards>`_. Backstage pulls this data from the ``catalog-info.yaml``
+found in `Backstage <https://backstage.openedx.org/catalog/default/group/2u-infinity>`_. Backstage pulls this data from the ``catalog-info.yaml``
 file in this repo.
 
 Reporting Security Issues
--------------------------
+=========================
 
-Please do not report security issues in public. Please email security@edx.org.
+Please do not report security issues in public. Please email security@openedx.org.
 
 Known Issues
-------------
+============
 
 None
 
 License
--------
+=======
 
 The code in this repository is licensed under the GNU Affero General Public License v3.0, unless
 otherwise noted.
 
 Please see `LICENSE <https://github.com/openedx/frontend-app-authn/blob/master/LICENSE>`_ for details.
 
+
 ==============================
 
 .. |Build Status| image:: https://api.travis-ci.com/edx/frontend-app-authn.svg?branch=master

catalog-info.yaml

@@ -12,7 +12,8 @@ metadata:
       icon: 'Article'
   annotations:
     openedx.org/arch-interest-groups: ""
+    openedx.org/release: "master"
 spec:
-  owner: group:vanguards
+  owner: group:2u-infinity
   type: 'service'
   lifecycle: 'production'

docs/how_tos/enable_social_auth.rst

@@ -3,7 +3,7 @@ Enable Social Auth Locally
 
 Please follow the steps below to enable social auth (SSO) locally.
 
-1. Follow `Enabling Third Party Authentication <https://edx.readthedocs.io/projects/edx-installing-configuring-and-running/en/latest/configuration/tpa/index.html>`_ for backend configuration.
+1. Follow `Enabling Third Party Authentication <https://docs.openedx.org/en/latest/site_ops/install_configure_run_guide/configuration/tpa/index.html>`_ for backend configuration.
 
 2. Authn has a component for rendering Social Auth providers at frontend which goes through each provider.
 

docs/how_tos/modifying_base_container.rst

@@ -0,0 +1,39 @@
+========================================
+Modifying the Base Container in Authn
+========================================
+
+The base container in Authn serves as the fundamental layout structure for rendering different components based on configurations. This document outlines the process for modifying the base container to accommodate changes or customize layouts as needed.
+
+Understanding Base Container Versions
+--------------------------------------
+
+The base container supports two main versions:
+
+- **Default Layout:** The default layout is the standard layout used when specific configurations do not dictate otherwise.
+.. image:: ../images/default_layout.png
+- **Image Layout:** The image layout is an alternative layout option that can be enabled based on configurations.
+.. image:: ../images/image_layout.png
+
+Enabling the Image Layout
+---------------------------
+
+To activate the image layout feature, navigate to your .env file and update the configurations:
+
+**Update Configuration**
+
+Locate the ``ENABLE_IMAGE_LAYOUT`` parameter and set its value to  ``true``. Additionally, ensure that the Image configuration settings are provided. Your overall configurations should resemble the following:
+
+
+   .. code-block::
+
+      # ***** Image Layout Configuration *****
+      ENABLE_IMAGE_LAYOUT = True  # Set to True to enable image layout feature
+
+      # ***** Base Container Images *****
+      BANNER_IMAGE_LARGE='' # Path to the large banner image
+      BANNER_IMAGE_MEDIUM='' # Path to the medium-sized banner image
+      BANNER_IMAGE_SMALL=''  # Path to the small banner image
+      BANNER_IMAGE_EXTRA_SMALL=''  # Path to the extra-small banner image
+
+
+This allows for the customization and adaptation of the base container layout according to specific requirements.

example.env.config.js

@@ -0,0 +1,60 @@
+/*
+Authn MFE is now able to handle JS-based configuration!
+
+For the time being, the `.env.*` files are still made available when cloning down this repo or pulling from
+the master branch. To switch to using `env.config.js`, make a copy of `example.env.config.js` and configure as needed.
+
+For testing with Jest Snapshot, there is a mock in `/src/setupTest.jsx` for `getConfig` that will need to be
+uncommented.
+
+Note: having both .env and env.config.js files will follow a predictable order, in which non-empty values in the
+JS-based config will overwrite the .env environment variables.
+
+frontend-platform's getConfig loads configuration in the following sequence:
+- .env file config
+- optional handlers (commonly used to merge MFE-specific config in via additional process.env variables)
+- env.config.js file config
+- runtime config
+*/
+
+module.exports = {
+  NODE_ENV: 'development',
+  NODE_PATH: './src',
+  PORT: 1999,
+  ACCESS_TOKEN_COOKIE_NAME: 'edx-jwt-cookie-header-payload',
+  BASE_URL: 'http://localhost:1999',
+  CREDENTIALS_BASE_URL: 'http://localhost:18150',
+  CSRF_TOKEN_API_PATH: '/csrf/api/v1/token',
+  ECOMMERCE_BASE_URL: 'http://localhost:18130',
+  LANGUAGE_PREFERENCE_COOKIE_NAME: 'openedx-language-preference',
+  LMS_BASE_URL: 'http://localhost:18000',
+  LOGIN_URL: 'http://localhost:1999/login',
+  LOGOUT_URL: 'http://localhost:18000/logout',
+  LOGO_URL: 'https://edx-cdn.org/v3/default/logo.svg',
+  LOGO_TRADEMARK_URL: 'https://edx-cdn.org/v3/default/logo-trademark.svg',
+  LOGO_WHITE_URL: 'https://edx-cdn.org/v3/default/logo-white.svg',
+  FAVICON_URL: 'https://edx-cdn.org/v3/default/favicon.ico',
+  MARKETING_SITE_BASE_URL: 'http://localhost:18000',
+  ORDER_HISTORY_URL: 'http://localhost:1996/orders',
+  REFRESH_ACCESS_TOKEN_ENDPOINT: 'http://localhost:18000/login_refresh',
+  SEGMENT_KEY: '',
+  SITE_NAME: 'Your Platform Name Here',
+  INFO_EMAIL: 'info@example.com',
+  ENABLE_DYNAMIC_REGISTRATION_FIELDS: 'true',
+  ENABLE_PROGRESSIVE_PROFILING_ON_AUTHN: 'true',
+  SESSION_COOKIE_DOMAIN: 'localhost',
+  USER_INFO_COOKIE_NAME: 'edx-user-info',
+  LOGIN_ISSUE_SUPPORT_LINK: 'http://localhost:18000/login-issue-support-url',
+  TOS_AND_HONOR_CODE: 'http://localhost:18000/honor',
+  TOS_LINK: 'http://localhost:18000/tos',
+  PRIVACY_POLICY: 'http://localhost:18000/privacy',
+  AUTHN_PROGRESSIVE_PROFILING_SUPPORT_LINK: 'http://localhost:1999/welcome',
+  BANNER_IMAGE_LARGE: '',
+  BANNER_IMAGE_MEDIUM: '',
+  BANNER_IMAGE_SMALL: '',
+  BANNER_IMAGE_EXTRA_SMALL: '',
+  APP_ID: '',
+  MFE_CONFIG_API_URL: '',
+  ZENDESK_KEY: '',
+  ZENDESK_LOGO_URL: '',
+};

jest.config.js

@@ -1,4 +1,4 @@
-const { createConfig } = require('@edx/frontend-build');
+const { createConfig } = require('@openedx/frontend-build');
 
 module.exports = createConfig('jest', {
   setupFiles: [

openedx.yaml

@@ -1,8 +0,0 @@
-# This file describes this Open edX repo, as described in OEP-2:
-# http://open-edx-proposals.readthedocs.io/en/latest/oeps/oep-0002.html#specification
-
-nick: Authn MFE
-oeps: {}
-owner: openedx/vanguards
-openedx-release:
-  ref: master

package.json

@@ -11,17 +11,14 @@
   ],
   "scripts": {
     "build": "fedx-scripts webpack",
-    "i18n_extract": "BABEL_ENV=i18n fedx-scripts babel src --quiet > /dev/null",
+    "i18n_extract": "fedx-scripts formatjs extract",
     "lint": "fedx-scripts eslint --ext .js --ext .jsx .",
+    "lint:fix": "fedx-scripts eslint --fix --ext .js --ext .jsx .",
     "snapshot": "fedx-scripts jest --updateSnapshot",
     "start": "fedx-scripts webpack-dev-server --progress",
+    "dev": "PUBLIC_PATH=/authn/ MFE_CONFIG_API_URL='http://localhost:8000/api/mfe_config/v1' fedx-scripts webpack-dev-server --progress --host apps.local.openedx.io",
     "test": "fedx-scripts jest --coverage --passWithNoTests"
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "npm run lint"
-    }
-  },
   "author": "edX",
   "license": "AGPL-3.0",
   "homepage": "https://github.com/openedx/frontend-app-authn#readme",
@@ -32,60 +29,57 @@
     "url": "https://github.com/openedx/frontend-app-authn/issues"
   },
   "dependencies": {
-    "@edx/brand": "npm:@edx/brand-openedx@1.2.0",
-    "@edx/frontend-component-cookie-policy-banner": "2.2.2",
-    "@edx/frontend-platform": "4.0.2",
-    "@edx/paragon": "20.30.1",
-    "@fortawesome/fontawesome-svg-core": "6.2.1",
-    "@fortawesome/free-brands-svg-icons": "6.2.1",
-    "@fortawesome/free-regular-svg-icons": "6.2.1",
-    "@fortawesome/free-solid-svg-icons": "6.2.1",
-    "@fortawesome/react-fontawesome": "0.2.0",
+    "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
+    "@edx/frontend-platform": "^8.3.1",
+    "@edx/openedx-atlas": "^0.6.0",
+    "@fortawesome/fontawesome-svg-core": "6.7.2",
+    "@fortawesome/free-brands-svg-icons": "6.7.2",
+    "@fortawesome/free-solid-svg-icons": "6.7.2",
+    "@openedx/frontend-plugin-framework": "^1.3.0",
+    "@fortawesome/react-fontawesome": "0.2.6",
+    "@openedx/paragon": "^23.4.2",
     "@optimizely/react-sdk": "^2.9.1",
-    "@redux-devtools/extension": "3.2.5",
+    "@redux-devtools/extension": "3.3.0",
+    "@testing-library/react": "^16.2.0",
     "algoliasearch": "^4.14.3",
-    "classnames": "2.3.2",
-    "core-js": "3.30.0",
-    "extract-react-intl-messages": "4.1.1",
+    "algoliasearch-helper": "^3.26.0",
+    "classnames": "2.5.1",
+    "core-js": "3.43.0",
     "fastest-levenshtein": "1.0.16",
-    "form-urlencoded": "6.1.0",
-    "lodash.camelcase": "4.3.0",
-    "lodash.snakecase": "4.1.1",
+    "form-urlencoded": "6.1.6",
     "prop-types": "15.8.1",
-    "query-string": "5.1.1",
-    "react": "16.14.0",
-    "react-dom": "16.14.0",
+    "query-string": "7.1.3",
+    "react-error-boundary": "^4.0.13",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-google-recaptcha-v3": "^1.11.0",
     "react-helmet": "6.1.0",
-    "react-loading-skeleton": "3.2.0",
-    "react-onclickoutside": "6.13.0",
+    "react-loading-skeleton": "3.5.0",
     "react-redux": "7.2.9",
     "react-responsive": "8.2.0",
-    "react-router": "5.3.4",
-    "react-router-dom": "5.3.4",
+    "react-router": "6.30.1",
+    "react-router-dom": "6.30.1",
     "react-zendesk": "^0.1.13",
-    "redux": "4.2.0",
+    "redux": "4.2.1",
     "redux-logger": "3.0.6",
-    "redux-mock-store": "1.5.4",
-    "redux-saga": "1.2.3",
+    "redux-mock-store": "1.5.5",
+    "redux-saga": "1.3.0",
     "redux-thunk": "2.4.2",
-    "regenerator-runtime": "0.13.11",
-    "reselect": "4.1.7",
-    "sanitize-html": "2.10.0",
-    "semver-regex": "3.1.4",
-    "universal-cookie": "4.0.4"
+    "regenerator-runtime": "0.14.1",
+    "reselect": "5.1.1",
+    "universal-cookie": "7.2.2"
   },
   "devDependencies": {
     "@edx/browserslist-config": "^1.1.1",
-    "@edx/frontend-build": "12.8.6",
     "@edx/reactifex": "1.1.0",
-    "babel-plugin-formatjs": "10.4.0",
-    "enzyme": "3.11.0",
-    "enzyme-adapter-react-16": "1.15.7",
-    "eslint-plugin-import": "2.26.0",
+    "copy-webpack-plugin": "^11.0.0",
+    "@openedx/frontend-build": "^14.6.2",
+    "babel-plugin-formatjs": "10.5.39",
+    "eslint-plugin-import": "2.32.0",
     "glob": "7.2.3",
     "history": "5.3.0",
-    "husky": "7.0.4",
-    "jest": "29.5.0",
-    "react-test-renderer": "16.14.0"
+    "jest": "30.1.3",
+    "react-test-renderer": "^18.3.1",
+    "ts-jest": "^29.4.0"
   }
 }

public/index.html

@@ -1,19 +1,32 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en-us">
   <head>
-      <title>Authn | <%= process.env.SITE_NAME %></title>
-      <meta charset="utf-8">
-      <meta name="viewport" content="width=device-width, initial-scale=1.0">
-      <% if (process.env.OPTIMIZELY_URL) { %>
-        <script
-          src="<%= process.env.OPTIMIZELY_URL %>"
-        ></script>
-      <% } else if (process.env.OPTIMIZELY_PROJECT_ID) { %>
-        <script
-          src="<%= process.env.MARKETING_SITE_BASE_URL %>/optimizelyjs/<%= process.env.OPTIMIZELY_PROJECT_ID %>.js"
-        ></script>
-      <% } %>
+    <title>
+      <%= (process.env.SITE_NAME && process.env.SITE_NAME !='null' ) ?
+      'Authentication | ' + process.env.SITE_NAME : 'Authentication' %>
+    </title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="robots" content="noindex, nofollow" />
+    <link
+      rel="shortcut icon"
+      href="<%=htmlWebpackPlugin.options.FAVICON_URL%>"
+      type="image/x-icon"
+    />
+    <script defer src="https://www.edx.org/beam-wrapper.js" ></script>
+    <script
+      src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.4.4/iframeResizer.contentWindow.min.js"
+      integrity="sha512-IWwZFBvHzN41wNI6etRLLuLrDDj/6AwJcPt7cmKJAzluYTIHHQ1PF8wh0rSy05jxEvvjflVvH2MxeV6riyEEXg=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    ></script>
+    <% if (process.env.OPTIMIZELY_URL) { %>
+    <script src="<%= process.env.OPTIMIZELY_URL %>"></script>
+    <% } else if (process.env.OPTIMIZELY_PROJECT_ID) { %>
+    <script src="<%= process.env.MARKETING_SITE_BASE_URL %>/optimizelyjs/<%= process.env.OPTIMIZELY_PROJECT_ID %>.js"></script>
+    <% } %>
   </head>
+
   <body>
     <div id="root"></div>
   </body>

public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Disallow: /

src/MainApp.jsx

@@ -2,11 +2,12 @@ import React from 'react';
 
 import { getConfig } from '@edx/frontend-platform';
 import { AppProvider } from '@edx/frontend-platform/react';
+import { GoogleReCaptchaProvider } from 'react-google-recaptcha-v3';
 import { Helmet } from 'react-helmet';
-import { Redirect, Route, Switch } from 'react-router-dom';
+import { Navigate, Route, Routes } from 'react-router-dom';
 
 import {
-  Logistration, NotFoundPage, registerIcons, UnAuthOnlyRoute, Zendesk,
+  EmbeddedRegistrationRoute, NotFoundPage, registerIcons, RouteTracker, UnAuthOnlyRoute,
 } from './common-components';
 import configureStore from './data/configureStore';
 import {
@@ -15,40 +16,60 @@ import {
   PAGE_NOT_FOUND,
   PASSWORD_RESET_CONFIRM,
   RECOMMENDATIONS,
+  REGISTER_EMBEDDED_PAGE,
   REGISTER_PAGE,
   RESET_PAGE,
 } from './data/constants';
 import { updatePathWithQueryParams } from './data/utils';
 import { ForgotPasswordPage } from './forgot-password';
+import Logistration from './logistration/Logistration';
+import MainAppSlot from './plugin-slots/MainAppSlot';
 import { ProgressiveProfiling } from './progressive-profiling';
 import { RecommendationsPage } from './recommendations';
+import { RegistrationPage } from './register';
 import { ResetPasswordPage } from './reset-password';
+
 import './index.scss';
 
 registerIcons();
 
-const MainApp = () => (
-  <AppProvider store={configureStore()}>
-    <Helmet>
-      <link rel="shortcut icon" href={getConfig().FAVICON_URL} type="image/x-icon" />
-    </Helmet>
-    {getConfig().ZENDESK_KEY && <Zendesk />}
-    <Switch>
-      <Route exact path="/">
-        <Redirect to={updatePathWithQueryParams(REGISTER_PAGE)} />
-      </Route>
-      <UnAuthOnlyRoute exact path={LOGIN_PAGE} render={() => <Logistration selectedPage={LOGIN_PAGE} />} />
-      <UnAuthOnlyRoute exact path={REGISTER_PAGE} component={Logistration} />
-      <UnAuthOnlyRoute exact path={RESET_PAGE} component={ForgotPasswordPage} />
-      <Route exact path={PASSWORD_RESET_CONFIRM} component={ResetPasswordPage} />
-      <Route exact path={AUTHN_PROGRESSIVE_PROFILING} component={ProgressiveProfiling} />
-      <Route exact path={RECOMMENDATIONS} component={RecommendationsPage} />
-      <Route path={PAGE_NOT_FOUND} component={NotFoundPage} />
-      <Route path="*">
-        <Redirect to={PAGE_NOT_FOUND} />
-      </Route>
-    </Switch>
-  </AppProvider>
-);
+const MainApp = () => {
+  const recaptchaKey = getConfig().RECAPTCHA_SITE_KEY_WEB;
+
+  return (
+    <GoogleReCaptchaProvider
+      reCaptchaKey={recaptchaKey}
+      useEnterprise
+    >
+      <AppProvider store={configureStore()}>
+        <Helmet>
+          <link rel="shortcut icon" href={getConfig().FAVICON_URL} type="image/x-icon" />
+        </Helmet>
+        <Routes>
+          <Route path="/" element={<Navigate replace to={updatePathWithQueryParams(REGISTER_PAGE)} />} />
+          <Route
+            path={REGISTER_EMBEDDED_PAGE}
+            element={<EmbeddedRegistrationRoute><RegistrationPage /></EmbeddedRegistrationRoute>}
+          />
+          <Route
+            path={LOGIN_PAGE}
+            element={
+              <UnAuthOnlyRoute><Logistration selectedPage={LOGIN_PAGE} /></UnAuthOnlyRoute>
+            }
+          />
+          <Route path={REGISTER_PAGE} element={<UnAuthOnlyRoute><Logistration /></UnAuthOnlyRoute>} />
+          <Route path={RESET_PAGE} element={<UnAuthOnlyRoute><ForgotPasswordPage /></UnAuthOnlyRoute>} />
+          <Route path={PASSWORD_RESET_CONFIRM} element={<ResetPasswordPage />} />
+          <Route path={AUTHN_PROGRESSIVE_PROFILING} element={<ProgressiveProfiling />} />
+          <Route path={RECOMMENDATIONS} element={<RecommendationsPage />} />
+          <Route path={PAGE_NOT_FOUND} element={<NotFoundPage />} />
+          <Route path="*" element={<Navigate replace to={PAGE_NOT_FOUND} />} />
+        </Routes>
+        <RouteTracker />
+        <MainAppSlot />
+      </AppProvider>
+    </GoogleReCaptchaProvider>
+  );
+};
 
 export default MainApp;

src/base-component/BaseComponent.jsx

@@ -1,55 +0,0 @@
-import React from 'react';
-
-import CookiePolicyBanner from '@edx/frontend-component-cookie-policy-banner';
-import { getConfig } from '@edx/frontend-platform';
-import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
-import { getLocale } from '@edx/frontend-platform/i18n';
-import { breakpoints } from '@edx/paragon';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import MediaQuery from 'react-responsive';
-
-import AuthLargeLayout from './AuthLargeLayout';
-import AuthMediumLayout from './AuthMediumLayout';
-import AuthSmallLayout from './AuthSmallLayout';
-import LargeLayout from './LargeLayout';
-import MediumLayout from './MediumLayout';
-import SmallLayout from './SmallLayout';
-
-const BaseComponent = ({ children, showWelcomeBanner }) => {
-  const authenticatedUser = showWelcomeBanner ? getAuthenticatedUser() : null;
-  const username = authenticatedUser ? authenticatedUser.username : null;
-
-  return (
-    <>
-      {getConfig().ENABLE_COOKIE_POLICY_BANNER ? <CookiePolicyBanner languageCode={getLocale()} /> : null}
-      <div className="col-md-12 extra-large-screen-top-stripe" />
-      <div className="layout">
-        <MediaQuery maxWidth={breakpoints.small.maxWidth - 1}>
-          {authenticatedUser ? <AuthSmallLayout username={username} /> : <SmallLayout />}
-        </MediaQuery>
-        <MediaQuery minWidth={breakpoints.medium.minWidth} maxWidth={breakpoints.large.maxWidth - 1}>
-          {authenticatedUser ? <AuthMediumLayout username={username} /> : <MediumLayout />}
-        </MediaQuery>
-        <MediaQuery minWidth={breakpoints.extraLarge.minWidth} maxWidth={breakpoints.extraExtraLarge.maxWidth}>
-          {authenticatedUser ? <AuthLargeLayout username={username} /> : <LargeLayout />}
-        </MediaQuery>
-
-        <div className={classNames('content', { 'align-items-center mt-0': authenticatedUser })}>
-          {children}
-        </div>
-      </div>
-    </>
-  );
-};
-
-BaseComponent.defaultProps = {
-  showWelcomeBanner: false,
-};
-
-BaseComponent.propTypes = {
-  children: PropTypes.node.isRequired,
-  showWelcomeBanner: PropTypes.bool,
-};
-
-export default BaseComponent;

src/base-component/index.jsx

@@ -1,2 +0,0 @@
-/* eslint-disable import/prefer-default-export */
-export { default as BaseComponent } from './BaseComponent';

src/base-component/tests/BaseComponent.test.jsx

@@ -1,52 +0,0 @@
-import React from 'react';
-
-import { IntlProvider } from '@edx/frontend-platform/i18n';
-import { mount } from 'enzyme';
-
-import LargeLayout from '../LargeLayout';
-import MediumLayout from '../MediumLayout';
-import SmallLayout from '../SmallLayout';
-
-describe('ScreenLayout', () => {
-  it('should display the form, pass as a child in SmallScreenLayout', () => {
-    const smallScreen = mount(
-      <IntlProvider locale="en">
-        <div>
-          <SmallLayout />
-          <form>
-            <input type="text" />
-          </form>
-        </div>
-      </IntlProvider>,
-    );
-    expect(smallScreen.find('form').exists()).toEqual(true);
-  });
-
-  it('should display the form, pass as a child in MediumScreenLayout', () => {
-    const mediumScreen = mount(
-      <IntlProvider locale="en">
-        <div>
-          <MediumLayout />
-          <form>
-            <input type="text" />
-          </form>
-        </div>
-      </IntlProvider>,
-    );
-    expect(mediumScreen.find('form').exists()).toEqual(true);
-  });
-
-  it('should display the form, pass as a child in LargeScreenLayout', () => {
-    const largeScreen = mount(
-      <IntlProvider locale="en">
-        <div>
-          <LargeLayout />
-          <form>
-            <input type="text" />
-          </form>
-        </div>
-      </IntlProvider>,
-    );
-    expect(largeScreen.find('form').exists()).toEqual(true);
-  });
-});

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

@@ -0,0 +1,50 @@
+import React from 'react';
+
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+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();
+  });
+});

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

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Hyperlink, Image } from '@edx/paragon';
+import { Hyperlink, Image } from '@openedx/paragon';
 import classNames from 'classnames';
 
 import messages from './messages';

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

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Hyperlink, Image } from '@edx/paragon';
+import { Hyperlink, Image } from '@openedx/paragon';
 import classNames from 'classnames';
 
 import messages from './messages';
@@ -23,13 +23,15 @@ const MediumLayout = () => {
             <div>
               <h1
                 className={classNames(
-                  'display-1 text-white mt-5 mb-5 mr-2',
+                  'display-1 text-white mt-5 mb-5 mr-2 main-heading',
                   { 'ml-4.5': getConfig().SITE_NAME !== 'edX' },
                 )}
               >
-                <span className="mr-2">{formatMessage(messages['start.learning'])}</span>
-                <span className="text-accent-a d-inline-block">
-                  {formatMessage(messages['with.site.name'], { siteName: getConfig().SITE_NAME })}
+                <span>
+                  {formatMessage(messages['start.learning'])}{' '}
+                  <span className="text-accent-a d-inline-block">
+                    {formatMessage(messages['with.site.name'], { siteName: getConfig().SITE_NAME })}
+                  </span>
                 </span>
               </h1>
             </div>

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

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Hyperlink, Image } from '@edx/paragon';
+import { Hyperlink, Image } from '@openedx/paragon';
 import classNames from 'classnames';
 
 import messages from './messages';
@@ -17,17 +17,18 @@ const SmallLayout = () => {
         <Hyperlink destination={getConfig().MARKETING_SITE_BASE_URL}>
           <Image className="logo-small" alt={getConfig().SITE_NAME} src={getConfig().LOGO_WHITE_URL} />
         </Hyperlink>
-        <div className="d-flex align-items-center mb-3 mt-3 mr-3">
+        <div className="d-flex align-items-center m-3.5">
           <div className={classNames({ 'small-yellow-line mr-n2.5': getConfig().SITE_NAME === 'edX' })} />
           <h1
             className={classNames(
               'text-white mt-3.5 mb-3.5',
-              { 'ml-4.5': getConfig().SITE_NAME !== 'edX' },
             )}
           >
-            <span className="mr-1">{formatMessage(messages['start.learning'])}</span>
-            <span className="text-accent-a d-inline-block">
-              {formatMessage(messages['with.site.name'], { siteName: getConfig().SITE_NAME })}
+            <span>
+              {formatMessage(messages['start.learning'])}{' '}
+              <span className="text-accent-a d-inline-block">
+                {formatMessage(messages['with.site.name'], { siteName: getConfig().SITE_NAME })}
+              </span>
             </span>
           </h1>
         </div>

src/base-container/components/default-layout/index.jsx

@@ -0,0 +1,3 @@
+export { default as DefaultLargeLayout } from './LargeLayout';
+export { default as DefaultMediumLayout } from './MediumLayout';
+export { default as DefaultSmallLayout } from './SmallLayout';

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

@@ -0,0 +1,16 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+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;

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

@@ -0,0 +1,34 @@
+import React from 'react';
+
+import { getConfig } from '@edx/frontend-platform';
+import { useIntl } from '@edx/frontend-platform/i18n';
+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(${getConfig().BANNER_IMAGE_EXTRA_SMALL})` }}
+    >
+      <Hyperlink destination={getConfig().MARKETING_SITE_BASE_URL}>
+        <Image className="company-logo" alt={getConfig().SITE_NAME} src={getConfig().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;

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

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import { getConfig } from '@edx/frontend-platform';
+import { useIntl } from '@edx/frontend-platform/i18n';
+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(${getConfig().BANNER_IMAGE_LARGE})` }}
+    >
+      <Hyperlink destination={getConfig().MARKETING_SITE_BASE_URL}>
+        <Image className="company-logo position-absolute" alt={getConfig().SITE_NAME} src={getConfig().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;

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

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import { getConfig } from '@edx/frontend-platform';
+import { useIntl } from '@edx/frontend-platform/i18n';
+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(${getConfig().BANNER_IMAGE_MEDIUM})` }}
+    >
+      <Hyperlink destination={getConfig().MARKETING_SITE_BASE_URL}>
+        <Image className="company-logo" alt={getConfig().SITE_NAME} src={getConfig().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;

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

@@ -0,0 +1,34 @@
+import React from 'react';
+
+import { getConfig } from '@edx/frontend-platform';
+import { useIntl } from '@edx/frontend-platform/i18n';
+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(${getConfig().BANNER_IMAGE_SMALL})` }}
+    >
+      <Hyperlink destination={getConfig().MARKETING_SITE_BASE_URL}>
+        <Image className="company-logo" alt={getConfig().SITE_NAME} src={getConfig().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;

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';

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;
+  }
+}

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

@@ -0,0 +1,16 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+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;

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

@@ -2,12 +2,12 @@ import React from 'react';
 
 import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Hyperlink, Image } from '@edx/paragon';
+import { Hyperlink, Image } from '@openedx/paragon';
 import PropTypes from 'prop-types';
 
 import messages from './messages';
 
-const AuthLargeLayout = ({ username }) => {
+const LargeLayout = ({ fullName }) => {
   const { formatMessage } = useIntl();
 
   return (
@@ -20,7 +20,7 @@ const AuthLargeLayout = ({ username }) => {
           <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: getConfig().SITE_NAME, username })}
+              {formatMessage(messages['welcome.to.platform'], { siteName: getConfig().SITE_NAME, fullName })}
             </h1>
             <h2 className="complete-your-profile">
               {formatMessage(messages['complete.your.profile.1'])}
@@ -42,8 +42,8 @@ const AuthLargeLayout = ({ username }) => {
   );
 };
 
-AuthLargeLayout.propTypes = {
-  username: PropTypes.string.isRequired,
+LargeLayout.propTypes = {
+  fullName: PropTypes.string.isRequired,
 };
 
-export default AuthLargeLayout;
+export default LargeLayout;

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

@@ -2,12 +2,12 @@ import React from 'react';
 
 import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Hyperlink, Image } from '@edx/paragon';
+import { Hyperlink, Image } from '@openedx/paragon';
 import PropTypes from 'prop-types';
 
 import messages from './messages';
 
-const AuthMediumLayout = ({ username }) => {
+const MediumLayout = ({ fullName }) => {
   const { formatMessage } = useIntl();
 
   return (
@@ -22,7 +22,7 @@ const AuthMediumLayout = ({ username }) => {
             <div className="medium-yellow-line mt-5 mr-n2" />
             <div>
               <h1 className="h3 data-hj-suppress mw-320">
-                {formatMessage(messages['welcome.to.platform'], { siteName: getConfig().SITE_NAME, username })}
+                {formatMessage(messages['welcome.to.platform'], { siteName: getConfig().SITE_NAME, fullName })}
               </h1>
               <h2 className="display-1">
                 {formatMessage(messages['complete.your.profile.1'])}
@@ -45,8 +45,8 @@ const AuthMediumLayout = ({ username }) => {
   );
 };
 
-AuthMediumLayout.propTypes = {
-  username: PropTypes.string.isRequired,
+MediumLayout.propTypes = {
+  fullName: PropTypes.string.isRequired,
 };
 
-export default AuthMediumLayout;
+export default MediumLayout;

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

@@ -2,12 +2,12 @@ import React from 'react';
 
 import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Hyperlink, Image } from '@edx/paragon';
+import { Hyperlink, Image } from '@openedx/paragon';
 import PropTypes from 'prop-types';
 
 import messages from './messages';
 
-const AuthSmallLayout = ({ username }) => {
+const SmallLayout = ({ fullName }) => {
   const { formatMessage } = useIntl();
 
   return (
@@ -16,11 +16,11 @@ const AuthSmallLayout = ({ username }) => {
       <Hyperlink destination={getConfig().MARKETING_SITE_BASE_URL}>
         <Image className="logo-small" alt={getConfig().SITE_NAME} src={getConfig().LOGO_URL} />
       </Hyperlink>
-      <div className="d-flex align-items-center mb-3 mt-3 mr-3">
+      <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: getConfig().SITE_NAME, username })}
+            {formatMessage(messages['welcome.to.platform'], { siteName: getConfig().SITE_NAME, fullName })}
           </h1>
           <h2 className="h1">
             {formatMessage(messages['complete.your.profile.1'])}
@@ -34,8 +34,8 @@ const AuthSmallLayout = ({ username }) => {
   );
 };
 
-AuthSmallLayout.propTypes = {
-  username: PropTypes.string.isRequired,
+SmallLayout.propTypes = {
+  fullName: PropTypes.string.isRequired,
 };
 
-export default AuthSmallLayout;
+export default SmallLayout;

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';

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

@@ -1,17 +1,11 @@
 import { defineMessages } from '@edx/frontend-platform/i18n';
 
 const messages = defineMessages({
-  'start.learning': {
-    id: 'start.learning',
-    defaultMessage: 'Start learning',
-    description: 'Header text for logistration MFE pages',
+  'welcome.to.platform': {
+    id: 'welcome.to.platform',
+    defaultMessage: 'Welcome to {siteName}, {fullName}!',
+    description: 'Welcome message that appears on progressive profile page',
   },
-  'with.site.name': {
-    id: 'with.site.name',
-    defaultMessage: 'with {siteName}',
-    description: 'Header text with site name for logistration MFE pages',
-  },
-  // authenticated user base component text
   'complete.your.profile.1': {
     id: 'complete.your.profile.1',
     defaultMessage: 'Complete',
@@ -22,11 +16,6 @@ const messages = defineMessages({
     defaultMessage: 'your profile',
     description: 'part of text "complete your profile"',
   },
-  'welcome.to.platform': {
-    id: 'welcome.to.platform',
-    defaultMessage: 'Welcome to {siteName}, {username}!',
-    description: 'Welcome message that appears on progressive profile page',
-  },
 });
 
 export default messages;

src/base-container/index.jsx

@@ -0,0 +1,72 @@
+import React from 'react';
+
+import { getConfig } from '@edx/frontend-platform';
+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 = getConfig().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;

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

@@ -0,0 +1,46 @@
+import React from 'react';
+
+import { mergeConfig } from '@edx/frontend-platform';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { render } from '@testing-library/react';
+import { Context as ResponsiveContext } from 'react-responsive';
+
+import BaseContainer from '../index';
+
+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', () => {
+    mergeConfig({
+      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();
+  });
+});

src/cohesion/constants.js

@@ -0,0 +1,22 @@
+export const PAGE_TYPES = {
+  ACCOUNT_CREATION: 'account-creation',
+  SIGN_IN: 'sign-in',
+};
+
+export const ELEMENT_TYPES = {
+  BUTTON: 'BUTTON',
+};
+
+export const EVENT_TYPES = { ElementClicked: 'redventures.usertracking.v3.ElementClicked' };
+
+export const ELEMENT_TEXT = {
+  CREATE_ACCOUNT: 'create-account',
+  OPT_IN_TEXT: 'I agree that edx may send me marketing messages',
+  SIGN_IN: 'Sign In',
+};
+
+export const ELEMENT_NAME = {
+  SIGN_IN: PAGE_TYPES.SIGN_IN,
+  OPT_OUT: 'opt-out',
+  CREATE_ACCOUNT: 'Create an account for free',
+};

src/cohesion/data/actions.js

@@ -0,0 +1,6 @@
+export const SET_COHESION_EVENT_ELEMENT_STATES = 'SET_COHESION_EVENT_ELEMENT_STATES';
+
+export const setCohesionEventStates = (eventData) => ({
+  type: SET_COHESION_EVENT_ELEMENT_STATES,
+  payload: eventData,
+});

src/cohesion/data/reducers.js

@@ -0,0 +1,17 @@
+import { SET_COHESION_EVENT_ELEMENT_STATES } from './actions';
+
+export const storeName = 'cohesion';
+
+export const defaultState = {
+  eventData: {},
+};
+
+export const reducer = (state = defaultState, action = {}) => {
+  if (action.type === SET_COHESION_EVENT_ELEMENT_STATES) {
+    return {
+      ...state,
+      eventData: action.payload,
+    };
+  }
+  return state;
+};

src/cohesion/trackers.js

@@ -0,0 +1,24 @@
+import { EVENT_TYPES } from './constants';
+
+/**
+ * Tracks cohesion events by setting the page type and tracking a click event.
+ *
+ * @param {string} pageType - The type of page where the event occurred.
+ * @param {string} elementType - The type of the web element (e.g., 'BUTTON', 'LINK').
+ * @param {string} webElementText - The text content of the web element.
+ * @param {string} webElementName - The name of the web element.
+ */
+const trackCohesionEvent = (eventData) => {
+  window.chsn_pageType = eventData.pageType;
+  const webElement = {
+    elementType: eventData.elementType,
+    text: eventData.webElementText,
+    name: eventData.webElementName,
+  };
+  window.tagular?.('beam', {
+    '@type': EVENT_TYPES.ElementClicked,
+    webElement,
+  });
+};
+
+export default trackCohesionEvent;

src/cohesion/utils.js

@@ -0,0 +1,6 @@
+const mockTagular = () => {
+  const getTagular = jest.fn();
+  window.tagular = getTagular;
+};
+
+export default mockTagular;

src/common-components/EmbeddedRegistrationRoute.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+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;

src/common-components/EnterpriseSSO.jsx

@@ -2,15 +2,16 @@ import React from 'react';
 
 import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import {
   Button, Form,
-} from '@edx/paragon';
-import { faSignInAlt } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+  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';
+import { LOGIN_PAGE, SUPPORTED_ICON_CLASSES } from '../data/constants';
 
 /**
  * This component renders the Single sign-on (SSO) button only for the tpa provider passed
@@ -18,7 +19,8 @@ import messages from './messages';
 const EnterpriseSSO = (props) => {
   const { formatMessage } = useIntl();
   const tpaProvider = props.provider;
-  const disablePublicAccountCreation = getConfig().ALLOW_PUBLIC_ACCOUNT_CREATION === false;
+  const hideRegistrationLink = getConfig().ALLOW_PUBLIC_ACCOUNT_CREATION === false
+    || getConfig().SHOW_REGISTRATION_LINKS === false;
 
   const handleSubmit = (e, url) => {
     e.preventDefault();
@@ -47,16 +49,18 @@ const EnterpriseSSO = (props) => {
               >
                 {tpaProvider.iconImage ? (
                   <div aria-hidden="true">
-                    <img className="icon-image" src={tpaProvider.iconImage} alt={`icon ${tpaProvider.name}`} />
+                    <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="font-container" aria-hidden="true">
-                        <FontAwesomeIcon
-                          icon={SUPPORTED_ICON_CLASSES.includes(tpaProvider.iconClass) ? ['fab', tpaProvider.iconClass] : faSignInAlt}
-                        />
+                      <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>
                     </>
@@ -71,7 +75,7 @@ const EnterpriseSSO = (props) => {
                 className="w-100"
                 onClick={(e) => handleClick(e)}
               >
-                {disablePublicAccountCreation
+                {hideRegistrationLink
                   ? formatMessage(messages['enterprisetpa.login.button.text.public.account.creation.disabled'])
                   : formatMessage(messages['enterprisetpa.login.button.text'])}
               </Button>

src/common-components/FormGroup.jsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 
 import {
   Form, TransitionReplace,
-} from '@edx/paragon';
+} from '@openedx/paragon';
 import PropTypes from 'prop-types';
 
 const FormGroup = (props) => {
@@ -27,7 +27,7 @@ const FormGroup = (props) => {
         readOnly={props.readOnly}
         type={props.type}
         aria-invalid={props.errorMessage !== ''}
-        className="form-field"
+        className="form-group__form-field"
         autoComplete={props.autoComplete}
         spellCheck={props.spellCheck}
         name={props.name}

src/common-components/InstitutionLogistration.jsx

@@ -2,8 +2,8 @@ import React from 'react';
 
 import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Button, Hyperlink, Icon } from '@edx/paragon';
-import { Institution } from '@edx/paragon/icons';
+import { Button, Hyperlink, Icon } from '@openedx/paragon';
+import { Institution } from '@openedx/paragon/icons';
 import PropTypes from 'prop-types';
 
 import messages from './messages';
@@ -42,7 +42,7 @@ const InstitutionLogistration = props => {
     <>
       <div className="d-flex justify-content-left mb-4 mt-2">
         <div className="flex-column">
-          <h4 className="mb-2 font-weight-bold institute-heading">
+          <h4 className="mb-2 font-weight-bold institutions__heading">
             {headingTitle}
           </h4>
           <p className="mb-2">
@@ -57,10 +57,10 @@ const InstitutionLogistration = props => {
               <tr key={provider} className="pgn__data-table-row">
                 <td>
                   <Hyperlink
-                    className="btn nav-item p-0 mb-1 secondary-provider-link"
+                    className="btn nav-item p-0 mb-1 institutions--provider-link"
                     destination={lmsBaseUrl + provider.loginUrl}
                   >
-                    {provider.name}
+                    {provider?.name}
                   </Hyperlink>
                 </td>
               </tr>

src/common-components/PasswordField.jsx

@@ -1,41 +1,103 @@
 import React, { useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
 import {
   Form, Icon, IconButton, OverlayTrigger, Tooltip, useToggle,
-} from '@edx/paragon';
+} from '@openedx/paragon';
 import {
   Check, Remove, Visibility, VisibilityOff,
-} from '@edx/paragon/icons';
+} from '@openedx/paragon/icons';
 import PropTypes from 'prop-types';
 
-import { LETTER_REGEX, NUMBER_REGEX } from '../data/constants';
 import messages from './messages';
+import { LETTER_REGEX, NUMBER_REGEX } from '../data/constants';
+import { clearRegistrationBackendError, fetchRealtimeValidations } from '../register/data/actions';
+import { validatePasswordField } from '../register/data/utils';
 
 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) => {
-    if (props.handleBlur) { props.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="password" src={VisibilityOff} iconAs={Icon} onClick={setHiddenTrue} size="sm" variant="secondary" alt={formatMessage(messages['hide.password'])} />
+    <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="password" src={Visibility} iconAs={Icon} onClick={setHiddenFalse} size="sm" variant="secondary" alt={formatMessage(messages['show.password'])} />
+    <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}`}>
@@ -59,7 +121,7 @@ const PasswordField = (props) => {
       <OverlayTrigger key="tooltip" placement={placement} overlay={tooltip} show={showTooltip}>
         <Form.Control
           as="input"
-          className="form-field"
+          className="form-group__form-field"
           type={isPasswordHidden ? 'password' : 'text'}
           name={props.name}
           value={props.value}
@@ -76,7 +138,7 @@ const PasswordField = (props) => {
       {props.errorMessage !== '' && (
         <Form.Control.Feedback key="error" className="form-text-size" hasIcon={false} feedback-for={props.name} type="invalid">
           {props.errorMessage}
-          <span className="sr-only">{formatMessage(messages['password.sr.only.helping.text'])}</span>
+          {props.showScreenReaderText && <span className="sr-only">{formatMessage(messages['password.sr.only.helping.text'])}</span>}
         </Form.Control.Feedback>
       )}
     </Form.Group>
@@ -89,7 +151,9 @@ PasswordField.defaultProps = {
   handleBlur: null,
   handleFocus: null,
   handleChange: () => {},
+  handleErrorChange: null,
   showRequirements: true,
+  showScreenReaderText: true,
   autoComplete: null,
 };
 
@@ -100,10 +164,12 @@ PasswordField.propTypes = {
   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;

src/common-components/RedirectLogistration.jsx

@@ -1,14 +1,19 @@
-import React from 'react';
+import { useSelector } from 'react-redux';
 
 import { getConfig } from '@edx/frontend-platform';
 import PropTypes from 'prop-types';
-import { Redirect } from 'react-router-dom';
+import { Navigate } from 'react-router-dom';
 
-import { AUTHN_PROGRESSIVE_PROFILING, RECOMMENDATIONS } from '../data/constants';
-import { setCookie } from '../data/utils';
+import trackCohesionEvent from '../cohesion/trackers';
+import {
+  AUTHN_PROGRESSIVE_PROFILING, RECOMMENDATIONS, REDIRECT,
+} from '../data/constants';
+import setCookie from '../data/utils/cookies';
+import { redirectWithDelay } from '../data/utils/dataUtils';
 
 const RedirectLogistration = (props) => {
   const {
+    authenticatedUser,
     finishAuthUrl,
     redirectUrl,
     redirectToProgressiveProfilingPage,
@@ -17,10 +22,18 @@ const RedirectLogistration = (props) => {
     redirectToRecommendationsPage,
     educationLevel,
     userId,
+    registrationEmbedded,
+    host,
+    currectProvider,
   } = props;
+  const cohesionEventData = useSelector(state => state.cohesion.eventData);
   let finalRedirectUrl = '';
 
   if (success) {
+    // This event is used by cohesion upon successful login and registration
+    if (!currectProvider) {
+      trackCohesionEvent(cohesionEventData);
+    }
     // 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
@@ -35,15 +48,24 @@ const RedirectLogistration = (props) => {
     if (redirectToProgressiveProfilingPage) {
       // TODO: Do we still need this cookie?
       setCookie('van-504-returning-user', true);
+
+      if (registrationEmbedded) {
+        window.parent.postMessage({
+          action: REDIRECT,
+          redirectUrl: getConfig().POST_REGISTRATION_REDIRECT_URL,
+        }, host);
+        return null;
+      }
       const registrationResult = { redirectUrl: finalRedirectUrl, success };
       return (
-        <Redirect to={{
-          pathname: AUTHN_PROGRESSIVE_PROFILING,
-          state: {
+        <Navigate
+          to={AUTHN_PROGRESSIVE_PROFILING}
+          state={{
             registrationResult,
             optionalFields,
-          },
-        }}
+            authenticatedUser,
+          }}
+          replace
         />
       );
     }
@@ -52,25 +74,25 @@ const RedirectLogistration = (props) => {
     if (redirectToRecommendationsPage) {
       const registrationResult = { redirectUrl: finalRedirectUrl, success };
       return (
-        <Redirect to={{
-          pathname: RECOMMENDATIONS,
-          state: {
+        <Navigate
+          to={RECOMMENDATIONS}
+          state={{
             registrationResult,
             educationLevel,
             userId,
-          },
-        }}
+          }}
+          replace
         />
       );
     }
-
-    window.location.href = finalRedirectUrl;
+    redirectWithDelay(finalRedirectUrl);
   }
 
   return null;
 };
 
 RedirectLogistration.defaultProps = {
+  authenticatedUser: {},
   educationLevel: null,
   finishAuthUrl: null,
   success: false,
@@ -79,9 +101,13 @@ RedirectLogistration.defaultProps = {
   optionalFields: {},
   redirectToRecommendationsPage: false,
   userId: null,
+  registrationEmbedded: false,
+  host: '',
+  currectProvider: '',
 };
 
 RedirectLogistration.propTypes = {
+  authenticatedUser: PropTypes.shape({}),
   educationLevel: PropTypes.string,
   finishAuthUrl: PropTypes.string,
   success: PropTypes.bool,
@@ -90,6 +116,9 @@ RedirectLogistration.propTypes = {
   optionalFields: PropTypes.shape({}),
   redirectToRecommendationsPage: PropTypes.bool,
   userId: PropTypes.number,
+  registrationEmbedded: PropTypes.bool,
+  host: PropTypes.string,
+  currectProvider: PropTypes.string,
 };
 
 export default RedirectLogistration;

src/common-components/RouteTracker.jsx

@@ -0,0 +1,15 @@
+import { useEffect } from 'react';
+
+import { useLocation } from 'react-router-dom';
+
+const RouteTracker = () => {
+  const location = useLocation();
+
+  useEffect(() => {
+    window.tagular?.('pageView');
+  }, [location]);
+
+  return null;
+};
+
+export default RouteTracker;

src/common-components/SocialAuthProviders.jsx

@@ -1,23 +1,43 @@
 import React from 'react';
+import { useSelector } from 'react-redux';
 
 import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { faSignInAlt } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+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';
+import { ELEMENT_TYPES, PAGE_TYPES } from '../cohesion/constants';
+import trackCohesionEvent from '../cohesion/trackers';
+import {
+  LOGIN_PAGE, REGISTER_PAGE, SUPPORTED_ICON_CLASSES,
+} from '../data/constants';
+import { setCookie } from '../data/utils';
+import { redirectWithDelay } from '../data/utils/dataUtils';
 
 const SocialAuthProviders = (props) => {
   const { formatMessage } = useIntl();
   const { referrer, socialAuthProviders } = props;
+  const registrationFields = useSelector(state => state.register.registrationFormData);
 
-  function handleSubmit(e) {
+  function handleSubmit(e, providerName) {
     e.preventDefault();
+    const eventData = {
+      pageType: referrer === LOGIN_PAGE ? PAGE_TYPES.SIGN_IN : PAGE_TYPES.ACCOUNT_CREATION,
+      elementType: ELEMENT_TYPES.BUTTON,
+      webElementText: providerName,
+      webElementName: providerName.toLowerCase(),
+    };
+    // This event is used by cohesion upon successful login
+    trackCohesionEvent(eventData);
 
+    if (referrer === REGISTER_PAGE) {
+      setCookie('marketingEmailsOptIn', registrationFields?.configurableFormFields?.marketingEmailsOptIn);
+    }
     const url = e.currentTarget.dataset.providerUrl;
-    window.location.href = getConfig().LMS_BASE_URL + url;
+    redirectWithDelay(getConfig().LMS_BASE_URL + url);
   }
 
   const socialAuth = socialAuthProviders.map((provider, index) => (
@@ -27,18 +47,20 @@ const SocialAuthProviders = (props) => {
       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}
+      onClick={(event) => handleSubmit(event, provider?.name)}
     >
       {provider.iconImage ? (
         <div aria-hidden="true">
-          <img className="icon-image" src={provider.iconImage} alt={`icon ${provider.name}`} />
+          <img className="btn-tpa__image-icon" src={provider.iconImage} alt={`icon ${provider.name}`} />
         </div>
       )
         : (
-          <div className="font-container" aria-hidden="true">
-            <FontAwesomeIcon
-              icon={SUPPORTED_ICON_CLASSES.includes(provider.iconClass) ? ['fab', provider.iconClass] : faSignInAlt}
-            />
+          <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>

src/common-components/ThirdPartyAuth.jsx

@@ -2,17 +2,23 @@ import React from 'react';
 
 import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
+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 messages from './messages';
+import {
+  ENTERPRISE_LOGIN_URL, LOGIN_PAGE, PENDING_STATE, REGISTER_PAGE,
+} from '../data/constants';
+
 import {
   RenderInstitutionButton,
   SocialAuthProviders,
-} from '../common-components';
-import {
-  PENDING_STATE, REGISTER_PAGE,
-} from '../data/constants';
-import messages from './messages';
+} from './index';
 
 /**
  * This component renders the Single sign-on (SSO) buttons for the providers passed.
@@ -20,33 +26,60 @@ import messages from './messages';
 const ThirdPartyAuth = (props) => {
   const { formatMessage } = useIntl();
   const {
-    providers, secondaryProviders, currentProvider, handleInstitutionLogin, thirdPartyAuthApiStatus,
+    providers,
+    secondaryProviders,
+    currentProvider,
+    handleInstitutionLogin,
+    thirdPartyAuthApiStatus,
+    isLoginPage,
   } = props;
   const isInstitutionAuthActive = !!secondaryProviders.length && !currentProvider;
   const isSocialAuthActive = !!providers.length && !currentProvider;
   const isEnterpriseLoginDisabled = getConfig().DISABLE_ENTERPRISE_LOGIN;
+  const enterpriseLoginURL = getConfig().LMS_BASE_URL + ENTERPRISE_LOGIN_URL;
+  const isThirdPartyAuthActive = isSocialAuthActive || (isEnterpriseLoginDisabled && isInstitutionAuthActive);
 
   return (
     <>
       {((isEnterpriseLoginDisabled && isInstitutionAuthActive) || isSocialAuthActive) && (
         <div className="mt-4 mb-3 h4">
-          {formatMessage(messages['registration.other.options.heading'])}
+          {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 ? (
-        <Skeleton className="tpa-skeleton" height={36} count={2} />
+      {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['register.institution.login.button'])}
+              buttonTitle={formatMessage(messages['institution.login.button'])}
             />
           )}
           {isSocialAuthActive && (
             <div className="row m-0">
-              <SocialAuthProviders socialAuthProviders={providers} referrer={REGISTER_PAGE} />
+              <SocialAuthProviders
+                socialAuthProviders={providers}
+                referrer={isLoginPage ? LOGIN_PAGE : REGISTER_PAGE}
+              />
             </div>
           )}
         </>
@@ -59,7 +92,8 @@ ThirdPartyAuth.defaultProps = {
   currentProvider: null,
   providers: [],
   secondaryProviders: [],
-  thirdPartyAuthApiStatus: 'pending',
+  thirdPartyAuthApiStatus: PENDING_STATE,
+  isLoginPage: false,
 };
 
 ThirdPartyAuth.propTypes = {
@@ -86,6 +120,7 @@ ThirdPartyAuth.propTypes = {
     }),
   ),
   thirdPartyAuthApiStatus: PropTypes.string,
+  isLoginPage: PropTypes.bool,
 };
 
 export default ThirdPartyAuth;

src/common-components/ThirdPartyAuthAlert.jsx

@@ -2,11 +2,12 @@ import React from 'react';
 
 import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Alert } from '@edx/paragon';
+import { Alert } from '@openedx/paragon';
 import PropTypes from 'prop-types';
 
-import { LOGIN_PAGE, REGISTER_PAGE } from '../data/constants';
 import messages from './messages';
+import { LOGIN_PAGE, REGISTER_PAGE } from '../data/constants';
+import setCookie from '../data/utils/cookies';
 
 const ThirdPartyAuthAlert = (props) => {
   const { formatMessage } = useIntl();
@@ -20,7 +21,10 @@ const ThirdPartyAuthAlert = (props) => {
     message = formatMessage(messages['register.third.party.auth.account.not.linked'], { currentProvider, platformName });
   }
 
-  if (!currentProvider) {
+  if (currentProvider) {
+    // Setting this cookie to capture marketingEmailsOptIn for SSO flow on the onboarding component
+    setCookie('ssoPipelineRedirectionDone', true);
+  } else {
     return null;
   }
 

src/common-components/UnAuthOnlyRoute.jsx

@@ -1,16 +1,17 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import { getConfig } from '@edx/frontend-platform';
 import { fetchAuthenticatedUser, getAuthenticatedUser } from '@edx/frontend-platform/auth';
-import { Route } from 'react-router-dom';
+import PropTypes from 'prop-types';
 
-import { DEFAULT_REDIRECT_URL } from '../data/constants';
+import { RESET_PAGE } from '../data/constants';
+import { updatePathWithQueryParams } from '../data/utils';
 
 /**
  * This wrapper redirects the requester to our default redirect url if they are
  * already authenticated.
  */
-const UnAuthOnlyRoute = (props) => {
+const UnAuthOnlyRoute = ({ children }) => {
   const [authUser, setAuthUser] = useState({});
   const [isReady, setIsReady] = useState(false);
 
@@ -23,14 +24,23 @@ const UnAuthOnlyRoute = (props) => {
 
   if (isReady) {
     if (authUser && authUser.username) {
-      global.location.href = getConfig().LMS_BASE_URL.concat(DEFAULT_REDIRECT_URL);
+      const updatedPath = updatePathWithQueryParams(window.location.pathname);
+      if (updatedPath.startsWith(RESET_PAGE)) {
+        global.location.href = getConfig().LMS_BASE_URL;
+        return null;
+      }
+      global.location.href = getConfig().LMS_BASE_URL.concat(updatedPath);
       return null;
     }
 
-    return <Route {...props} />;
+    return children;
   }
 
   return null;
 };
 
+UnAuthOnlyRoute.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
 export default UnAuthOnlyRoute;

src/common-components/Zendesk.jsx

@@ -5,6 +5,7 @@ import { useIntl } from '@edx/frontend-platform/i18n';
 import Zendesk from 'react-zendesk';
 
 import messages from './messages';
+import { REGISTER_EMBEDDED_PAGE } from '../data/constants';
 
 const ZendeskHelp = () => {
   const { formatMessage } = useIntl();
@@ -16,6 +17,9 @@ const ZendeskHelp = () => {
       },
       chat: {
         suppress: false,
+        departments: {
+          enabled: ['account settings', 'billing and payments', 'certificates', 'deadlines', 'errors and technical issues', 'other', 'proctoring'],
+        },
       },
       contactForm: {
         ticketForms: [
@@ -45,6 +49,10 @@ const ZendeskHelp = () => {
     },
   };
 
+  if (window.location.pathname === REGISTER_EMBEDDED_PAGE) {
+    return null;
+  }
+
   return (
     <Zendesk defer zendeskKey={getConfig().ZENDESK_KEY} {...setting} />
   );

src/common-components/data/actions.js

@@ -13,9 +13,15 @@ export const getThirdPartyAuthContextBegin = () => ({
   type: THIRD_PARTY_AUTH_CONTEXT.BEGIN,
 });
 
-export const getThirdPartyAuthContextSuccess = (fieldDescriptions, optionalFields, thirdPartyAuthContext) => ({
+export const getThirdPartyAuthContextSuccess = (
+  fieldDescriptions,
+  optionalFields,
+  thirdPartyAuthContext,
+  countriesCodesList) => ({
   type: THIRD_PARTY_AUTH_CONTEXT.SUCCESS,
-  payload: { fieldDescriptions, optionalFields, thirdPartyAuthContext },
+  payload: {
+    fieldDescriptions, optionalFields, thirdPartyAuthContext, countriesCodesList,
+  },
 });
 
 export const getThirdPartyAuthContextFailure = () => ({

src/common-components/data/constants.js

@@ -0,0 +1,83 @@
+export const registerFields = {
+  fields: {
+    country: {
+      name: 'country',
+      error_message: 'Select your country or region of residence',
+    },
+    honor_code: {
+      name: 'honor_code',
+      type: 'tos_and_honor_code',
+      error_message: '',
+    },
+  },
+};
+
+export const progressiveProfilingFields = {
+  extended_profile: [],
+  fields: {
+    level_of_education: {
+      name: 'level_of_education',
+      type: 'select',
+      label: 'Highest level of education completed',
+      error_message: '',
+      options: [
+        [
+          'p',
+          'Doctorate',
+        ],
+        [
+          'm',
+          "Master's or professional degree",
+        ],
+        [
+          'b',
+          "Bachelor's degree",
+        ],
+        [
+          'a',
+          'Associate degree',
+        ],
+        [
+          'hs',
+          'Secondary/high school',
+        ],
+        [
+          'jhs',
+          'Junior secondary/junior high/middle school',
+        ],
+        [
+          'none',
+          'No formal education',
+        ],
+        [
+          'other',
+          'Other education',
+        ],
+      ],
+    },
+    gender: {
+      name: 'gender',
+      type: 'select',
+      label: 'Gender',
+      error_message: '',
+      options: [
+        [
+          'm',
+          'Male',
+        ],
+        [
+          'f',
+          'Female',
+        ],
+        [
+          'o',
+          'Other/Prefer Not to Say',
+        ],
+      ],
+    },
+  },
+};
+
+export const FIELD_LABELS = {
+  COUNTRY: 'country',
+};

src/common-components/data/reducers.js

@@ -1,11 +1,15 @@
-import { COMPLETE_STATE, PENDING_STATE } from '../../data/constants';
 import { THIRD_PARTY_AUTH_CONTEXT, THIRD_PARTY_AUTH_CONTEXT_CLEAR_ERROR_MSG } from './actions';
+import { COMPLETE_STATE, FAILURE_STATE, PENDING_STATE } from '../../data/constants';
 
 export const defaultState = {
   fieldDescriptions: {},
-  optionalFields: {},
+  optionalFields: {
+    fields: {},
+    extended_profile: [],
+  },
   thirdPartyAuthApiStatus: null,
   thirdPartyAuthContext: {
+    autoSubmitRegForm: false,
     currentProvider: null,
     finishAuthUrl: null,
     countryCode: null,
@@ -13,6 +17,7 @@ export const defaultState = {
     secondaryProviders: [],
     pipelineUserDetails: null,
     errorMessage: null,
+    welcomePageRedirectUrl: null,
   },
 };
 
@@ -26,16 +31,21 @@ const reducer = (state = defaultState, action = {}) => {
     case THIRD_PARTY_AUTH_CONTEXT.SUCCESS: {
       return {
         ...state,
-        fieldDescriptions: action.payload.fieldDescriptions.fields,
+        fieldDescriptions: action.payload.fieldDescriptions?.fields,
         optionalFields: action.payload.optionalFields,
         thirdPartyAuthContext: action.payload.thirdPartyAuthContext,
         thirdPartyAuthApiStatus: COMPLETE_STATE,
+        countriesCodesList: action.payload.countriesCodesList,
       };
     }
     case THIRD_PARTY_AUTH_CONTEXT.FAILURE:
       return {
         ...state,
-        thirdPartyAuthApiStatus: COMPLETE_STATE,
+        thirdPartyAuthApiStatus: FAILURE_STATE,
+        thirdPartyAuthContext: {
+          ...state.thirdPartyAuthContext,
+          errorMessage: null,
+        },
       };
     case THIRD_PARTY_AUTH_CONTEXT_CLEAR_ERROR_MSG:
       return {

src/common-components/data/sagas.js

@@ -1,16 +1,19 @@
+import { getConfig } from '@edx/frontend-platform';
 import { logError } from '@edx/frontend-platform/logging';
 import { call, put, takeEvery } from 'redux-saga/effects';
 
-import { setCountryFromThirdPartyAuthContext } from '../../register/data/actions';
 import {
   getThirdPartyAuthContextBegin,
   getThirdPartyAuthContextFailure,
   getThirdPartyAuthContextSuccess,
   THIRD_PARTY_AUTH_CONTEXT,
 } from './actions';
+import { progressiveProfilingFields, registerFields } from './constants';
 import {
+  getCountryList,
   getThirdPartyAuthContext,
 } from './service';
+import { setCountryFromThirdPartyAuthContext } from '../../register/data/actions';
 
 export function* fetchThirdPartyAuthContext(action) {
   try {
@@ -18,9 +21,25 @@ export function* fetchThirdPartyAuthContext(action) {
     const {
       fieldDescriptions, optionalFields, thirdPartyAuthContext,
     } = yield call(getThirdPartyAuthContext, action.payload.urlParams);
+    const countriesCodesList = (yield call(getCountryList)) || [];
 
     yield put(setCountryFromThirdPartyAuthContext(thirdPartyAuthContext.countryCode));
-    yield put(getThirdPartyAuthContextSuccess(fieldDescriptions, optionalFields, thirdPartyAuthContext));
+    // hard code country field, level of education and gender fields
+    if (getConfig().ENABLE_HARD_CODE_OPTIONAL_FIELDS) {
+      yield put(getThirdPartyAuthContextSuccess(
+        registerFields,
+        progressiveProfilingFields,
+        thirdPartyAuthContext,
+        countriesCodesList,
+      ));
+    } else {
+      yield put(getThirdPartyAuthContextSuccess(
+        fieldDescriptions,
+        optionalFields,
+        thirdPartyAuthContext,
+        countriesCodesList,
+      ));
+    }
   } catch (e) {
     yield put(getThirdPartyAuthContextFailure());
     logError(e);

src/common-components/data/service.js

@@ -1,5 +1,8 @@
 import { getConfig } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { logError } from '@edx/frontend-platform/logging';
+
+import { FIELD_LABELS } from './constants';
 
 // eslint-disable-next-line import/prefer-default-export
 export async function getThirdPartyAuthContext(urlParams) {
@@ -18,8 +21,33 @@ export async function getThirdPartyAuthContext(urlParams) {
       throw (e);
     });
   return {
-    fieldDescriptions: data.registrationFields || data.registration_fields,
-    optionalFields: data.optionalFields || data.optional_fields,
-    thirdPartyAuthContext: data.contextData || data.context_data,
+    fieldDescriptions: data.registrationFields || {},
+    optionalFields: data.optionalFields || {},
+    thirdPartyAuthContext: data.contextData || {},
   };
 }
+
+function extractCountryList(data) {
+  return data?.fields
+    .find(({ name }) => name === FIELD_LABELS.COUNTRY)
+    ?.options?.map(({ value }) => (value)) || [];
+}
+
+export async function getCountryList() {
+  try {
+    const requestConfig = {
+      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+      isPublic: true,
+    };
+
+    const { data } = await getAuthenticatedHttpClient()
+      .get(
+      `${getConfig().LMS_BASE_URL}/user_api/v1/account/registration/`,
+      requestConfig,
+      );
+    return extractCountryList(data);
+  } catch (e) {
+    logError(e);
+    return [];
+  }
+}

src/common-components/data/tests/reducer.test.js

@@ -58,7 +58,7 @@ describe('common components reducer', () => {
         providers: [],
         secondaryProviders: [],
         pipelineUserDetails: null,
-        errorMessage: 'An error occured',
+        errorMessage: 'An error occurred',
       },
     };
 

src/common-components/data/tests/sagas.test.js

@@ -8,6 +8,11 @@ import * as api from '../service';
 
 const { loggingService } = initializeMockLogging();
 
+jest.mock('../service', () => ({
+  getCountryList: jest.fn(),
+  getThirdPartyAuthContext: jest.fn(),
+}));
+
 describe('fetchThirdPartyAuthContext', () => {
   const params = {
     payload: { urlParams: {} },
@@ -31,6 +36,7 @@ describe('fetchThirdPartyAuthContext', () => {
         thirdPartyAuthContext: data,
         fieldDescriptions: {},
         optionalFields: {},
+        countriesCodesList: [],
       }));
 
     const dispatched = [];
@@ -44,7 +50,7 @@ describe('fetchThirdPartyAuthContext', () => {
     expect(dispatched).toEqual([
       actions.getThirdPartyAuthContextBegin(),
       setCountryFromThirdPartyAuthContext(),
-      actions.getThirdPartyAuthContextSuccess({}, {}, data),
+      actions.getThirdPartyAuthContextSuccess({}, {}, data, []),
     ]);
     getThirdPartyAuthContext.mockClear();
   });

src/common-components/index.jsx

@@ -1,6 +1,8 @@
 export { default as RedirectLogistration } from './RedirectLogistration';
 export { default as registerIcons } from './RegisterFaIcons';
+export { default as EmbeddedRegistrationRoute } from './EmbeddedRegistrationRoute';
 export { default as UnAuthOnlyRoute } from './UnAuthOnlyRoute';
+export { default as RouteTracker } from './RouteTracker';
 export { default as NotFoundPage } from './NotFoundPage';
 export { default as SocialAuthProviders } from './SocialAuthProviders';
 export { default as ThirdPartyAuthAlert } from './ThirdPartyAuthAlert';
@@ -11,5 +13,4 @@ export { default as saga } from './data/sagas';
 export { storeName } from './data/selectors';
 export { default as FormGroup } from './FormGroup';
 export { default as PasswordField } from './PasswordField';
-export { default as Logistration } from './Logistration';
 export { default as Zendesk } from './Zendesk';

src/common-components/messages.jsx

@@ -112,6 +112,26 @@ const messages = defineMessages({
     description: 'Select ticket form',
     defaultMessage: 'Please choose your request type:',
   },
+  'registration.other.options.heading': {
+    id: 'registration.other.options.heading',
+    defaultMessage: 'Or register with:',
+    description: 'A message that appears above third party auth providers i.e saml, google, facebook etc',
+  },
+  'institution.login.button': {
+    id: 'institution.login.button',
+    defaultMessage: 'Institution/campus credentials',
+    description: 'shows institutions list',
+  },
+  'login.other.options.heading': {
+    id: 'login.other.options.heading',
+    defaultMessage: 'Or sign in with:',
+    description: 'Text that appears above other sign in options like social auth buttons',
+  },
+  'enterprise.login.btn.text': {
+    id: 'enterprise.login.btn.text',
+    defaultMessage: 'Company or school credentials',
+    description: 'Company or school login link text.',
+  },
 });
 
 export default messages;

src/common-components/tests/EmbeddedRegistrationRoute.test.jsx

@@ -0,0 +1,77 @@
+/* eslint-disable import/no-import-module-exports */
+/* eslint-disable react/function-component-definition */
+import React from 'react';
+
+import { getConfig } from '@edx/frontend-platform';
+import { render } from '@testing-library/react';
+import { act } from 'react-dom/test-utils';
+import {
+  MemoryRouter, Route, BrowserRouter as Router, Routes,
+} from 'react-router-dom';
+
+import { PAGE_NOT_FOUND, REGISTER_EMBEDDED_PAGE } from '../../data/constants';
+import EmbeddedRegistrationRoute from '../EmbeddedRegistrationRoute';
+
+const RRD = require('react-router-dom');
+// Just render plain div with its children
+// eslint-disable-next-line react/prop-types
+RRD.BrowserRouter = ({ children }) => <div>{ children }</div>;
+module.exports = RRD;
+
+const TestApp = () => (
+  <Router>
+    <div>
+      <Routes>
+        <Route
+          path={REGISTER_EMBEDDED_PAGE}
+          element={<EmbeddedRegistrationRoute><span>Embedded Register Page</span></EmbeddedRegistrationRoute>}
+        />
+        <Route
+          path={PAGE_NOT_FOUND}
+          element={<span>Page not found</span>}
+        />
+      </Routes>
+    </div>
+  </Router>
+);
+
+describe('EmbeddedRegistrationRoute', () => {
+  const routerWrapper = () => (
+    <MemoryRouter initialEntries={[REGISTER_EMBEDDED_PAGE]}>
+      <TestApp />
+    </MemoryRouter>
+  );
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should not render embedded register page if host query param is not available in the url', async () => {
+    let embeddedRegistrationPage = null;
+    await act(async () => {
+      const { container } = await render(routerWrapper());
+      embeddedRegistrationPage = container;
+    });
+
+    const renderedPage = embeddedRegistrationPage.querySelector('span');
+    expect(renderedPage.textContent).toBe('Page not found');
+  });
+
+  it('should render embedded register page if host query param is available in the url (embedded)', async () => {
+    delete window.location;
+    window.location = {
+      href: getConfig().BASE_URL.concat(REGISTER_EMBEDDED_PAGE),
+      search: '?host=http://localhost/host-websit',
+    };
+
+    let embeddedRegistrationPage = null;
+    await act(async () => {
+      const { container } = await render(routerWrapper());
+      embeddedRegistrationPage = container;
+    });
+
+    const renderedPage = embeddedRegistrationPage.querySelector('span');
+    expect(renderedPage).toBeTruthy();
+    expect(renderedPage.textContent).toBe('Embedded Register Page');
+  });
+});

src/common-components/tests/FormField.test.jsx

@@ -1,9 +1,12 @@
-import React from 'react';
+import { Provider } from 'react-redux';
 
-import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
-import { mount } from 'enzyme';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { fireEvent, render } from '@testing-library/react';
 import { act } from 'react-dom/test-utils';
+import { MemoryRouter } from 'react-router-dom';
+import configureStore from 'redux-mock-store';
 
+import { fetchRealtimeValidations } from '../../register/data/actions';
 import FormGroup from '../FormGroup';
 import PasswordField from '../PasswordField';
 
@@ -17,19 +20,41 @@ describe('FormGroup', () => {
   };
 
   it('should show help text on field focus', () => {
-    const formGroup = mount(<FormGroup {...props} />);
-    expect(formGroup.find('.pgn-transition-replace-group').find('div#email-1').exists()).toBeFalsy();
+    const { queryByText, getByLabelText } = render(<FormGroup {...props} />);
+    const emailInput = getByLabelText('Email');
 
-    formGroup.find('input#email').simulate('focus');
-    expect(formGroup.find('.pgn-transition-replace-group').find('div#email-1').text()).toEqual('Email field help text');
+    expect(queryByText('Email field help text')).toBeNull();
+
+    fireEvent.focus(emailInput);
+
+    const helpText = queryByText('Email field help text');
+
+    expect(helpText).toBeTruthy();
+    expect(helpText.textContent).toEqual('Email field help text');
   });
 });
 
 describe('PasswordField', () => {
-  const IntlPasswordField = injectIntl(PasswordField);
+  const mockStore = configureStore();
   let props = {};
+  let store = {};
+
+  const reduxWrapper = children => (
+    <IntlProvider locale="en">
+      <MemoryRouter>
+        <Provider store={store}>{children}</Provider>
+      </MemoryRouter>
+    </IntlProvider>
+  );
+
+  const initialState = {
+    register: {
+      validationApiRateLimited: false,
+    },
+  };
 
   beforeEach(() => {
+    store = mockStore(initialState);
     props = {
       floatingLabel: 'Password',
       name: 'password',
@@ -39,25 +64,29 @@ describe('PasswordField', () => {
   });
 
   it('should show/hide password on icon click', () => {
-    const passwordField = mount(<IntlProvider locale="en"><IntlPasswordField {...props} /></IntlProvider>);
+    const { getByLabelText } = render(reduxWrapper(<PasswordField {...props} />));
+    const passwordInput = getByLabelText('Password');
 
-    passwordField.find('button[aria-label="Show password"]').simulate('click');
-    expect(passwordField.find('input').prop('type')).toEqual('text');
+    const showPasswordButton = getByLabelText('Show password');
+    fireEvent.click(showPasswordButton);
+    expect(passwordInput.type).toBe('text');
 
-    passwordField.find('button[aria-label="Hide password"]').simulate('click');
-    expect(passwordField.find('input').prop('type')).toEqual('password');
+    const hidePasswordButton = getByLabelText('Hide password');
+    fireEvent.click(hidePasswordButton);
+    expect(passwordInput.type).toBe('password');
   });
 
   it('should show password requirement tooltip on focus', async () => {
-    const passwordField = mount(<IntlProvider locale="en"><IntlPasswordField {...props} /></IntlProvider>);
+    const { getByLabelText } = render(reduxWrapper(<PasswordField {...props} />));
+    const passwordInput = getByLabelText('Password');
     jest.useFakeTimers();
     await act(async () => {
-      passwordField.find('input').simulate('focus');
+      fireEvent.focus(passwordInput);
       jest.runAllTimers();
     });
-    passwordField.update();
+    const passwordRequirementTooltip = document.querySelector('#password-requirement-left');
 
-    expect(passwordField.find('#password-requirement-left').exists()).toBeTruthy();
+    expect(passwordRequirementTooltip).toBeTruthy();
   });
 
   it('should show all password requirement checks as failed', async () => {
@@ -65,31 +94,195 @@ describe('PasswordField', () => {
       ...props,
       value: '',
     };
-
+    const { getByLabelText } = render(reduxWrapper(<PasswordField {...props} />));
+    const passwordInput = getByLabelText('Password');
     jest.useFakeTimers();
-    const passwordField = mount(<IntlProvider locale="en"><IntlPasswordField {...props} /></IntlProvider>);
     await act(async () => {
-      passwordField.find('input').simulate('focus');
+      fireEvent.focus(passwordInput);
       jest.runAllTimers();
     });
-    passwordField.update();
 
-    expect(passwordField.find('#letter-check span').prop('className')).toEqual('pgn__icon mr-1 text-light-700');
-    expect(passwordField.find('#number-check span').prop('className')).toEqual('pgn__icon mr-1 text-light-700');
-    expect(passwordField.find('#characters-check span').prop('className')).toEqual('pgn__icon mr-1 text-light-700');
+    const letterCheckIcon = document.querySelector('#letter-check span');
+    const numberCheckIcon = document.querySelector('#number-check span');
+    const charactersCheckIcon = document.querySelector('#characters-check span');
+
+    expect(letterCheckIcon).toBeTruthy();
+    expect(letterCheckIcon.className).toContain('pgn__icon mr-1 text-light-700');
+
+    expect(numberCheckIcon).toBeTruthy();
+    expect(numberCheckIcon.className).toContain('pgn__icon mr-1 text-light-700');
+
+    expect(charactersCheckIcon).toBeTruthy();
+    expect(charactersCheckIcon.className).toContain('pgn__icon mr-1 text-light-700');
   });
 
   it('should update password requirement checks', async () => {
-    const passwordField = mount(<IntlProvider locale="en"><IntlPasswordField {...props} /></IntlProvider>);
+    const { getByLabelText } = render(reduxWrapper(<PasswordField {...props} />));
+    const passwordInput = getByLabelText('Password');
     jest.useFakeTimers();
     await act(async () => {
-      passwordField.find('input').simulate('focus');
+      fireEvent.focus(passwordInput);
       jest.runAllTimers();
     });
-    passwordField.update();
 
-    expect(passwordField.find('#letter-check span').prop('className')).toEqual('pgn__icon text-success mr-1');
-    expect(passwordField.find('#number-check span').prop('className')).toEqual('pgn__icon text-success mr-1');
-    expect(passwordField.find('#characters-check span').prop('className')).toEqual('pgn__icon text-success mr-1');
+    const letterCheckIcon = document.querySelector('#letter-check span');
+    const numberCheckIcon = document.querySelector('#number-check span');
+    const charactersCheckIcon = document.querySelector('#characters-check span');
+
+    expect(letterCheckIcon).toBeTruthy();
+    expect(letterCheckIcon.className).toContain('pgn__icon text-success mr-1');
+
+    expect(numberCheckIcon).toBeTruthy();
+    expect(numberCheckIcon.className).toContain('pgn__icon text-success mr-1');
+
+    expect(charactersCheckIcon).toBeTruthy();
+    expect(charactersCheckIcon.className).toContain('pgn__icon text-success mr-1');
+  });
+
+  it('should not run validations when blur is fired on password icon click', () => {
+    const { container, getByLabelText } = render(reduxWrapper(<PasswordField {...props} />));
+    const passwordInput = container.querySelector('input[name="password"]');
+
+    const passwordIcon = getByLabelText('Show password');
+
+    fireEvent.blur(passwordInput, {
+      target: {
+        name: 'password',
+        value: 'invalid',
+      },
+      relatedTarget: passwordIcon,
+    });
+
+    expect(container.querySelector('div[feedback-for="password"]')).toBeNull();
+  });
+
+  it('should call props handle blur if available', () => {
+    props = {
+      ...props,
+      handleBlur: jest.fn(),
+    };
+    const { container } = render(reduxWrapper(<PasswordField {...props} />));
+    const passwordInput = container.querySelector('input[name="password"]');
+
+    fireEvent.blur(passwordInput, {
+      target: {
+        name: 'password',
+        value: '',
+      },
+    });
+
+    expect(props.handleBlur).toHaveBeenCalledTimes(1);
+  });
+
+  it('should run validations on blur event when rendered from register page', () => {
+    props = {
+      ...props,
+      handleErrorChange: jest.fn(),
+    };
+    const { container } = render(reduxWrapper(<PasswordField {...props} />));
+    const passwordInput = container.querySelector('input[name="password"]');
+
+    fireEvent.blur(passwordInput, {
+      target: {
+        name: 'password',
+        value: '',
+      },
+    });
+
+    expect(props.handleErrorChange).toHaveBeenCalledTimes(1);
+    expect(props.handleErrorChange).toHaveBeenCalledWith(
+      'password',
+      'Password criteria has not been met',
+    );
+  });
+
+  it('should not clear error when focus is fired on password icon click when rendered from register page', () => {
+    props = {
+      ...props,
+      handleErrorChange: jest.fn(),
+    };
+
+    const { getByLabelText } = render(reduxWrapper(<PasswordField {...props} />));
+
+    const passwordIcon = getByLabelText('Show password');
+
+    fireEvent.focus(passwordIcon, {
+      target: {
+        name: 'passwordIcon',
+        value: '',
+      },
+    });
+
+    expect(props.handleErrorChange).toHaveBeenCalledTimes(0);
+  });
+
+  it('should clear error when focus is fired on password icon click when rendered from register page', () => {
+    props = {
+      ...props,
+      handleErrorChange: jest.fn(),
+    };
+
+    const { getByLabelText } = render(reduxWrapper(<PasswordField {...props} />));
+
+    const passwordIcon = getByLabelText('Show password');
+
+    fireEvent.focus(passwordIcon, {
+      target: {
+        name: 'password',
+        value: 'invalid',
+      },
+    });
+
+    expect(props.handleErrorChange).toHaveBeenCalledTimes(1);
+    expect(props.handleErrorChange).toHaveBeenCalledWith(
+      'password',
+      '',
+    );
+  });
+
+  it('should run backend validations when frontend validations pass on blur when rendered from register page', () => {
+    store.dispatch = jest.fn(store.dispatch);
+    props = {
+      ...props,
+      handleErrorChange: jest.fn(),
+    };
+    const { getByLabelText } = render(reduxWrapper(<PasswordField {...props} />));
+    const passwordField = getByLabelText('Password');
+    fireEvent.blur(passwordField, {
+      target: {
+        name: 'password',
+        value: 'password123',
+      },
+    });
+
+    expect(store.dispatch).toHaveBeenCalledWith(fetchRealtimeValidations({ password: 'password123' }));
+  });
+
+  it('should use password value from prop when password icon is focused out (blur due to icon)', () => {
+    store.dispatch = jest.fn(store.dispatch);
+    props = {
+      ...props,
+      value: 'testPassword',
+      handleErrorChange: jest.fn(),
+      handleBlur: jest.fn(),
+    };
+    const { getByLabelText } = render(reduxWrapper(<PasswordField {...props} />));
+
+    const passwordIcon = getByLabelText('Show password');
+
+    fireEvent.blur(passwordIcon, {
+      target: {
+        name: 'passwordIcon',
+        value: undefined,
+      },
+    });
+
+    expect(props.handleBlur).toHaveBeenCalledTimes(1);
+    expect(props.handleBlur).toHaveBeenCalledWith({
+      target: {
+        name: 'password',
+        value: 'testPassword',
+      },
+    });
   });
 });

src/common-components/tests/Logistration.test.jsx

@@ -1,271 +0,0 @@
-import React from 'react';
-import { Provider } from 'react-redux';
-
-import { getConfig, mergeConfig } from '@edx/frontend-platform';
-import * as analytics from '@edx/frontend-platform/analytics';
-import * as auth from '@edx/frontend-platform/auth';
-import { configure, injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
-import { mount } from 'enzyme';
-import { MemoryRouter } from 'react-router-dom';
-import configureStore from 'redux-mock-store';
-
-import { COMPLETE_STATE, LOGIN_PAGE } from '../../data/constants';
-import { backupRegistrationForm } from '../../register/data/actions';
-import { clearThirdPartyAuthContextErrorMessage } from '../data/actions';
-import { RenderInstitutionButton } from '../InstitutionLogistration';
-import Logistration from '../Logistration';
-
-jest.mock('@edx/frontend-platform/analytics');
-jest.mock('@edx/frontend-platform/auth');
-analytics.sendPageEvent = jest.fn();
-
-const mockStore = configureStore();
-const IntlLogistration = injectIntl(Logistration);
-
-describe('Logistration', () => {
-  let store = {};
-
-  const secondaryProviders = {
-    id: 'saml-test',
-    name: 'Test University',
-    loginUrl: '/dummy-auth',
-    registerUrl: '/dummy_auth',
-  };
-
-  const reduxWrapper = children => (
-    <IntlProvider locale="en">
-      <MemoryRouter>
-        <Provider store={store}>{children}</Provider>
-      </MemoryRouter>
-    </IntlProvider>
-  );
-
-  beforeEach(() => {
-    auth.getAuthenticatedUser = jest.fn(() => ({ userId: 3, username: 'test-user' }));
-    configure({
-      loggingService: { logError: jest.fn() },
-      config: {
-        ENVIRONMENT: 'production',
-        LANGUAGE_PREFERENCE_COOKIE_NAME: 'yum',
-      },
-      messages: { 'es-419': {}, de: {}, 'en-us': {} },
-    });
-  });
-
-  it('should render registration page', () => {
-    mergeConfig({
-      ALLOW_PUBLIC_ACCOUNT_CREATION: true,
-    });
-    store = mockStore({
-      register: {
-        registrationResult: { success: false, redirectUrl: '' },
-        registrationError: {},
-      },
-      commonComponents: {
-        thirdPartyAuthContext: {
-          providers: [],
-          secondaryProviders: [],
-        },
-      },
-    });
-    const logistration = mount(reduxWrapper(<IntlLogistration />));
-
-    expect(logistration.find('#main-content').find('RegistrationPage').exists()).toBeTruthy();
-  });
-
-  it('should render login page', () => {
-    store = mockStore({
-      login: {
-        loginResult: { success: false, redirectUrl: '' },
-      },
-      commonComponents: {
-        thirdPartyAuthContext: {
-          providers: [],
-          secondaryProviders: [],
-        },
-      },
-    });
-
-    const props = { selectedPage: LOGIN_PAGE };
-    const logistration = mount(reduxWrapper(<IntlLogistration {...props} />));
-
-    expect(logistration.find('#main-content').find('LoginPage').exists()).toBeTruthy();
-  });
-
-  it('should render only login page when public account creation is disabled', () => {
-    mergeConfig({
-      ALLOW_PUBLIC_ACCOUNT_CREATION: false,
-      DISABLE_ENTERPRISE_LOGIN: 'true',
-    });
-
-    store = mockStore({
-      login: {
-        loginResult: { success: false, redirectUrl: '' },
-      },
-      commonComponents: {
-        thirdPartyAuthContext: {
-          currentProvider: null,
-          finishAuthUrl: null,
-          providers: [],
-          secondaryProviders: [secondaryProviders],
-        },
-        thirdPartyAuthApiStatus: COMPLETE_STATE,
-      },
-    });
-
-    const props = { selectedPage: LOGIN_PAGE };
-    const logistration = mount(reduxWrapper(<IntlLogistration {...props} />));
-
-    // verifying sign in heading for institution login false
-    expect(logistration.find('#main-content').find('h3').text()).toEqual('Sign in');
-
-    // verifying tabs heading for institution login true
-    logistration.find(RenderInstitutionButton).simulate('click', { institutionLogin: true });
-    expect(logistration.find('#controlled-tab').exists()).toBeTruthy();
-  });
-
-  it('should display institution login option when secondary providers are present', () => {
-    mergeConfig({
-      DISABLE_ENTERPRISE_LOGIN: 'true',
-      ALLOW_PUBLIC_ACCOUNT_CREATION: 'true',
-    });
-
-    store = mockStore({
-      login: {
-        loginResult: { success: false, redirectUrl: '' },
-      },
-      commonComponents: {
-        thirdPartyAuthContext: {
-          currentProvider: null,
-          finishAuthUrl: null,
-          providers: [],
-          secondaryProviders: [secondaryProviders],
-        },
-        thirdPartyAuthApiStatus: COMPLETE_STATE,
-      },
-    });
-
-    const props = { selectedPage: LOGIN_PAGE };
-    const logistration = mount(reduxWrapper(<IntlLogistration {...props} />));
-    expect(logistration.text().includes('Institution/campus credentials')).toBe(true);
-
-    // on clicking "Institution/campus credentials" button, it should display institution login page
-    logistration.find(RenderInstitutionButton).simulate('click', { institutionLogin: true });
-    expect(logistration.text().includes('Test University')).toBe(true);
-
-    mergeConfig({
-      DISABLE_ENTERPRISE_LOGIN: '',
-    });
-  });
-
-  it('send tracking and page events when institutional login button is clicked', () => {
-    mergeConfig({
-      DISABLE_ENTERPRISE_LOGIN: 'true',
-    });
-
-    store = mockStore({
-      login: {
-        loginResult: { success: false, redirectUrl: '' },
-      },
-      commonComponents: {
-        thirdPartyAuthContext: {
-          currentProvider: null,
-          finishAuthUrl: null,
-          providers: [],
-          secondaryProviders: [secondaryProviders],
-        },
-        thirdPartyAuthApiStatus: COMPLETE_STATE,
-      },
-    });
-
-    const props = { selectedPage: LOGIN_PAGE };
-    const logistration = mount(reduxWrapper(<IntlLogistration {...props} />));
-    logistration.find(RenderInstitutionButton).simulate('click', { institutionLogin: true });
-
-    expect(analytics.sendTrackEvent).toHaveBeenCalledWith('edx.bi.institution_login_form.toggled', { category: 'user-engagement' });
-    expect(analytics.sendPageEvent).toHaveBeenCalledWith('login_and_registration', 'institution_login');
-
-    mergeConfig({
-      DISABLE_ENTERPRISE_LOGIN: '',
-    });
-  });
-
-  it('should not display institution register button', () => {
-    mergeConfig({
-      DISABLE_ENTERPRISE_LOGIN: 'true',
-    });
-
-    store = mockStore({
-      register: {
-        registrationResult: { success: false, redirectUrl: '' },
-        registrationError: {},
-      },
-      commonComponents: {
-        thirdPartyAuthContext: {
-          currentProvider: null,
-          finishAuthUrl: null,
-          providers: [],
-          secondaryProviders: [secondaryProviders],
-        },
-        thirdPartyAuthApiStatus: COMPLETE_STATE,
-      },
-    });
-
-    delete window.location;
-    window.location = { hostname: getConfig().SITE_NAME, href: getConfig().BASE_URL };
-
-    const root = mount(reduxWrapper(<IntlLogistration />));
-    root.find(RenderInstitutionButton).simulate('click', { institutionLogin: true });
-    expect(root.text().includes('Test University')).toBe(true);
-
-    mergeConfig({
-      DISABLE_ENTERPRISE_LOGIN: '',
-    });
-  });
-
-  it('should fire action to backup registration form on tab click', () => {
-    store = mockStore({
-      login: {
-        loginResult: { success: false, redirectUrl: '' },
-      },
-      register: {
-        registrationResult: { success: false, redirectUrl: '' },
-        registrationError: {},
-      },
-      commonComponents: {
-        thirdPartyAuthContext: {
-          providers: [],
-          secondaryProviders: [],
-        },
-      },
-    });
-
-    store.dispatch = jest.fn(store.dispatch);
-    const logistration = mount(reduxWrapper(<IntlLogistration />));
-    logistration.find('a[data-rb-event-key="/login"]').simulate('click');
-    expect(store.dispatch).toHaveBeenCalledWith(backupRegistrationForm());
-  });
-
-  it('should clear tpa context errorMessage tab click', () => {
-    store = mockStore({
-      login: {
-        loginResult: { success: false, redirectUrl: '' },
-      },
-      register: {
-        registrationResult: { success: false, redirectUrl: '' },
-        registrationError: {},
-      },
-      commonComponents: {
-        thirdPartyAuthContext: {
-          providers: [],
-          secondaryProviders: [],
-        },
-      },
-    });
-
-    store.dispatch = jest.fn(store.dispatch);
-    const logistration = mount(reduxWrapper(<IntlLogistration />));
-    logistration.find('a[data-rb-event-key="/login"]').simulate('click');
-    expect(store.dispatch).toHaveBeenCalledWith(clearThirdPartyAuthContextErrorMessage());
-  });
-});

src/common-components/tests/SocialAuthProviders.test.jsx

@@ -1,16 +1,35 @@
 import React from 'react';
+import { Provider } from 'react-redux';
 
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import renderer from 'react-test-renderer';
+import configureStore from 'redux-mock-store';
 
 import registerIcons from '../RegisterFaIcons';
 import SocialAuthProviders from '../SocialAuthProviders';
 
 registerIcons();
+const mockStore = configureStore();
 
 describe('SocialAuthProviders', () => {
   let props = {};
 
+  const initialState = {
+    register: {
+      registrationFormData: {
+        configurableFormFields: {
+          marketingEmailsOptIn: true,
+        },
+      },
+    },
+  };
+  const store = mockStore(initialState);
+  const reduxWrapper = children => (
+    <IntlProvider locale="en">
+      <Provider store={store}>{children}</Provider>
+    </IntlProvider>
+  );
+
   const appleProvider = {
     id: 'oa2-apple-id',
     name: 'Apple',
@@ -30,11 +49,11 @@ describe('SocialAuthProviders', () => {
   it('should match social auth provider with iconImage snapshot', () => {
     props = { socialAuthProviders: [appleProvider, facebookProvider] };
 
-    const tree = renderer.create(
+    const tree = renderer.create(reduxWrapper(
       <IntlProvider locale="en">
         <SocialAuthProviders {...props} />
       </IntlProvider>,
-    ).toJSON();
+    )).toJSON();
 
     expect(tree).toMatchSnapshot();
   });
@@ -48,11 +67,11 @@ describe('SocialAuthProviders', () => {
       }],
     };
 
-    const tree = renderer.create(
+    const tree = renderer.create(reduxWrapper(
       <IntlProvider locale="en">
         <SocialAuthProviders {...props} />
       </IntlProvider>,
-    ).toJSON();
+    )).toJSON();
 
     expect(tree).toMatchSnapshot();
   });
@@ -66,11 +85,11 @@ describe('SocialAuthProviders', () => {
       }],
     };
 
-    const tree = renderer.create(
+    const tree = renderer.create(reduxWrapper(
       <IntlProvider locale="en">
         <SocialAuthProviders {...props} />
       </IntlProvider>,
-    ).toJSON();
+    )).toJSON();
 
     expect(tree).toMatchSnapshot();
   });

src/common-components/tests/UnAuthOnlyRoute.test.jsx

@@ -2,15 +2,20 @@
 /* eslint-disable react/function-component-definition */
 import React from 'react';
 
-import * as auth from '@edx/frontend-platform/auth';
-import { mount } from 'enzyme';
+import { fetchAuthenticatedUser, getAuthenticatedUser } from '@edx/frontend-platform/auth';
+import { render } from '@testing-library/react';
+import { act } from 'react-dom/test-utils';
+import {
+  MemoryRouter, Route, BrowserRouter as Router, Routes,
+} from 'react-router-dom';
 
 import { UnAuthOnlyRoute } from '..';
-import { LOGIN_PAGE } from '../../data/constants';
+import { REGISTER_PAGE } from '../../data/constants';
 
-import { MemoryRouter, BrowserRouter as Router, Switch } from 'react-router-dom';
-
-jest.mock('@edx/frontend-platform/auth');
+jest.mock('@edx/frontend-platform/auth', () => ({
+  getAuthenticatedUser: jest.fn(),
+  fetchAuthenticatedUser: jest.fn(),
+}));
 
 const RRD = require('react-router-dom');
 // Just render plain div with its children
@@ -21,16 +26,16 @@ module.exports = RRD;
 const TestApp = () => (
   <Router>
     <div>
-      <Switch>
-        <UnAuthOnlyRoute path={LOGIN_PAGE} render={() => (<span>Login Page</span>)} />
-      </Switch>
+      <Routes>
+        <Route path={REGISTER_PAGE} element={<UnAuthOnlyRoute><span>Register Page</span></UnAuthOnlyRoute>} />
+      </Routes>
     </div>
   </Router>
 );
 
 describe('UnAuthOnlyRoute', () => {
   const routerWrapper = () => (
-    <MemoryRouter initialEntries={[LOGIN_PAGE]}>
+    <MemoryRouter initialEntries={[REGISTER_PAGE]}>
       <TestApp />
     </MemoryRouter>
   );
@@ -39,25 +44,30 @@ describe('UnAuthOnlyRoute', () => {
     jest.clearAllMocks();
   });
 
-  it('should have called with forceRefresh true', () => {
+  it('should have called with forceRefresh true', async () => {
     const user = {
       username: 'gonzo',
       other: 'data',
     };
-    auth.getAuthenticatedUser = jest.fn(() => user);
-    auth.fetchAuthenticatedUser = jest.fn(() => ({ then: () => auth.getAuthenticatedUser() }));
 
-    mount(routerWrapper());
+    getAuthenticatedUser.mockReturnValue(user);
+    fetchAuthenticatedUser.mockReturnValueOnce(Promise.resolve(user));
 
-    expect(auth.fetchAuthenticatedUser).toBeCalledWith({ forceRefresh: true });
+    await act(async () => {
+      await render(routerWrapper());
+    });
+
+    expect(fetchAuthenticatedUser).toBeCalledWith({ forceRefresh: true });
   });
 
-  it('should have called with forceRefresh false', () => {
-    auth.getAuthenticatedUser = jest.fn(() => null);
-    auth.fetchAuthenticatedUser = jest.fn(() => ({ then: () => auth.getAuthenticatedUser() }));
+  it('should have called with forceRefresh false', async () => {
+    getAuthenticatedUser.mockReturnValue(null);
+    fetchAuthenticatedUser.mockReturnValueOnce(Promise.resolve(null));
 
-    mount(routerWrapper());
+    await act(async () => {
+      await render(routerWrapper());
+    });
 
-    expect(auth.fetchAuthenticatedUser).toBeCalledWith({ forceRefresh: false });
+    expect(fetchAuthenticatedUser).toBeCalledWith({ forceRefresh: false });
   });
 });

src/common-components/tests/__snapshots__/SocialAuthProviders.test.jsx.snap

@@ -10,25 +10,27 @@ exports[`SocialAuthProviders should match social auth provider with default icon
 >
   <div
     aria-hidden="true"
-    className="font-container"
+    className="btn-tpa__font-container"
   >
-    <svg
-      aria-hidden="true"
-      className="svg-inline--fa fa-right-to-bracket "
-      data-icon="right-to-bracket"
-      data-prefix="fas"
-      focusable="false"
-      role="img"
-      style={Object {}}
-      viewBox="0 0 512 512"
-      xmlns="http://www.w3.org/2000/svg"
+    <span
+      className="pgn__icon h-75"
     >
-      <path
-        d="M352 96h64c17.7 0 32 14.3 32 32V384c0 17.7-14.3 32-32 32H352c-17.7 0-32 14.3-32 32s14.3 32 32 32h64c53 0 96-43 96-96V128c0-53-43-96-96-96H352c-17.7 0-32 14.3-32 32s14.3 32 32 32zm-7.5 177.4c4.8-4.5 7.5-10.8 7.5-17.4s-2.7-12.9-7.5-17.4l-144-136c-7-6.6-17.2-8.4-26-4.6s-14.5 12.5-14.5 22v72H32c-17.7 0-32 14.3-32 32v64c0 17.7 14.3 32 32 32H160v72c0 9.6 5.7 18.2 14.5 22s19 2 26-4.6l144-136z"
-        fill="currentColor"
-        style={Object {}}
-      />
-    </svg>
+      <svg
+        aria-hidden={true}
+        fill="none"
+        focusable={false}
+        height={24}
+        role="img"
+        viewBox="0 0 24 24"
+        width={24}
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M11 7 9.6 8.4l2.6 2.6H2v2h10.2l-2.6 2.6L11 17l5-5-5-5zm9 12h-8v2h10V3H12v2h8v14z"
+          fill="currentColor"
+        />
+      </svg>
+    </span>
   </div>
   <span
     aria-hidden="true"
@@ -55,7 +57,7 @@ exports[`SocialAuthProviders should match social auth provider with iconClass sn
 >
   <div
     aria-hidden="true"
-    className="font-container"
+    className="btn-tpa__font-container"
   >
     <svg
       aria-hidden="true"
@@ -64,14 +66,14 @@ exports[`SocialAuthProviders should match social auth provider with iconClass sn
       data-prefix="fab"
       focusable="false"
       role="img"
-      style={Object {}}
+      style={{}}
       viewBox="0 0 488 512"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
         d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z"
         fill="currentColor"
-        style={Object {}}
+        style={{}}
       />
     </svg>
   </div>
@@ -91,7 +93,7 @@ exports[`SocialAuthProviders should match social auth provider with iconClass sn
 `;
 
 exports[`SocialAuthProviders should match social auth provider with iconImage snapshot 1`] = `
-Array [
+[
   <button
     className="btn-social btn-oa2-apple-id mr-3"
     data-provider-url="/auth/login/apple-id/?auth_entry=login&next=/dashboard"
@@ -104,7 +106,7 @@ Array [
     >
       <img
         alt="icon Apple"
-        className="icon-image"
+        className="btn-tpa__image-icon"
         src="https://edx.devstack.lms/logo.png"
       />
     </div>
@@ -133,7 +135,7 @@ Array [
     >
       <img
         alt="icon Facebook"
-        className="icon-image"
+        className="btn-tpa__image-icon"
         src="https://edx.devstack.lms/facebook-logo.png"
       />
     </div>

src/common-components/tests/__snapshots__/ThirdPartyAuthAlert.test.jsx.snap

@@ -21,7 +21,7 @@ exports[`ThirdPartyAuthAlert should match login page third party auth alert mess
 `;
 
 exports[`ThirdPartyAuthAlert should match register page third party auth alert message snapshot 1`] = `
-Array [
+[
   <div
     className="fade alert-content alert-success mt-n2 mb-5 alert show"
     id="tpa-alert"

src/common-components/tests/__snapshots__/Zendesk.test.jsx.snap

@@ -5,34 +5,45 @@ exports[`Zendesk Help should match login page third party auth alert message sna
   cookies={true}
   defer={true}
   webWidget={
-    Object {
-      "answerBot": Object {
-        "avatar": Object {
-          "name": Object {
+    {
+      "answerBot": {
+        "avatar": {
+          "name": {
             "*": "edX Support",
           },
           "url": undefined,
         },
         "contactOnlyAfterQuery": true,
         "suppress": false,
-        "title": Object {
+        "title": {
           "*": "edX Support",
         },
       },
-      "chat": Object {
+      "chat": {
+        "departments": {
+          "enabled": [
+            "account settings",
+            "billing and payments",
+            "certificates",
+            "deadlines",
+            "errors and technical issues",
+            "other",
+            "proctoring",
+          ],
+        },
         "suppress": false,
       },
-      "contactForm": Object {
+      "contactForm": {
         "attachments": true,
-        "selectTicketForm": Object {
+        "selectTicketForm": {
           "*": "Please choose your request type:",
         },
-        "ticketForms": Array [
-          Object {
-            "fields": Array [
-              Object {
+        "ticketForms": [
+          {
+            "fields": [
+              {
                 "id": "description",
-                "prefill": Object {
+                "prefill": {
                   "*": "",
                 },
               },
@@ -42,10 +53,10 @@ exports[`Zendesk Help should match login page third party auth alert message sna
           },
         ],
       },
-      "contactOptions": Object {
+      "contactOptions": {
         "enabled": false,
       },
-      "helpCenter": Object {
+      "helpCenter": {
         "originalArticleButton": true,
       },
     }

src/config/index.js

@@ -1,29 +1,43 @@
 const configuration = {
   // Cookies related configs
   SESSION_COOKIE_DOMAIN: process.env.SESSION_COOKIE_DOMAIN,
-  REGISTER_CONVERSION_COOKIE_NAME: process.env.REGISTER_CONVERSION_COOKIE_NAME || null,
-  USER_SURVEY_COOKIE_NAME: process.env.USER_SURVEY_COOKIE_NAME || null,
+  USER_RETENTION_COOKIE_NAME: process.env.USER_RETENTION_COOKIE_NAME || '',
   // Features
   DISABLE_ENTERPRISE_LOGIN: process.env.DISABLE_ENTERPRISE_LOGIN || '',
-  ENABLE_COOKIE_POLICY_BANNER: process.env.ENABLE_COOKIE_POLICY_BANNER || false,
+  ENABLE_AUTO_GENERATED_USERNAME: process.env.ENABLE_AUTO_GENERATED_USERNAME || false,
   ENABLE_DYNAMIC_REGISTRATION_FIELDS: process.env.ENABLE_DYNAMIC_REGISTRATION_FIELDS || false,
   ENABLE_PROGRESSIVE_PROFILING_ON_AUTHN: process.env.ENABLE_PROGRESSIVE_PROFILING_ON_AUTHN || false,
-  ENABLE_PERSONALIZED_RECOMMENDATIONS: process.env.ENABLE_PERSONALIZED_RECOMMENDATIONS || false,
+  ENABLE_POST_REGISTRATION_RECOMMENDATIONS: process.env.ENABLE_POST_REGISTRATION_RECOMMENDATIONS || false,
   MARKETING_EMAILS_OPT_IN: process.env.MARKETING_EMAILS_OPT_IN || '',
   SHOW_CONFIGURABLE_EDX_FIELDS: process.env.SHOW_CONFIGURABLE_EDX_FIELDS || false,
+  SHOW_REGISTRATION_LINKS: process.env.SHOW_REGISTRATION_LINKS !== 'false',
+  ENABLE_HARD_CODE_OPTIONAL_FIELDS: process.env.ENABLE_HARD_CODE_OPTIONAL_FIELDS || false,
+  ENABLE_IMAGE_LAYOUT: process.env.ENABLE_IMAGE_LAYOUT || false,
   // Links
   ACTIVATION_EMAIL_SUPPORT_LINK: process.env.ACTIVATION_EMAIL_SUPPORT_LINK || null,
   AUTHN_PROGRESSIVE_PROFILING_SUPPORT_LINK: process.env.AUTHN_PROGRESSIVE_PROFILING_SUPPORT_LINK || null,
   LOGIN_ISSUE_SUPPORT_LINK: process.env.LOGIN_ISSUE_SUPPORT_LINK || null,
   PASSWORD_RESET_SUPPORT_LINK: process.env.PASSWORD_RESET_SUPPORT_LINK || null,
+  POST_REGISTRATION_REDIRECT_URL: process.env.POST_REGISTRATION_REDIRECT_URL || '',
   PRIVACY_POLICY: process.env.PRIVACY_POLICY || null,
+  SEARCH_CATALOG_URL: process.env.SEARCH_CATALOG_URL || null,
   TOS_AND_HONOR_CODE: process.env.TOS_AND_HONOR_CODE || null,
   TOS_LINK: process.env.TOS_LINK || null,
-  // Miscellaneous
+  // Base container images
+  BANNER_IMAGE_LARGE: process.env.BANNER_IMAGE_LARGE || '',
+  BANNER_IMAGE_MEDIUM: process.env.BANNER_IMAGE_MEDIUM || '',
+  BANNER_IMAGE_SMALL: process.env.BANNER_IMAGE_SMALL || '',
+  BANNER_IMAGE_EXTRA_SMALL: process.env.BANNER_IMAGE_EXTRA_SMALL || '',
+  // Recommendation constants
   GENERAL_RECOMMENDATIONS: process.env.GENERAL_RECOMMENDATIONS || '[]',
+  // Miscellaneous
   INFO_EMAIL: process.env.INFO_EMAIL || '',
   ZENDESK_KEY: process.env.ZENDESK_KEY,
   ZENDESK_LOGO_URL: process.env.ZENDESK_LOGO_URL,
+  ALGOLIA_APP_ID: process.env.ALGOLIA_APP_ID || '',
+  ALGOLIA_SEARCH_API_KEY: process.env.ALGOLIA_SEARCH_API_KEY || '',
+  AUTO_GENERATED_USERNAME_EXPERIMENT_ID: process.env.AUTO_GENERATED_USERNAME_EXPERIMENT_ID || '',
+  RECAPTCHA_SITE_KEY_WEB: process.env.RECAPTCHA_SITE_KEY_WEB || '',
 };
 
 export default configuration;

src/data/algolia.js

@@ -0,0 +1,20 @@
+import { getConfig } from '@edx/frontend-platform';
+import algoliasearch from 'algoliasearch';
+
+// initialize Algolia workers
+const initializeSearchClient = () => algoliasearch(
+  getConfig().ALGOLIA_APP_ID,
+  getConfig().ALGOLIA_SEARCH_API_KEY,
+);
+
+const getLocationRestrictionFilter = (userCountry) => {
+  if (userCountry) {
+    return `NOT blocked_in:"${userCountry}" AND (allowed_in:"null" OR allowed_in:"${userCountry}")`;
+  }
+  return '';
+};
+
+export {
+  initializeSearchClient,
+  getLocationRestrictionFilter,
+};

src/data/constants.js

@@ -1,6 +1,7 @@
 // URL Paths
 export const LOGIN_PAGE = '/login';
 export const REGISTER_PAGE = '/register';
+export const REGISTER_EMBEDDED_PAGE = '/register-embedded';
 export const RESET_PAGE = '/reset';
 export const AUTHN_PROGRESSIVE_PROFILING = '/welcome';
 export const DEFAULT_REDIRECT_URL = '/dashboard';
@@ -23,16 +24,17 @@ export const PENDING_STATE = 'pending';
 export const COMPLETE_STATE = 'complete';
 export const FAILURE_STATE = 'failure';
 export const FORBIDDEN_STATE = 'forbidden';
+export const EMBEDDED = 'embedded';
 
-// Regex
+export const LETTER_REGEX = /[a-zA-Z]/;
+export const NUMBER_REGEX = /\d/;
 export const VALID_EMAIL_REGEX = '(^[-!#$%&\'*+/=?^_`{}|~0-9A-Z]+(\\.[-!#$%&\'*+/=?^_`{}|~0-9A-Z]+)*'
                                  + '|^"([\\001-\\010\\013\\014\\016-\\037!#-\\[\\]-\\177]|\\\\[\\001-\\011\\013\\014\\016-\\177])*"'
                                  + ')@((?:[A-Z0-9](?:[A-Z0-9-]{0,61}[A-Z0-9])?\\.)+)(?:[A-Z0-9-]{2,63})'
                                  + '|\\[(25[0-5]|2[0-4]\\d|[0-1]?\\d?\\d)(\\.(25[0-5]|2[0-4]\\d|[0-1]?\\d?\\d)){3}\\]$';
-export const LETTER_REGEX = /[a-zA-Z]/;
-export const NUMBER_REGEX = /\d/;
-export const INVALID_NAME_REGEX = /[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)?/gi; // eslint-disable-line no-useless-escape
 
 // Query string parameters that can be passed to LMS to manage
 // things like auto-enrollment upon login and registration.
-export const AUTH_PARAMS = ['course_id', 'enrollment_action', 'course_mode', 'email_opt_in', 'purchase_workflow', 'next', 'save_for_later', 'register_for_free', 'track', 'is_account_recovery'];
+export const AUTH_PARAMS = ['course_id', 'enrollment_action', 'course_mode', 'email_opt_in', 'purchase_workflow', 'next', 'register_for_free', 'track', 'is_account_recovery', 'variant', 'host', 'cta'];
+export const REDIRECT = 'redirect';
+export const APP_NAME = 'authn_mfe';

src/data/oneTrust.js

@@ -0,0 +1,3 @@
+const isOneTrustFunctionalCookieEnabled = () => !!window?.OnetrustActiveGroups?.includes('C0003');
+
+export default isOneTrustFunctionalCookieEnabled;

src/data/optimizely.js

@@ -4,8 +4,14 @@ import {
 
 const OPTIMIZELY_SDK_KEY = process.env.OPTIMIZELY_FULL_STACK_SDK_KEY;
 
-const optimizely = createInstance({
-  sdkKey: OPTIMIZELY_SDK_KEY,
-});
+const getOptimizelyInstance = () => {
+  if (OPTIMIZELY_SDK_KEY) {
+    return createInstance({
+      sdkKey: OPTIMIZELY_SDK_KEY,
+    });
+  }
 
-export default optimizely;
+  return null;
+};
+
+export default getOptimizelyInstance();

src/data/reducers.js

@@ -1,5 +1,6 @@
 import { combineReducers } from 'redux';
 
+import { reducer as cohesionReducer, storeName as cohesionStoreName } from '../cohesion/data/reducers';
 import {
   reducer as commonComponentsReducer,
   storeName as commonComponentsStoreName,
@@ -31,6 +32,7 @@ const createRootReducer = () => combineReducers({
   [commonComponentsStoreName]: commonComponentsReducer,
   [forgotPasswordStoreName]: forgotPasswordReducer,
   [resetPasswordStoreName]: resetPasswordReducer,
+  [cohesionStoreName]: cohesionReducer,
   [authnProgressiveProfilingStoreName]: authnProgressiveProfilingReducers,
 });
 export default createRootReducer;

src/data/segment/utils.js

@@ -0,0 +1,37 @@
+/* eslint-disable import/prefer-default-export */
+import { sendPageEvent, sendTrackEvent } from '@edx/frontend-platform/analytics';
+
+import { APP_NAME } from '../constants';
+
+export const LINK_TIMEOUT = 300;
+
+/**
+ * Creates an event tracker function that sends a tracking event with the given name and options.
+ *
+ * @param {string} name - The name of the event to be tracked.
+ * @param {object} [options={}] - Additional options to be included with the event.
+ * @returns {function} - A function that, when called, sends the tracking event.
+ */
+export const createEventTracker = (name, options = {}) => () => sendTrackEvent(
+  name,
+  { ...options, app_name: APP_NAME },
+);
+
+/**
+ * Creates an event tracker function that sends a tracking event with the given name and options.
+ *
+ * @param {string} name - The name of the event to be tracked.
+ * @param {object} [options={}] - Additional options to be included with the event.
+ * @returns {function} - A function that, when called, sends the tracking event.
+ */
+export const createPageEventTracker = (name, options = null) => () => sendPageEvent(
+  name,
+  options,
+  { app_name: APP_NAME },
+);
+
+export const createLinkTracker = (tracker, href) => (e) => {
+  e.preventDefault();
+  tracker();
+  return setTimeout(() => { window.location.href = href; }, LINK_TIMEOUT);
+};

src/data/tests/algolia.test.js

@@ -0,0 +1,16 @@
+import { getLocationRestrictionFilter } from '../algolia';
+
+describe('algoliaUtilsTests', () => {
+  it('test getLocationRestrictionFilter returns filter if country is passed', () => {
+    const countryCode = 'PK';
+    const filter = getLocationRestrictionFilter(countryCode);
+    const expectedFilter = `NOT blocked_in:"${countryCode}" AND (allowed_in:"null" OR allowed_in:"${countryCode}")`;
+    expect(filter).toEqual(expectedFilter);
+  });
+  it('test getLocationRestrictionFilter returns empty string if country is not passed', () => {
+    const countryCode = '';
+    const filter = getLocationRestrictionFilter(countryCode);
+    const expectedFilter = '';
+    expect(filter).toEqual(expectedFilter);
+  });
+});

src/data/tests/cookies.test.js

@@ -0,0 +1,52 @@
+import { getConfig } from '@edx/frontend-platform';
+import Cookies from 'universal-cookie';
+
+import { setCookie } from '../utils';
+
+// Mock getConfig function
+jest.mock('@edx/frontend-platform', () => ({
+  getConfig: jest.fn(),
+}));
+
+// Mock Cookies class
+jest.mock('universal-cookie');
+
+describe('setCookie function', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should set a cookie with default options', () => {
+    getConfig.mockReturnValue({ SESSION_COOKIE_DOMAIN: 'example.com' });
+
+    setCookie('testCookie', 'testValue');
+
+    expect(Cookies).toHaveBeenCalled();
+    expect(Cookies).toHaveBeenCalledWith();
+    expect(Cookies.prototype.set).toHaveBeenCalledWith('testCookie', 'testValue', {
+      domain: 'example.com',
+      path: '/',
+    });
+  });
+
+  it('should set a cookie with specified expiry', () => {
+    getConfig.mockReturnValue({ SESSION_COOKIE_DOMAIN: 'example.com' });
+
+    const expiry = new Date('2023-12-31');
+    setCookie('testCookie', 'testValue', expiry);
+
+    expect(Cookies).toHaveBeenCalled();
+    expect(Cookies).toHaveBeenCalledWith();
+    expect(Cookies.prototype.set).toHaveBeenCalledWith('testCookie', 'testValue', {
+      domain: 'example.com',
+      path: '/',
+      expires: expiry,
+    });
+  });
+
+  it('should not set a cookie if cookieName is undefined', () => {
+    setCookie(undefined, 'testValue');
+
+    expect(Cookies).not.toHaveBeenCalled();
+  });
+});

src/data/tests/dataUtils.test.js

@@ -1,5 +1,5 @@
 import { LOGIN_PAGE } from '../constants';
-import { updatePathWithQueryParams } from './dataUtils';
+import { updatePathWithQueryParams } from '../utils/dataUtils';
 
 describe('updatePathWithQueryParams', () => {
   it('should append query params into the path', () => {

src/data/tests/reduxUtils.test.js

@@ -1,4 +1,4 @@
-import AsyncActionType from './reduxUtils';
+import AsyncActionType from '../utils/reduxUtils';
 
 describe('AsyncActionType', () => {
   it('should return well formatted action strings', () => {

src/data/utils/cookies.js

@@ -1,21 +1,21 @@
 import { getConfig } from '@edx/frontend-platform';
 import Cookies from 'universal-cookie';
 
-export function setCookie(cookieName, cookieValue, cookieExpiry) {
-  const cookies = new Cookies();
-  const options = { domain: getConfig().SESSION_COOKIE_DOMAIN, path: '/' };
-  if (cookieExpiry) {
-    options.expires = cookieExpiry;
+export default function setCookie(cookieName, cookieValue, cookieExpiry) {
+  if (cookieName) { // To avoid setting getting exception when setting cookie with undefined names.
+    const cookies = new Cookies();
+    const options = { domain: getConfig().SESSION_COOKIE_DOMAIN, path: '/' };
+    if (cookieExpiry) {
+      options.expires = cookieExpiry;
+    }
+    cookies.set(cookieName, cookieValue, options);
   }
-  cookies.set(cookieName, cookieValue, options);
 }
 
-export default function setSurveyCookie(surveyType) {
-  const cookieName = getConfig().USER_SURVEY_COOKIE_NAME;
+export function removeCookie(cookieName) {
   if (cookieName) {
-    const signupTimestamp = (new Date()).getTime();
-    // set expiry to exactly 24 hours from now
-    const cookieExpiry = new Date(signupTimestamp + 1 * 864e5);
-    setCookie(cookieName, surveyType, cookieExpiry);
+    const cookies = new Cookies();
+    const options = { domain: getConfig().SESSION_COOKIE_DOMAIN, path: '/' };
+    cookies.remove(cookieName, options);
   }
 }

src/data/utils/dataUtils.js

@@ -76,3 +76,14 @@ export const windowScrollTo = (options) => {
 
   return window.scrollTo(options.top, options.left);
 };
+
+export const isHostAvailableInQueryParams = () => {
+  const queryParams = getAllPossibleQueryParams();
+  return 'host' in queryParams;
+};
+
+export const redirectWithDelay = (redirectUrl) => {
+  setTimeout(() => {
+    window.location.href = redirectUrl;
+  }, 1000);
+};

src/data/utils/index.js

@@ -1,10 +1,11 @@
 export {
   getTpaProvider,
   getTpaHint,
-  updatePathWithQueryParams,
   getAllPossibleQueryParams,
   getActivationStatus,
+  isHostAvailableInQueryParams,
+  updatePathWithQueryParams,
   windowScrollTo,
 } from './dataUtils';
 export { default as AsyncActionType } from './reduxUtils';
-export { default as setSurveyCookie, setCookie } from './cookies';
+export { default as setCookie, removeCookie } from './cookies';