docs: ADR to enable 2FA for course team accounts

2022-09-05 13:24:11 +05:00
276 changed files with 47293 additions and 24765 deletions
--- a/.env
+++ b/.env
@@ -13,30 +13,16 @@ ORDER_HISTORY_URL=null
 REFRESH_ACCESS_TOKEN_ENDPOINT=null
 SEGMENT_KEY=''
 SITE_NAME=null
-INFO_EMAIL=''
-# ***** Cookies *****
-USER_RETENTION_COOKIE_NAME=null
-# ***** Links *****
+USER_INFO_COOKIE_NAME=null
+AUTHN_MINIMAL_HEADER=true
 LOGIN_ISSUE_SUPPORT_LINK=''
-AUTHN_PROGRESSIVE_PROFILING_SUPPORT_LINK=null
-POST_REGISTRATION_REDIRECT_URL=''
-SEARCH_CATALOG_URL=''
-# ***** Features flags *****
+USER_SURVEY_COOKIE_NAME=null
+COOKIE_DOMAIN=null
+WELCOME_PAGE_SUPPORT_LINK=null
+INFO_EMAIL=''
 DISABLE_ENTERPRISE_LOGIN=''
-ENABLE_DYNAMIC_REGISTRATION_FIELDS=''
-ENABLE_PROGRESSIVE_PROFILING_ON_AUTHN=''
-ENABLE_POST_REGISTRATION_RECOMMENDATIONS=''
+REGISTER_CONVERSION_COOKIE_NAME=null
+ENABLE_PROGRESSIVE_PROFILING=''
 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=''
+ENABLE_COPPA_COMPLIANCE=''
+SHOW_DYNAMIC_PROFILING_PAGE=''
--- a/.env.development
+++ b/.env.development
@@ -18,26 +18,16 @@ 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'
-# ***** Features *****
-ENABLE_DYNAMIC_REGISTRATION_FIELDS='true'
-ENABLE_PROGRESSIVE_PROFILING_ON_AUTHN='true'
-# ***** Cookies *****
-SESSION_COOKIE_DOMAIN='localhost'
 USER_INFO_COOKIE_NAME='edx-user-info'
-# ***** Links *****
-LOGIN_ISSUE_SUPPORT_LINK='http://localhost:18000/login-issue-support-url'
+AUTHN_MINIMAL_HEADER=true
+LOGIN_ISSUE_SUPPORT_LINK='/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=''
+USER_SURVEY_COOKIE_NAME='openedx-user-survey-type'
+COOKIE_DOMAIN='localhost'
+WELCOME_PAGE_SUPPORT_LINK='http://localhost:1999/welcome'
+INFO_EMAIL='info@edx.org'
+DISABLE_ENTERPRISE_LOGIN=''
+REGISTER_CONVERSION_COOKIE_NAME='openedx-user-register-conversion'
+ENABLE_COPPA_COMPLIANCE=''
+MARKETING_EMAILS_OPT_IN=''
--- a/.env.private.example
+++ b/.env.private.example
@@ -1,4 +0,0 @@
-# Copy these to the .env.private to enable edX specific functionality on local system
-ENABLE_PROGRESSIVE_PROFILING_ON_AUTHN='true'
-MARKETING_EMAILS_OPT_IN='true'
-SHOW_CONFIGURABLE_EDX_FIELDS='true'
--- a/.env.test
+++ b/.env.test
@@ -16,5 +16,11 @@ ORDER_HISTORY_URL='http://localhost:1996/orders'
 REFRESH_ACCESS_TOKEN_ENDPOINT='http://localhost:18000/login_refresh'
 SEGMENT_KEY=''
 SITE_NAME='Your Platform Name Here'
-APP_ID=''
-MFE_CONFIG_API_URL=''
+USER_INFO_COOKIE_NAME='edx-user-info'
+LOGIN_ISSUE_SUPPORT_LINK='https://login-issue-support-url.com'
+USER_SURVEY_COOKIE_NAME='openedx-user-survey-type'
+WELCOME_PAGE_SUPPORT_LINK='http://localhost:1999/welcome'
+DISABLE_ENTERPRISE_LOGIN=''
+REGISTER_CONVERSION_COOKIE_NAME='openedx-user-register-conversion'
+MARKETING_EMAILS_OPT_IN=''
+ENABLE_COPPA_COMPLIANCE=''
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,6 +1,5 @@
 coverage/*
 dist/
-docs
 node_modules/
 __mocks__/
 __snapshots__/
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,17 +1,16 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
-const { createConfig } = require('@openedx/frontend-build');
+const { createConfig } = require('@edx/frontend-build');

 module.exports = 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
-    // @openedx/frontend-build from v3 to v5:
+    // to fail for no apparent reason since upgrading 
+    // @edx/frontend-build from v3 to v5:
    // - TypeError: Cannot read property 'range' of null
-    indent: [
+    'indent': [
      'error',
      2,
-      { ignoredNodes: ['TemplateLiteral', 'SwitchCase'] },
+      { 'ignoredNodes': ['TemplateLiteral', 'SwitchCase'] }
    ],
    'template-curly-spacing': 'off',
    'jsx-a11y/label-has-associated-control': ['error', {
@@ -19,34 +18,7 @@ module.exports = createConfig('eslint', {
      labelAttributes: [],
      controlComponents: [],
      assert: 'htmlFor',
-      depth: 25,
+      depth: 25
    }],
-    'sort-imports': ['error', { ignoreCase: true, ignoreDeclarationSort: true }],
-    'import/order': [
-      'error',
-      {
-        groups: [
-          'builtin',
-          'external',
-          'internal',
-          ['sibling', 'parent'],
-          'index',
-        ],
-        pathGroups: [
-          {
-            pattern: '@(react|react-dom|react-redux)',
-            group: 'external',
-            position: 'before',
-          },
-        ],
-        pathGroupsExcludedImportTypes: ['react'],
-        'newlines-between': 'always',
-        alphabetize: {
-          order: 'asc',
-          caseInsensitive: true,
-        },
-      },
-    ],
-    'function-paren-newline': 'off',
  },
 });
--- a/.github/pull_request_template.md
+++ b/.github/pull_request_template.md
@@ -1,29 +0,0 @@
-### Description
-
-Include a description of your changes here, along with a link to any relevant Jira tickets and/or Github issues.
-
-#### JIRA
-
-[XXX-XXXX](https://2u-internal.atlassian.net/browse/XXX-XXXX)
-
-#### How Has This Been Tested?
-
-Please describe in detail how you tested your changes.
-
-#### Screenshots/sandbox (optional):
-
-Include a link to the sandbox for design changes or screenshot for before and after. **Remove this section if its not applicable.**
-
-|Before|After|
-|-------|-----|
-|      |      |
-
-#### Merge Checklist
-
-* [ ] If your update includes visual changes, have they been reviewed by a designer? Send them a link to the Sandbox, if applicable.
-* [ ] Is there adequate test coverage for your changes?
-
-#### Post-merge Checklist
-
-* [ ] Deploy the changes to prod after verifying on stage or ask **@openedx/2u-vanguards** to do it. 
-* [ ] 🎉 🙌 Celebrate! Thanks for your contribution.
--- a/.github/workflows/add-depr-ticket-to-depr-board.yml
+++ b/.github/workflows/add-depr-ticket-to-depr-board.yml
@@ -16,4 +16,4 @@ jobs:
    secrets:
      GITHUB_APP_ID: ${{ secrets.GRAPHQL_AUTH_APP_ID }}
      GITHUB_APP_PRIVATE_KEY: ${{ secrets.GRAPHQL_AUTH_APP_PEM }}
-      SLACK_BOT_TOKEN: ${{ secrets.SLACK_ISSUE_BOT_TOKEN }}
+      SLACK_BOT_TOKEN: ${{ secrets.SLACK_ISSUE_BOT_TOKEN }}
--- a/.github/workflows/add-remove-label-on-comment.yml
+++ b/.github/workflows/add-remove-label-on-comment.yml
@@ -1,20 +0,0 @@
-# This workflow runs when a comment is made on the ticket
-# If the comment starts with "label: " it tries to apply
-# the label indicated in rest of comment.
-# If the comment starts with "remove label: ", it tries
-# to remove the indicated label.
-# Note: Labels are allowed to have spaces and this script does
-# not parse spaces (as often a space is legitimate), so the command
-# "label: really long lots of words label" will apply the
-# label "really long lots of words label"
-
-name: Allows for the adding and removing of labels via comment
-
-on:
-  issue_comment:
-    types: [created]
-
-jobs:
-  add_remove_labels:
-    uses: openedx/.github/.github/workflows/add-remove-label-on-comment.yml@master
-
--- a/.github/workflows/autoupdate-pull-request.yml
+++ b/.github/workflows/autoupdate-pull-request.yml
@@ -1,25 +0,0 @@
-name: autoupdate
-on:
-  push:
-    branches:
-      - master
-  pull_request:
-    types: [ labeled ]  
-    branches:
-      - master  
-jobs:
-  autoupdate:
-    name: autoupdate
-    runs-on: ubuntu-20.04
-    steps:
-      - uses: docker://chinthakagodawita/autoupdate-action:v1
-        env:
-          GITHUB_TOKEN: "${{ secrets.GITHUB_TOKEN }}"
-          DRY_RUN: "false"
-          PR_FILTER: "labelled"
-          PR_LABELS: "autoupdate"
-          EXCLUDED_LABELS: "dependencies,wontfix"
-          MERGE_MSG: "Branch was auto-updated."
-          RETRY_COUNT: "5"
-          RETRY_SLEEP: "300"
-          MERGE_CONFLICT_ACTION: "fail"
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -11,16 +11,17 @@ on:
 jobs:
  tests:
    runs-on: ubuntu-20.04
-
+    strategy:
+      matrix:
+        node: [16]
    steps:
    - name: Checkout
-      uses: actions/checkout@v3
-    - name: Setup Nodejs Env
-      run: echo "NODE_VER=`cat .nvmrc`" >> $GITHUB_ENV
+      uses: actions/checkout@v2
+
    - name: Setup Nodejs
-      uses: actions/setup-node@v3
+      uses: actions/setup-node@v2
      with:
-        node-version: ${{ env.NODE_VER }}
+        node-version: ${{ matrix.node }}

    - name: Install Dependencies
      run: npm ci
@@ -40,5 +41,8 @@ jobs:
    - name: Build
      run: npm run build

+    - name: Verify Es5
+      run: npm run is-es5
+
    - name: Run Code Coverage
-      uses: codecov/codecov-action@v3
+      uses: codecov/codecov-action@v2
--- a/.github/workflows/commitlint.yml
+++ b/.github/workflows/commitlint.yml
@@ -7,4 +7,4 @@ on:

 jobs:
  commitlint:
-    uses: openedx/.github/.github/workflows/commitlint.yml@master
+    uses: edx/.github/.github/workflows/commitlint.yml@master
--- a/.github/workflows/lockfileversion-check.yml
+++ b/.github/workflows/lockfileversion-check.yml
@@ -10,4 +10,4 @@ on:

 jobs:
  version-check:
-    uses: openedx/.github/.github/workflows/lockfile-check.yml@master
+    uses: edx/.github/.github/workflows/lockfileversion-check.yml@master
--- a/.github/workflows/self-assign-issue.yml
+++ b/.github/workflows/self-assign-issue.yml
@@ -1,12 +0,0 @@
-# This workflow runs when a comment is made on the ticket
-# If the comment starts with "assign me" it assigns the author to the
-# ticket (case insensitive)
-
-name: Assign comment author to ticket if they say "assign me"
-on:
-  issue_comment:
-    types: [created]
-
-jobs:
-  self_assign_by_comment:
-    uses: openedx/.github/.github/workflows/self-assign-issue.yml@master
--- a/.gitignore
+++ b/.gitignore
@@ -5,7 +5,6 @@ node_modules
 npm-debug.log
 coverage
 module.config.js
-.env.private

 dist/
 src/i18n/transifex_input.json
@@ -18,4 +17,3 @@ temp/babel-plugin-react-intl
 *~
 /temp
 /.vscode
-src/i18n/messages
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +0,0 @@
-18
--- a/.tx/config
+++ b/.tx/config
@@ -0,0 +1,9 @@
+[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
+
--- a/2
+++ b/2
@@ -1,2 +1,2 @@
 # The following users are the owners of all frontend-app-authn files
-*       @openedx/2u-vanguards
+*       @edx/vanguards
--- a/45
+++ b/45
@@ -1,17 +1,19 @@
-intl_imports = ./node_modules/.bin/intl-imports.js
+export TRANSIFEX_RESOURCE = frontend-app-authn
+transifex_langs = "ar,fr,es_419,zh_CN,it_IT,pt_PT,de_DE,uk,ru,hi"
+
 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-formatjs
+transifex_temp = ./temp/babel-plugin-react-intl

 precommit:
 	npm run lint
 	npm audit

 requirements:
-	npm ci
+	npm install

 i18n.extract:
 	# Pulling display strings from .jsx files into .json files...
@@ -29,31 +31,22 @@ 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:
-	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
+	tx pull -f --mode reviewed --languages=$(transifex_langs)

-	$(intl_imports) paragon frontend-platform frontend-app-authn
-
-# This target is used by Travis.
+# This target is used by CI.
 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
--- a/README.rst
+++ b/README.rst
@@ -1,222 +1,48 @@
-##################
+|Build Status| |Codecov| |license|
+
 frontend-app-authn
-##################
-
-|Build Status| |ci-badge| |Codecov| |semantic-release|
-
-********
-Purpose
-********
+=================================

 This is a micro-frontend application responsible for the login, registration and password reset functionality.

-**What is the domain of this MFE?**
+Development
+-----------

- Register page
+Start Devstack
+^^^^^^^^^^^^^^

- Login page
+To use this application `devstack <https://github.com/edx/devstack>`__ must be running.

- Forgot password page
+-  Start devstack

- Reset password page
+Start the development server
+^^^^^^^^^^^^^^^^^^^^^^^^^^^^

- Progressive profiling page
+In this project, install requirements and start the development server by running:

-***************
-Getting Started
-***************
+.. code:: bash

-Installation
-============
+   npm install
+   npm start # The server will run on port 1999

-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.
+Once the dev server is up visit http://localhost:1999/login.

-1. Install Devstack using the `Getting Started <https://github.com/openedx/devstack#getting-started>`_ instructions.
+Configuration and Deployment
+----------------------------

-2. Start up LMS, if it's not already started.
+This MFE is configured via node environment variables supplied at build time. See the .env file for the list of required environment variables. Example build syntax with a single environment variable:

-4. Within this project (frontend-app-authn), install requirements and start the development server:
+.. code:: bash

-   .. code-block::
+   NODE_ENV=development ACCESS_TOKEN_COOKIE_NAME='edx-jwt-cookie-header-payload' npm run build

-      npm install
-      npm start # The server will run on port 1999
-
-5. Once the dev server is up, visit http://localhost:1999 to access the MFE
-
-   .. image:: ./docs/images/frontend-app-authn-localhost-preview.png
-
-   **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>`__.
-
-The authentication micro-frontend also requires the following additional variable:
-
-.. list-table:: Environment Variables
-   :widths: 30 50 20
-   :header-rows: 1
-
-   * - Name
-     - Description / Usage
-     - Example
-
-   * - ``LOGIN_ISSUE_SUPPORT_LINK``
-     - The fully-qualified URL to the login issue support page in the target environment.
-     - ``https://support.example.com``
-
-   * - ``ACTIVATION_EMAIL_SUPPORT_LINK``
-     - The fully-qualified URL to the activation email support page in the target environment.
-     - ``https://support.example.com``
-
-   * - ``PASSWORD_RESET_SUPPORT_LINK``
-     - The fully-qualified URL to the password reset support page in the target environment.
-     - ``https://support.example.com``
-
-   * - ``AUTHN_PROGRESSIVE_PROFILING_SUPPORT_LINK``
-     - The fully-qualified URL to the progressive profiling support page in the target environment.
-     - ``https://support.example.com``
-
-   * - ``TOS_AND_HONOR_CODE``
-     - The fully-qualified URL to the Honor code page in the target environment.
-     - ``https://example.com/honor``
-
-   * - ``TOS_LINK``
-     - The fully-qualified URL to the Terms of service page in the target environment.
-     - ``https://example.com/tos``
-
-   * - ``PRIVACY_POLICY``
-     - The fully-qualified URL to the Privacy policy page in the target environment.
-     - ``https://example.com/privacy``
-
-   * - ``INFO_EMAIL``
-     - The valid email address for information query regarding the target environment.
-     - ``info@example.com``
-
-   * - ``ENABLE_DYNAMIC_REGISTRATION_FIELDS``
-     - Enables support for configurable registration fields on the MFE. This flag must be enabled to show any required registration field besides the default fields (name, email, username, password).
-     - ``true`` | ``''`` (empty strings are falsy)
-
-   * - ``ENABLE_PROGRESSIVE_PROFILING_ON_AUTHN``
-     - Enables support for progressive profiling. If enabled, users are redirected to a second page where data for optional registration fields can be collected.
-     - ``true`` | ``''`` (empty strings are falsy)
-
-   * - ``DISABLE_ENTERPRISE_LOGIN``
-     - Disables the enterprise login from Authn MFE.
-     - ``true`` | ``''`` (empty strings are falsy)
-
-   * - ``MFE_CONFIG_API_URL``
-     - Link of the API to get runtime mfe configuration variables from the site configuration or django settings.
-     - ``/api/v1/mfe_config`` | ``''`` (empty strings are falsy)  
-
-   * - ``APP_ID``
-     - 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_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.
-
-.. list-table:: edX-specific Environment Variables
-   :widths: 30 50 20
-   :header-rows: 1
-
-   * - Name
-     - Description / Usage
-     - Example
-
-   * - ``MARKETING_EMAILS_OPT_IN``
-     - Enables support for opting in marketing emails that helps us getting user consent for sending marketing emails.
-     - ``true`` | ``''`` (empty strings are falsy)
-
-   * - ``SHOW_CONFIGURABLE_EDX_FIELDS``
-     - For edX, country and honor code fields are required by default. This flag enables edX specific required fields.
-     - ``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>`__.
-
-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>`_.
-
-Even though they were written with edx-platform in mind, the guidelines should be followed for Open edX code in general.
-
-PR description template should be automatically applied if you are sending PR from github interface; otherwise you
-can find it it at `PULL_REQUEST_TEMPLATE.md <https://github.com/openedx/frontend-app-authn/blob/master/.github/pull_request_template.md>`_
-
-This project is currently accepting all types of contributions, bug fixes and security fixes.
-
-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/2u-vanguards>`_. 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@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.
-
-
-==============================
+edX <https://github.com/edx/edx-developer-docs/blob/5191e800bf16cf42f25c58c58f983bdaf7f9305d/docs/micro-frontends-in-open-edx.rst>`__.

 .. |Build Status| image:: https://api.travis-ci.com/edx/frontend-app-authn.svg?branch=master
   :target: https://travis-ci.com/edx/frontend-app-authn
 .. |Codecov| image:: https://img.shields.io/codecov/c/github/edx/frontend-app-authn
   :target: https://codecov.io/gh/edx/frontend-app-authn
-.. |ci-badge| image:: https://github.com/openedx/edx-developer-docs/actions/workflows/ci.yml/badge.svg
-   :target: https://github.com/openedx/edx-developer-docs/actions/workflows/ci.yml
-   :alt: Continuous Integration
-.. |semantic-release| image:: https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg
-   :target: https://github.com/semantic-release/semantic-release
+.. |license| image:: https://img.shields.io/npm/l/@edx/frontend-app-authn.svg
+   :target: @edx/frontend-app-authn
--- a/catalog-info.yaml
+++ b/catalog-info.yaml
@@ -1,18 +0,0 @@
-# This file records information about this repo. Its use is described in OEP-55:
-# https://open-edx-proposals.readthedocs.io/en/latest/processes/oep-0055-proc-project-maintainers.html
-
-apiVersion: backstage.io/v1alpha1
-kind: Component
-metadata:
-  name: 'frontend-app-authn'
-  description: "Micro-frontend for authentication service. It contains views for login, registration and password reset functionality."
-  links:
-    - url: 'https://github.com/openedx/frontend-app-authn/blob/master/README.rst'
-      title: 'Documentation'
-      icon: 'Article'
-  annotations:
-    openedx.org/arch-interest-groups: ""
-spec:
-  owner: group:2u-vanguards
-  type: 'service'
-  lifecycle: 'production'
--- a/docs/decisions/0002-feature-based-application-organization.rst
+++ b/docs/decisions/0002-feature-based-application-organization.rst
@@ -91,7 +91,7 @@ In the data sub-directory, the file names describe what each piece of code does.
    /ProfilePhotoUploader.jsx // supporting view
    /data // Note: most files here are named with a plural, as they contain many of the things in question.
      /actions.js
-      /mockedData.js
+      /constants.js
      /reducers.js
      /sagas.js
      /selectors.js
--- a/docs/decisions/0003-2FA-for-course-staff-accounts.rst
+++ b/docs/decisions/0003-2FA-for-course-staff-accounts.rst
@@ -0,0 +1,155 @@
+3. 2FA for Course Team Accounts
+-----------------------------------------
+
+Status
+------
+
+Proposed
+
+Context
+-------
+
+Course team accounts have a great deal of access to and control over sensitive information as well as the ability to run arbitrary Javascript on the LMS. An attacker who compromises an educator account could do a large amount of damage. To protect our learners (and our reputation) we should require 2FA or other enhanced account security for all accounts with these elevated permissions.
+
+An attacker should find it difficult to gain access to the privileged aspects of an educator's account (even if in possession of their password).
+
+
+Proposed Solutions
+------------------
+
+Option 1: Enable Two Factor Authentication (2FA)
+
+Option 2: Ask users for their password before specific restricted actions on site
+
+Option 3: Reset password after a specific time period
+
+
+Decision
+--------
+
+We have decided to go with Option 1. We will enable **Two Factor Authentication** (2FA) for user accounts that belong to course teams (in some cases these can be staff accounts as well).
+
+This change can be accommodated within our current login flow. A high level flow of this process is as follow:
+
+- A user belonging to a course team will authenticate themselves like they currently do, either by providing login credentials or by SSO.
+- Once they have authenticated successfully they will be authenticated by a 2FA method
+- After successful verification of 2FA code, assign a session to user.
+
+Why choose 2FA?
+***************
+
+- It is a conventional way to secure user accounts.
+- We can protect staff users at the first step they take on our site i.e authentication.
+- Development wise it will not require extensive effort as compared to the second option.
+
+
+Two Factor Authentication approaches
+************************************
+
+- Email Token
+- Sms Token
+- Push Based 2FA
+- TOTP
+- U2F Security Keys
+
+
+Comparison
+**********
+
+.. list-table:: **Comparison of 2FA methods**
+   :widths: 10 15 15 15
+   :header-rows: 1
+   :stub-columns: 1
+
+   * - Types
+     - Intro
+     - Pros
+     - Cons
+   * - Email Token
+     - Send a token to the registered email address and verify the token, during login.
+     - - Works fine if the email is secured
+       - Extra device not needed
+       - We already have user email so we will not be requiring any personal information from the user.
+     - - Vulnerable if password is reused. (most users keep same password)
+       - Vulnerable if device is compromised (malware attack)
+       - Not secured as other 2FA methods.
+       - Email delivery concern.
+   * - SMS Token
+     - Send a token to the registered mobile number and verify the token, during login.
+     - - No need to install extra app
+       - Works fine if mobile network is not ported
+     - - Vulnerable to targeted attacks like social engineering and number porting etc.
+       - Requires a cell phone.
+       - Privacy concern (people not comfortable giving phone number)
+       - Cannot use if phone is dead or unable to reach signals
+       - We will be getting a mobile phone number ( a new info) so we will be needing compliance approval.
+   * - Push Based
+     - Send a push notification on your trusted device, the prompt will ask for accept and denial.
+     - - Secured
+       - Convenient
+       - Time saving
+     - - Cannot use single app for multiple sites
+       - Requires signal and connection
+       - Cannot use if phone is dead
+       - Requires custom integrations from providers.
+   * - U2F
+     - Using small USB, NFC or Bluetooth Low Energy (BTLE) devices often called “security keys.” To set it up on a site, you register your U2F device. And then tap on the device when logging in.
+     - - Secured
+       - Can use same U2F device for multiple sites
+     - - Needs a device
+       - Cost
+       - Support (only chrome supports U2F currently)
+       - NFC only available on android mobiles
+       - Vulnerable to physical theft of device.
+   * - TOTP
+     - Use an authenticator app on another phone to generate time-based codes locally based on secret keys.
+     - - Secured
+       - Generate codes locally
+       - Time based code (valid for some seconds)
+       - Standardized
+       - Does Not require signal or connection therefore not vulnerable to social engineering attacks like number porting.
+       - Some authenticator apps do not require a mobile device either.
+       - Does not require any personal information from user.
+     - - Cannot use if phone is dead
+       - Not convenient (need to type code within a time frame)
+       - Vulnerable if the mobile is compromised and TOTP for the website has been set up on the same mobile with the app.
+
+
+Preferred Method
+----------------
+
+We have **TOTP** (Time-based on time password) as preferred two-factor authentication method.
+
+**TOTP**
+    TOTP stands for Time-based One-Time Passwords and is a common form of two factor authentication (2FA). Unique numeric passwords are generated with a standardized algorithm that uses the current time as an input. The time-based passwords are available offline and provide user friendly, increased account security when used as a second factor. (ref).
+
+
+Issues with previous approach
+------------------------------
+
+Previously our approach was to either reduced session expiration time or go with 2FA and Password reset after some time simultaneously but there were some problems with this approach:
+
+- Reducing session expiration to 2 weeks from 4 weeks was not making a big difference and if we reduce it to 1 day then it was an issue for course teams since they are normally making changes that might span over a few days and they might lose those edit if they don't save them as draft.
+
+- Resetting passwords often makes people more likely to pick simple passwords. Also we should avoid doing password resets except in cases of known compromise.
+
+Based on these reasoning, we decided to look into other kinds of 2FA.
+
+
+Consequences
+************
+
+Adds an additional step for some users which can negatively affect the user experience.
+
+
+References
+----------
+
+Corresponding Security Ticket:
+https://2u-internal.atlassian.net/browse/SEG-96
+
+Detailed analysis of all security enhancements options provided above can be found here:
+https://openedx.atlassian.net/l/c/3HKHjZY4
+
+Analysis of other kinds of 2FA:
+https://docs.google.com/document/d/1oNtUNbu71DBvznIVbxiOJbVMToTZqkCoiT-5VMIjqWg/edit?usp=sharing
--- a/docs/how_tos/enable_social_auth.rst
+++ b/docs/how_tos/enable_social_auth.rst
@@ -1,14 +0,0 @@
-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.
-
-2. Authn has a component for rendering Social Auth providers at frontend which goes through each provider.
-
-   * If the provider has an ``iconImage``, then it will be rendered as image in SSO button.
-
-   * If ``iconImage`` is not available in provider, but the provider's ``iconClass`` is from the supported icon classes ``['apple', 'facebook', 'google', 'microsoft']`` then it is used as icon image.
-
-   * If ``iconClass`` doesn't match the supported icon classes then the ``faSignInAlt`` from font awesome icons is used as icon image for SSO button.
--- a/docs/how_tos/i18n.rst
+++ b/docs/how_tos/i18n.rst
@@ -2,4 +2,4 @@
 React App i18n HOWTO
 ####################

-This document has moved to the frontend-platform repo: https://github.com/openedx/frontend-platform/blob/master/docs/how_tos/i18n.rst
+This document has moved to the frontend-platform repo: https://github.com/edx/frontend-platform/blob/master/docs/how_tos/i18n.rst
--- a/docs/how_tos/modifying_base_container.rst
+++ b/docs/how_tos/modifying_base_container.rst
@@ -1,39 +0,0 @@
-========================================
-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.
--- a/docs/images/default_layout.png
+++ b/docs/images/default_layout.png
--- a/docs/images/frontend-app-authn-localhost-preview.png
+++ b/docs/images/frontend-app-authn-localhost-preview.png
--- a/docs/images/image_layout.png
+++ b/docs/images/image_layout.png
--- a/jest.config.js
+++ b/jest.config.js
@@ -1,4 +1,4 @@
-const { createConfig } = require('@openedx/frontend-build');
+const { createConfig } = require('@edx/frontend-build');

 module.exports = createConfig('jest', {
  setupFiles: [
@@ -10,5 +10,4 @@ module.exports = createConfig('jest', {
    'src/index.jsx',
    'MainApp.jsx',
  ],
-  testEnvironment: 'jsdom',
 });
--- a/openedx.yaml
+++ b/openedx.yaml
@@ -3,6 +3,7 @@

 nick: Authn MFE
 oeps: {}
-owner: openedx/2u-vanguards
+owner: edx/vanguards
 openedx-release:
+  maybe: true   # Delete this "maybe" line when you have decided about Open edX inclusion.
  ref: master
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -4,14 +4,16 @@
  "description": "Frontend application template",
  "repository": {
    "type": "git",
-    "url": "git+https://github.com/openedx/frontend-app-authn.git"
+    "url": "git+https://github.com/edx/frontend-app-authn.git"
  },
  "browserslist": [
-    "extends @edx/browserslist-config"
+    "last 2 versions",
+    "ie 11"
  ],
  "scripts": {
    "build": "fedx-scripts webpack",
-    "i18n_extract": "fedx-scripts formatjs extract",
+    "i18n_extract": "BABEL_ENV=i18n fedx-scripts babel src --quiet > /dev/null",
+    "is-es5": "es-check es5 ./dist/*.js",
    "lint": "fedx-scripts eslint --ext .js --ext .jsx .",
    "snapshot": "fedx-scripts jest --updateSnapshot",
    "start": "fedx-scripts webpack-dev-server --progress",
@@ -24,62 +26,67 @@
  },
  "author": "edX",
  "license": "AGPL-3.0",
-  "homepage": "https://github.com/openedx/frontend-app-authn#readme",
+  "homepage": "https://github.com/edx/frontend-app-authn#readme",
  "publishConfig": {
    "access": "public"
  },
  "bugs": {
-    "url": "https://github.com/openedx/frontend-app-authn/issues"
+    "url": "https://github.com/edx/frontend-app-authn/issues"
  },
  "dependencies": {
-    "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
-    "@edx/frontend-platform": "7.1.3",
-    "@edx/openedx-atlas": "^0.6.0",
-    "@fortawesome/fontawesome-svg-core": "6.5.2",
-    "@fortawesome/free-brands-svg-icons": "6.5.2",
-    "@fortawesome/free-solid-svg-icons": "6.5.2",
-    "@fortawesome/react-fontawesome": "0.2.0",
-    "@openedx/paragon": "^22.1.1",
-    "@optimizely/react-sdk": "^2.9.1",
-    "@redux-devtools/extension": "3.3.0",
-    "@testing-library/react": "^12.1.5",
-    "@testing-library/react-hooks": "^8.0.1",
-    "algoliasearch": "^4.14.3",
-    "algoliasearch-helper": "^3.14.0",
-    "classnames": "2.5.1",
-    "core-js": "3.36.1",
-    "fastest-levenshtein": "1.0.16",
-    "form-urlencoded": "6.1.4",
+    "@edx/brand": "npm:@edx/brand-openedx@1.1.0",
+    "@edx/frontend-component-cookie-policy-banner": "2.1.14",
+    "@edx/frontend-platform": "1.15.5",
+    "@edx/paragon": "19.10.2",
+    "@fortawesome/fontawesome-svg-core": "1.2.36",
+    "@fortawesome/free-brands-svg-icons": "5.15.4",
+    "@fortawesome/free-regular-svg-icons": "5.15.4",
+    "@fortawesome/free-solid-svg-icons": "5.15.4",
+    "@fortawesome/react-fontawesome": "0.1.18",
+    "classnames": "2.3.1",
+    "clipboard": "2.0.10",
+    "core-js": "3.21.1",
+    "extract-react-intl-messages": "4.1.1",
+    "fastest-levenshtein": "1.0.12",
+    "form-urlencoded": "4.2.1",
+    "formik": "2.2.9",
+    "lodash.camelcase": "4.3.0",
+    "lodash.snakecase": "4.1.1",
    "prop-types": "15.8.1",
-    "query-string": "7.1.3",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "query-string": "5.1.1",
+    "react": "16.14.0",
+    "react-dom": "16.14.0",
    "react-helmet": "6.1.0",
-    "react-loading-skeleton": "3.4.0",
-    "react-redux": "7.2.9",
+    "react-loading-skeleton": "2.2.0",
+    "react-onclickoutside": "6.12.1",
+    "react-redux": "7.2.6",
    "react-responsive": "8.2.0",
-    "react-router": "6.22.3",
-    "react-router-dom": "6.22.3",
-    "react-zendesk": "^0.1.13",
-    "redux": "4.2.0",
+    "react-router": "5.2.1",
+    "react-router-dom": "5.3.0",
+    "redux": "4.1.2",
+    "@redux-devtools/extension": "3.2.2",
    "redux-logger": "3.0.6",
    "redux-mock-store": "1.5.4",
-    "redux-saga": "1.3.0",
-    "redux-thunk": "2.4.2",
-    "regenerator-runtime": "0.14.1",
-    "reselect": "4.1.8",
+    "redux-saga": "1.1.3",
+    "redux-thunk": "2.4.1",
+    "regenerator-runtime": "0.13.9",
+    "reselect": "4.1.5",
+    "sanitize-html": "2.7.0",
+    "semver-regex": "3.1.3",
    "universal-cookie": "4.0.4"
  },
  "devDependencies": {
-    "@edx/browserslist-config": "^1.1.1",
-    "@edx/reactifex": "1.1.0",
-    "@openedx/frontend-build": "13.1.4",
-    "babel-plugin-formatjs": "10.5.14",
-    "eslint-plugin-import": "2.29.1",
-    "glob": "7.2.3",
+    "@edx/frontend-build": "9.1.4",
+    "@edx/reactifex": "1.0.3",
+    "babel-plugin-formatjs": "10.3.18",
+    "codecov": "3.8.2",
+    "enzyme": "3.11.0",
+    "enzyme-adapter-react-16": "1.15.6",
+    "es-check": "6.2.1",
+    "glob": "7.2.0",
    "history": "5.3.0",
    "husky": "7.0.4",
-    "jest": "29.7.0",
-    "react-test-renderer": "^17.0.2"
+    "jest": "27.5.1",
+    "react-test-renderer": "16.14.0"
  }
 }
--- a/public/index.html
+++ b/public/index.html
@@ -1,15 +1,10 @@
 <!doctype html>
 <html lang="en-us">
  <head>
-      <title><%= (process.env.SITE_NAME && process.env.SITE_NAME != 'null') ? 'Authentication | ' + process.env.SITE_NAME : 'Authentication' %></title>    
+      <title>Authn | edX</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
-      <link rel="shortcut icon" href="<%=htmlWebpackPlugin.options.FAVICON_URL%>" type="image/x-icon"/>
-      <script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.9/iframeResizer.contentWindow.min.js"
-              integrity="sha512-mdT/HQRzoRP4laVz49Mndx6rcCGA3IhuyhP3gaY0E9sZPkwbtDk9ttQIq9o8qGCf5VvJv1Xsy3k2yTjfUoczqw=="
-              crossorigin="anonymous"
-              referrerpolicy="no-referrer">
-      </script>
+      <link rel="shortcut icon" href="<%=htmlWebpackPlugin.options.FAVICON_URL%>" type="image/x-icon" />
      <% if (process.env.OPTIMIZELY_URL) { %>
        <script
          src="<%= process.env.OPTIMIZELY_URL %>"
--- a/src/MainApp.jsx
+++ b/src/MainApp.jsx
@@ -1,62 +1,44 @@
 import React from 'react';
+import { Redirect, Route, Switch } from 'react-router-dom';

 import { getConfig } from '@edx/frontend-platform';
 import { AppProvider } from '@edx/frontend-platform/react';
-import { Helmet } from 'react-helmet';
-import { Navigate, Route, Routes } from 'react-router-dom';

 import {
-  EmbeddedRegistrationRoute, NotFoundPage, registerIcons, UnAuthOnlyRoute, Zendesk,
+  UnAuthOnlyRoute, registerIcons, NotFoundPage, Logistration,
 } from './common-components';
-import configureStore from './data/configureStore';
 import {
-  AUTHN_PROGRESSIVE_PROFILING,
-  LOGIN_PAGE,
-  PAGE_NOT_FOUND,
-  PASSWORD_RESET_CONFIRM,
-  RECOMMENDATIONS,
-  REGISTER_EMBEDDED_PAGE,
-  REGISTER_PAGE,
-  RESET_PAGE,
+  LOGIN_PAGE, PAGE_NOT_FOUND, REGISTER_PAGE, RESET_PAGE, PASSWORD_RESET_CONFIRM, WELCOME_PAGE,
 } from './data/constants';
+import configureStore from './data/configureStore';
 import { updatePathWithQueryParams } from './data/utils';
-import { ForgotPasswordPage } from './forgot-password';
-import Logistration from './logistration/Logistration';
-import { ProgressiveProfiling } from './progressive-profiling';
-import { RecommendationsPage } from './recommendations';
-import { RegistrationPage } from './register';
-import { ResetPasswordPage } from './reset-password';
-
+import ForgotPasswordPage from './forgot-password';
+import ResetPasswordPage from './reset-password';
+import WelcomePage, { ProgressiveProfiling } from './welcome';
 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 />}
-    <Routes>
-      <Route path="/" element={<Navigate replace to={updatePathWithQueryParams(REGISTER_PAGE)} />} />
+    <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
-        path={REGISTER_EMBEDDED_PAGE}
-        element={<EmbeddedRegistrationRoute><RegistrationPage /></EmbeddedRegistrationRoute>}
+        exact
+        path={WELCOME_PAGE}
+        component={(getConfig().SHOW_DYNAMIC_PROFILING_PAGE) ? ProgressiveProfiling : WelcomePage}
      />
-      <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>
+      <Route path={PAGE_NOT_FOUND} component={NotFoundPage} />
+      <Route path="*">
+        <Redirect to={PAGE_NOT_FOUND} />
+      </Route>
+    </Switch>
  </AppProvider>
 );

--- a/src/_style.scss
+++ b/src/_style.scss
@@ -0,0 +1,887 @@
+// ----------------------------
+// #COLORS
+// ----------------------------
+$font-blue: #126f9a;
+$white: #FFFFFF;
+
+// social platforms
+$facebook-blue: #1877F2;
+$facebook-focus-blue: #29487d;
+$google-blue: #4285f4;
+$google-focus-blue: #287ae6;
+$microsoft-black: #2f2f2f;
+$microsoft-focus-black: #000;
+$apple-black: #000000;
+$apple-focus-black: $apple-black;
+$accent-a-light: #c9f2f5;
+
+.centered-align-spinner {
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  position: absolute;
+  margin: auto;
+}
+
+.main-content {
+  @extend .pt-4;
+  min-width: 464px !important;
+}
+
+.welcome-page-content {
+  min-width: 464px !important;
+}
+
+.stateful-button-width {
+  width: 12rem;
+}
+
+.register-stateful-button-width {
+  min-width: 14.4rem;
+}
+
+.login-button-width {
+  min-width: 6rem;
+}
+
+.tpa-skeleton {
+  margin-bottom: 0.75rem;
+}
+
+.sr-only {
+  position: absolute;
+  left: -10000px;
+  top: auto;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+}
+
+.close {
+  padding-bottom: 0px !important;
+  padding-top: 3px !important;
+}
+
+.focus-out {
+  position: absolute;
+  padding-left: 17px;
+  opacity: 0.75;
+  z-index: 1;
+}
+
+.alert-link {
+  font-weight: normal;
+  text-decoration: underline;
+  color: #0075b4 !important;
+
+  &:hover {
+    color: #065683 !important;
+  }
+}
+
+.authn-header {
+  border-bottom: 1px solid #e7e7e7;
+  height: 3.75rem;
+  position: relative;
+  z-index: 1000;
+}
+
+.authn-header img {
+  height: 1.75rem;
+  margin-left: 2rem;
+  padding: 1rem 0;
+  display: block;
+  position: relative;
+  box-sizing: content-box;
+}
+
+.form-control {
+  background-color: white !important;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  height: 2.75rem;
+
+}
+
+.btn-social {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  margin-bottom: 1rem;
+  font-size: 14px;
+
+  background-color: $white;
+  border: 1px solid $font-blue;
+  width: 224px;
+  height: 36px;
+  color: $font-blue;
+
+  .icon-image {
+    background-color: transparent;
+    max-height: 24px;
+    max-width: 24px;
+  }
+}
+
+.btn-tpa {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  padding-left: 1rem;
+  width: 14rem;
+
+  .icon-image {
+    background-color: transparent;
+    max-height: 24px;
+    max-width: 24px;
+  }
+}
+
+.font-container {
+  background-color: $font-blue;
+  color: $white;
+  font-size: 11px;
+
+  margin-left: -6px;
+  padding-top: 10px;
+  min-width: 30px;
+  height: 35px;
+}
+
+.btn-oa2-facebook {
+  color: $white;
+  border-color: $facebook-blue;
+  background-color: $facebook-blue;
+
+  &:hover,
+  &:focus {
+    background-color: $facebook-focus-blue;
+    border: 1px solid $facebook-focus-blue;
+    color: $white;
+  }
+}
+
+.btn-oa2-google-oauth2 {
+  color: $white;
+  border-color: $google-blue;
+  background-color: $google-blue;
+
+  .icon-image {
+    margin-left: 2px;
+  }
+
+  &:hover,
+  &:focus {
+    background-color: $google-focus-blue;
+    border: 1px solid $google-focus-blue;
+    color: $white;
+  }
+}
+
+.btn-oa2-apple-id {
+  color: $white;
+  border-color: $apple-black;
+  background-color: $apple-black;
+  font-size: 16px;
+
+  .icon-image {
+    max-height: 1.8em;
+    max-width: 2.0em;
+  }
+
+  &:hover,
+  &:focus {
+    background-color: $apple-focus-black;
+    border: 1px solid $apple-focus-black;
+    color: $white;
+  }
+}
+
+.btn-oa2-azuread-oauth2 {
+  color: $white;
+  border-color: $microsoft-black;
+  background-color: $microsoft-black;
+
+  &:hover,
+  &:focus {
+    background-color: $microsoft-focus-black;
+    border: 1px solid $microsoft-focus-black;
+    color: $white;
+  }
+}
+
+.submit {
+  display: inherit;
+  margin: 0 auto;
+  margin-bottom: 2rem;
+}
+
+.institute-icon {
+  @extend .mr-1;
+  @extend .text-gray;
+
+  display: inline-block;
+  margin-bottom: 0.25rem;
+  height: 18px;
+  width: 18px;
+
+  svg {
+    display: inline-block;
+  }
+}
+
+.login-help {
+  padding-left: 14px;
+}
+
+.invalid-feedback {
+  color: $red;
+}
+
+.full-vertical-height {
+  height: 100vh;
+}
+
+.help-links {
+  margin-left: -5px;
+}
+
+select.form-control {
+  background: none !important;
+}
+
+#honor-code p {
+  margin: 0;
+  padding: 0;
+}
+
+#honor-code a span {
+  @extend .sr-only;
+}
+
+.font-weight-500 {
+  font-weight: 500 !important;
+}
+
+.mw-420 {
+  max-width: 420px;
+}
+
+.mw-500 {
+  max-width: 500px;
+}
+
+.mw-32em {
+  max-width: 32em;
+}
+
+.h-90 {
+  height: 90%;
+}
+
+.mt-10 {
+  margin-top: 10px;
+}
+
+.mt-7 {
+  margin-top: 7rem;
+}
+
+.pt-10 {
+  padding-top: 10px;
+}
+.tooltip-shadow {
+  box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.3) !important;
+}
+#password-requirement-left {
+  opacity: 1;
+  .tooltip-inner {
+    @extend .tooltip-shadow;
+    background: white;
+    display: block;
+    color: #707070;
+  }
+  .arrow::before {
+    border-left-color: #fff;
+    @extend .tooltip-shadow;
+  }
+
+}
+
+#password-requirement-top {
+  opacity: 1;
+  width: 90%;
+  margin-bottom: 10px;
+  .tooltip-inner {
+    max-width: inherit;
+    background: white;
+    display: block;
+    @extend .tooltip-shadow;
+    color: #707070;
+  }
+  .arrow::before {
+    border-top-color: #fff;
+    @extend .tooltip-shadow;
+  }
+
+}
+#forgotpassword-success-alert {
+  .alert-link {
+    color: #454545 !important;
+  }
+}
+
+.screen-header-light {
+  background-color: $light-200;
+}
+
+.screen-header-primary {
+  background-color: $primary-400;
+}
+
+.large-screen-container {
+  background-color: $white;
+  width: 50vw;
+}
+
+.large-screen-svg-light,
+.large-screen-svg-primary {
+  fill: $light-200;
+  overflow: hidden;
+  position: absolute;
+}
+
+.large-screen-svg-primary {
+  fill: $primary-400;
+}
+
+.medium-screen-container {
+  flex-wrap: nowrap;
+  max-width: inherit;
+  height: 282px;
+}
+
+.variation1-medium-screen {
+  height: 300px !important;
+}
+
+.medium-screen-svg-light,
+.medium-screen-svg-primary {
+  fill: $light-200;
+  overflow: inherit;
+  position: absolute;
+}
+
+.medium-screen-svg-primary {
+  fill: $primary-400;
+}
+
+.screen-polygon {
+  background-color: $white;
+}
+
+.small-screen-header-light,
+.small-screen-header-primary {
+  background-color: $light-200;
+  width: 100vw;
+}
+
+.small-screen-header-primary {
+  background-color: $primary-400;
+}
+
+.extra-large-screen-top-stripe {
+  height: 0.5rem;
+  background-image: linear-gradient(
+    102.02deg,
+    $brand-700 10%,
+    $brand 10%,
+    $brand 45%,
+    $primary-700 45%,
+    $primary-700 55%,
+    $accent-a 55%,
+    $accent-a 75%,
+    $accent-a-light 75%,
+  );
+  background-repeat: no-repeat;
+}
+
+.medium-screen-top-stripe {
+  height: 0.5rem;
+  background-image: linear-gradient(
+    102.02deg,
+    $brand-700,
+    $brand-700 10%,
+    $brand 10%,
+    $brand 90%,
+    $primary-700 90%,
+    $primary-700 100%,
+  );
+  background-repeat: no-repeat;
+}
+
+.large-screen-top-stripe {
+  height: 0.5rem;
+  background-image: linear-gradient(
+  102.02deg,
+  $brand-700 10%,
+  $brand 10%,
+  $brand 65%,
+  $primary-700 65%,
+  $primary-700 75%,
+  $accent-a 75%,
+  $accent-a 75%);
+  background-repeat: no-repeat;
+}
+
+.small-screen-top-stripe {
+  height: 0.25rem;
+  background-image: linear-gradient(
+    102.02deg,
+    $brand-700,
+    $brand-700 20%,
+    $brand 20%,
+  );
+  background-repeat: no-repeat;
+}
+
+// Progressive profiling base component classes
+.medium-container {
+  flex-wrap: nowrap;
+  max-width: inherit;
+  height: 260px;
+}
+
+.extra-extra-large-svg-line {
+  stroke: $accent-b;
+  stroke-width: 0.5rem;
+
+  width: 5.5rem;
+  height: 150px;
+}
+
+.extra-large-svg-line {
+  stroke: $accent-b;
+  stroke-width: 0.5rem;
+
+  width: 5.5rem;
+  height: 110px;
+}
+
+.medium-svg-line {
+  stroke: $accent-b;
+  stroke-width: 0.5rem;
+  width: 7em;
+  height: 110px;
+}
+
+.small-svg-line {
+  stroke: $accent-b;
+  stroke-width: 0.25rem;
+
+  width: 4em;
+  height: 90px;
+}
+
+.extra-small-svg-line {
+  stroke: $accent-b;
+  stroke-width: 0.25rem;
+
+  width: 4em;
+  height: 80px;
+}
+
+// Non-Auth Screen Svg Lines
+.large-screen-svg-line {
+  padding-top: 0.5rem;
+  stroke: $accent-b;
+  stroke-width: 0.5rem;
+  width: 5.5rem;
+  height: 240px;
+}
+
+.variation1-bar-color {
+  stroke: $brand !important;
+}
+
+.variation2-bar-color {
+  stroke: $accent-a !important;
+}
+
+.medium-screen-svg-line {
+  padding-top: 0.5rem;
+  stroke: $accent-b;
+  stroke-width: 0.5rem;
+  width: 7em;
+  height: 115px;
+}
+
+.small-screen-svg-line {
+  padding-top: 0.5rem;
+  stroke: $accent-b;
+  stroke-width: 0.25rem;
+  width: 4em;
+  height: 72px;
+}
+.dicount-heading{
+  margin-left: 7px;
+}
+
+.hover-text:hover {
+  color: $black !important;
+
+  .hover-icon {
+    color: $black !important;
+  }
+}
+
+.hover-discount-icon:hover {
+  color: $white !important;
+}
+
+.large-heading {
+  margin-left: 7px;
+  color: $white;
+  max-width: 24.5rem;
+  line-height: 78px;
+  font-size: 78px;
+}
+
+.medium-heading {
+  padding-left: 1rem;
+  color: $white;
+  max-width: 27rem;
+  line-height: 60px;
+  font-size: 60px;
+}
+
+.small-heading {
+  padding-left: 0.5rem;
+  color: $white;
+  line-height: 40px;
+  font-size: 36px;
+}
+
+.logo {
+  width: 4.44rem;
+  margin-top: 1.5rem;
+  margin-left: 1.5rem;
+}
+
+.username-suggestion {
+  padding: 1px 0.5rem;
+  margin: 0.25rem;
+  border-radius: 0.375rem;
+  line-height: 24px;
+  font-size: 12px;
+  font-weight: normal;
+  color: $primary-700;
+}
+
+.username-suggestion-label {
+  font-size: 0.75rem;
+  line-height: 1.25rem;
+  margin-right: 0.25rem;
+}
+
+.yellow-border {
+  border: 2px solid #F0CC00;
+}
+
+.one-rem-font {
+  font-size: 0.99rem;
+  color: #707070;
+}
+
+.institute-heading {
+  color: $primary-700;
+}
+
+.logistration-button {
+  color: $gray-700;
+}
+
+.logistration-button:hover{
+  color: $gray-700;
+  text-decoration: none;
+}
+
+.dropdown-item:active {
+    background-color: #F2F0EF;
+}
+
+.dropdown-container {
+    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15), 0px 2px 8px rgba(0, 0, 0, 0.15);
+    border-radius: 4px;
+    max-height: 200px;
+    font-size: 1rem;
+    font-weight: normal;
+    line-height: 1.25rem;
+    overflow-y: scroll;
+    position: absolute;
+    background-color: #fff;
+    width: 464px;
+}
+
+.email-error-alert {
+  padding: 0.5rem 1rem;
+
+  .alert-close {
+    float: right;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+
+  .alert-text {
+    font-size: 0.75rem;
+    line-height: 1.25rem;
+  }
+
+  .alert-link {
+    color: $primary !important;
+
+    &:hover {
+      text-decoration: underline;
+      color: $info-700 !important;
+    }
+  }
+}
+
+.email-warning-alert-link {
+  color: $info-500 !important;
+
+  &:hover {
+    text-decoration: underline;
+    color: $info-700 !important;
+  }
+}
+
+#forgot-password {
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.arrow-back-icon {
+  margin-top:2px;
+}
+
+.icon-size {
+  width: 2.3rem;
+}
+.has-floating-label {
+  color: $gray-500;
+}
+.pgn__form-control-floating-label .pgn__form-control-floating-label-content {
+  font-size: 0.875rem;
+  line-height: 1.5;
+}
+
+.pgn__form-text {
+  font-size: 0.75rem;
+}
+
+.form-field .form-control:focus ~ .pgn__form-control-floating-label .pgn__form-control-floating-label-content {
+    font-size: 16px;
+    color: $primary-700;
+}
+
+.form-field .form-control:not([value='']):not(:focus) ~
+  .pgn__form-control-floating-label .pgn__form-control-floating-label-content {
+  font-size: 16px;
+}
+
+.pgn__form-group {
+  margin-bottom: 1.75rem;
+}
+
+.form-text-size {
+  margin-top: 0.188rem !important;
+  line-height: 1.25rem;
+}
+
+.progressive-profiling-support {
+  font-size: 0.875rem;
+  font-weight: 400;
+}
+
+.discount-banner {
+  background-color: #03C7E8;
+}
+
+.dashed-border {
+  border-style: dashed;
+  border-width: thin;
+  padding: 0.5rem;
+}
+
+@media (min-width: 1024px) {
+  .mw-500 {
+    width: 500px;
+  }
+}
+
+@media (max-width: 600px) {
+  .form-control {
+    width: 100%;
+  }
+}
+
+@media (min-width: 463px) {
+  .reset-password-container {
+    width: 420px;
+    max-width: 420px;
+  }
+
+  .tpa-skeleton {
+    min-width: 464px !important;
+  }
+}
+
+
+@media (max-width: 767px) {
+  .welcome-page-content {
+    padding-top: 1.5rem !important;
+  }
+
+  .layout {
+    display: flex;
+    align-items: center;
+    flex-direction:column;
+    justify-content: center;
+  }
+
+  .dashed-border {
+    border-style: dashed;
+    border-width: thin;
+    padding: 0.25rem 0.5rem;
+  }
+}
+
+@media (max-width: 1199px) and (min-width: 768px) {
+  .layout {
+    display: flex;
+    align-items: center;
+    flex-direction:column;
+    justify-content: center;
+  }
+}
+
+@media (min-width: 1200px) {
+  .layout{
+    display: flex;
+    justify-content: space-between;
+
+  }
+  .content {
+    width: 50vw;
+    display: flex;
+    justify-content: center;
+    margin-top: 4rem;
+  }
+}
+
+@media (max-width: 464px) {
+  .dropdown-container {
+    width: auto;
+    left: 0;
+    right: 0;
+    position: relative;
+  }
+}
+
+@media (max-height: 500px) {
+  .large-screen-svg-line, .large-heading {
+    margin-top: 5rem;
+  }
+}
+
+.alert {
+  p:last-child {
+    margin-bottom: 0;
+  }
+}
+
+@media screen and (min-width: 960px) {
+  html {
+    margin-right: calc(100% - 100vw);
+    margin-left: 0;
+  }
+}
+
+@media (max-width: 550px) {
+  .variation2-text-alignment {
+    text-align: left;
+  }
+}
+
+// Smaller than Extra Small (Mobile Screens)
+@media (max-width: 464px) {
+  .btn-social {
+    min-width: 100%;
+    margin-bottom: 0.75rem;
+    margin-right: 0 !important;
+  }
+
+  .welcome-page-content,
+  .main-content {
+    min-width: 100vw !important;
+    padding: 1.5rem !important;
+  }
+
+  .progressive-profiling-support {
+    font-size: 0.688rem;
+    font-weight: normal;
+    line-height: 0.938rem;
+  }
+}
+
+.table-striped tbody tr:nth-of-type(odd) {
+  background-color: $light-200;
+}
+
+.secondary-provider-link {
+  font-weight: normal;
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+  color: $primary-700
+}
+
+.opt-checkbox {
+  .pgn__form-label {
+    font-size: 0.75rem;
+    line-height: 1.25rem;
+  }
+  margin-top: 1rem;
+  margin-left: 3px;
+}
+.suggested-username {
+  position: relative;
+  margin-top: -8.7%;
+  margin-left: 15px;
+}
+.suggested-username-close-button {
+  right: 1rem;
+  position: absolute;
+}
+.suggested-username-with-error {
+  position: relative;
+  margin-top: -13.7%;
+  margin-bottom: 11%;
+  margin-left: 15px;
+}
+.scroll-suggested-username {
+  width: 21rem;
+  white-space: nowrap;
+  overflow-x: auto;
+  display: inline-flex;
+}
+
+.pgn__form-control-decorator-trailing {
+  right: 0 !important;
+}
--- a/src/base-component/AuthExtraLargeLayout.jsx
+++ b/src/base-component/AuthExtraLargeLayout.jsx
@@ -0,0 +1,97 @@
+import React from 'react';
+
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+import { getConfig } from '@edx/frontend-platform';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import {
+  Col, Hyperlink, Image, Row,
+} from '@edx/paragon';
+
+import messages from './messages';
+
+const AuthExtraLargeLayout = (props) => {
+  const { intl, username, variant } = props;
+
+  return (
+    <div className="container row p-0 m-0 large-screen-container">
+      <div className="col-md-9 p-0 screen-header-light">
+        <Hyperlink destination={getConfig().MARKETING_SITE_BASE_URL}>
+          <Image alt={getConfig().SITE_NAME} className="logo position-absolute" src={getConfig().LOGO_WHITE_URL} />
+        </Hyperlink>
+        <div className="min-vh-100 d-flex align-items-center">
+          <div>
+            <Row>
+              <Col xs={3}>
+                <svg className={classNames(
+                  'ml-5 mt-5',
+                  {
+                    'extra-large-svg-line': variant === 'xl',
+                    'extra-extra-large-svg-line': variant === 'xxl',
+                  },
+                )}
+                >
+                  <line x1="60" y1="0" x2="5" y2="220" />
+                </svg>
+              </Col>
+              <Col xs={9}>
+                <div className={classNames(
+                  'data-hj-suppress',
+                  {
+                    h3: variant === 'xl',
+                    h2: variant === 'xxl',
+                  },
+                )}
+                >
+                  {intl.formatMessage(
+                    messages['welcome.to.platform'], { siteName: getConfig().SITE_NAME, username },
+                  )}
+                </div>
+                <div
+                  className={classNames(
+                    'text-primary',
+                    {
+                      'display-1': variant === 'xl',
+                      'display-2': variant === 'xxl',
+                    },
+                  )}
+                >
+                  {intl.formatMessage(messages['complete.your.profile.1'])}
+                  <span className="text-accent-a">
+                    <br />
+                    {intl.formatMessage(messages['complete.your.profile.2'])}
+                  </span>
+                </div>
+              </Col>
+            </Row>
+          </div>
+        </div>
+      </div>
+      <div className="col-md-3 p-0 screen-polygon">
+        <svg
+          width="100%"
+          height="100%"
+          className="m1-n1 large-screen-svg-light"
+          preserveAspectRatio="xMaxYMin meet"
+        >
+          <g transform="skewX(171.6)">
+            <rect x="0" y="0" height="100%" width="100%" />
+          </g>
+        </svg>
+      </div>
+    </div>
+  );
+};
+
+AuthExtraLargeLayout.defaultProps = {
+  variant: 'xl',
+};
+
+AuthExtraLargeLayout.propTypes = {
+  intl: intlShape.isRequired,
+  username: PropTypes.string.isRequired,
+  variant: PropTypes.oneOf(['xl', 'xxl']),
+};
+
+export default injectIntl(AuthExtraLargeLayout);
--- a/src/base-component/AuthMediumLayout.jsx
+++ b/src/base-component/AuthMediumLayout.jsx
@@ -0,0 +1,69 @@
+import React from 'react';
+
+import PropTypes from 'prop-types';
+
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { getConfig } from '@edx/frontend-platform';
+import {
+  Col, Hyperlink, Image, Row,
+} from '@edx/paragon';
+
+import messages from './messages';
+
+const AuthMediumLayout = (props) => {
+  const { intl, username } = props;
+
+  return (
+    <div className="container row p-0 mb-3 medium-container">
+      <div className="col-md-10 p-0 screen-header-light">
+        <Hyperlink destination={getConfig().MARKETING_SITE_BASE_URL}>
+          <Image alt={getConfig().SITE_NAME} className="logo" src={getConfig().LOGO_WHITE_URL} />
+        </Hyperlink>
+        <div className="d-flex align-items-center justify-content-center ml-6">
+          <div>
+            <Row>
+              <Col xs={3}>
+                <svg className="medium-svg-line ml-5 mt-5">
+                  <line x1="60" y1="0" x2="5" y2="220" />
+                </svg>
+              </Col>
+              <Col xs={9}>
+                <h3 className="data-hj-suppress">
+                  {intl.formatMessage(
+                    messages['welcome.to.platform'], { siteName: getConfig().SITE_NAME, username },
+                  )}
+                </h3>
+                <div className="display-1 text-primary">
+                  {intl.formatMessage(messages['complete.your.profile.1'])}
+                  <span className="text-accent-a">
+                    <br />
+                    {intl.formatMessage(messages['complete.your.profile.2'])}
+                  </span>
+                </div>
+              </Col>
+            </Row>
+          </div>
+        </div>
+      </div>
+      <div className="col-md-2 p-0 screen-polygon">
+        <svg
+          width="100%"
+          height="100%"
+          className="medium-screen-svg-light"
+          preserveAspectRatio="xMaxYMin meet"
+        >
+          <g transform="skewX(168)">
+            <rect x="0" y="0" height="100%" width="100%" />
+          </g>
+        </svg>
+      </div>
+    </div>
+  );
+};
+
+AuthMediumLayout.propTypes = {
+  intl: intlShape.isRequired,
+  username: PropTypes.string.isRequired,
+};
+
+export default injectIntl(AuthMediumLayout);
--- a/src/base-component/AuthSmallLayout.jsx
+++ b/src/base-component/AuthSmallLayout.jsx
@@ -0,0 +1,68 @@
+import React from 'react';
+
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+import { getConfig } from '@edx/frontend-platform';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import {
+  Col, Hyperlink, Image, Row,
+} from '@edx/paragon';
+
+import messages from './messages';
+
+const AuthSmallLayout = (props) => {
+  const { intl, username, variant } = props;
+
+  return (
+    <div className="small-screen-header-light">
+      <Hyperlink destination={getConfig().MARKETING_SITE_BASE_URL}>
+        <Image alt={getConfig().SITE_NAME} className="logo" src={getConfig().LOGO_WHITE_URL} />
+      </Hyperlink>
+      <div className={classNames('d-flex mt-3', { 'pl-6': variant === 'sm' })}>
+        <div>
+          <Row>
+            <Col xs={3}>
+              <svg className={classNames(
+                'mt-4\.5', // eslint-disable-line no-useless-escape
+                {
+                  'extra-small-svg-line': variant === 'xs',
+                  'small-svg-line': variant === 'sm',
+                },
+              )}
+              >
+                <line x1="60" y1="0" x2="5" y2="220" />
+              </svg>
+            </Col>
+            <Col xs={9}>
+              <h5 className="data-hj-suppress">
+                {intl.formatMessage(
+                  messages['welcome.to.platform'], { siteName: getConfig().SITE_NAME, username },
+                )}
+              </h5>
+              <h1>
+                {intl.formatMessage(messages['complete.your.profile.1'])}
+                <br />
+                <span className="text-accent-a">
+                  {intl.formatMessage(messages['complete.your.profile.2'])}
+                </span>
+              </h1>
+            </Col>
+          </Row>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+AuthSmallLayout.defaultProps = {
+  variant: 'sm',
+};
+
+AuthSmallLayout.propTypes = {
+  intl: intlShape.isRequired,
+  username: PropTypes.string.isRequired,
+  variant: PropTypes.oneOf(['sm', 'xs']),
+};
+
+export default injectIntl(AuthSmallLayout);
--- a/src/base-component/BaseComponent.jsx
+++ b/src/base-component/BaseComponent.jsx
@@ -0,0 +1,98 @@
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
+import MediaQuery from 'react-responsive';
+import { breakpoints } from '@edx/paragon';
+import CookiePolicyBanner from '@edx/frontend-component-cookie-policy-banner';
+import { getLocale } from '@edx/frontend-platform/i18n';
+
+import LargeLayout from './LargeLayout';
+import MediumLayout from './MediumLayout';
+import SmallLayout from './SmallLayout';
+
+import AuthExtraLargeLayout from './AuthExtraLargeLayout';
+import AuthMediumLayout from './AuthMediumLayout';
+import AuthSmallLayout from './AuthSmallLayout';
+import DiscountExperimentBanner from './DiscountBanner';
+
+const BaseComponent = ({ children, isRegistrationPage, showWelcomeBanner }) => {
+  const authenticatedUser = showWelcomeBanner ? getAuthenticatedUser() : null;
+  const [optimizelyExperimentName, setOptimizelyExperimentName] = useState('');
+
+  useEffect(() => {
+    const { experimentName } = window;
+
+    if (experimentName) {
+      setOptimizelyExperimentName(experimentName);
+    }
+  });
+
+  return (
+    <>
+      {isRegistrationPage && optimizelyExperimentName === 'variation2' ? <DiscountExperimentBanner /> : null}
+      <CookiePolicyBanner languageCode={getLocale()} />
+      <MediaQuery minWidth={breakpoints.extraLarge.minWidth} maxWidth={breakpoints.extraLarge.maxWidth}>
+        <div className="col-md-12 extra-large-screen-top-stripe" />
+      </MediaQuery>
+      <MediaQuery minWidth={breakpoints.extraExtraLarge.minWidth} maxWidth={breakpoints.extraExtraLarge.maxWidth}>
+        <div className="col-md-12 extra-large-screen-top-stripe" />
+      </MediaQuery>
+
+      <div className={classNames('layout', { authenticated: authenticatedUser })}>
+        <MediaQuery maxWidth={breakpoints.extraSmall.maxWidth}>
+          <div className="col-md-12 small-screen-top-stripe" />
+          {authenticatedUser ? <AuthSmallLayout variant="xs" username={authenticatedUser.username} /> : (
+            <SmallLayout experimentName={optimizelyExperimentName} isRegistrationPage={isRegistrationPage} />
+          )}
+        </MediaQuery>
+        <MediaQuery minWidth={breakpoints.small.minWidth} maxWidth={breakpoints.small.maxWidth}>
+          <div className="col-md-12 small-screen-top-stripe" />
+          {authenticatedUser ? <AuthSmallLayout username={authenticatedUser.username} /> : (
+            <SmallLayout experimentName={optimizelyExperimentName} isRegistrationPage={isRegistrationPage} />
+          )}
+        </MediaQuery>
+        <MediaQuery minWidth={breakpoints.medium.minWidth} maxWidth={breakpoints.medium.maxWidth}>
+          <div className="w-100 medium-screen-top-stripe" />
+          {authenticatedUser ? <AuthMediumLayout username={authenticatedUser.username} /> : (
+            <MediumLayout experimentName={optimizelyExperimentName} isRegistrationPage={isRegistrationPage} />
+          )}
+        </MediaQuery>
+        <MediaQuery minWidth={breakpoints.large.minWidth} maxWidth={breakpoints.large.maxWidth}>
+          <div className="w-100 large-screen-top-stripe" />
+          {authenticatedUser ? <AuthMediumLayout username={authenticatedUser.username} /> : (
+            <MediumLayout experimentName={optimizelyExperimentName} isRegistrationPage={isRegistrationPage} />
+          )}
+        </MediaQuery>
+        <MediaQuery minWidth={breakpoints.extraLarge.minWidth} maxWidth={breakpoints.extraLarge.maxWidth}>
+          {authenticatedUser ? <AuthExtraLargeLayout username={authenticatedUser.username} /> : (
+            <LargeLayout experimentName={optimizelyExperimentName} isRegistrationPage={isRegistrationPage} />
+          )}
+        </MediaQuery>
+        <MediaQuery minWidth={breakpoints.extraExtraLarge.minWidth} maxWidth={breakpoints.extraExtraLarge.maxWidth}>
+          {authenticatedUser ? <AuthExtraLargeLayout variant="xxl" username={authenticatedUser.username} /> : (
+            <LargeLayout experimentName={optimizelyExperimentName} isRegistrationPage={isRegistrationPage} />
+          )}
+        </MediaQuery>
+
+        <div className={classNames('content', { 'align-items-center mt-0': authenticatedUser })}>
+          {children}
+        </div>
+      </div>
+    </>
+  );
+};
+
+BaseComponent.defaultProps = {
+  isRegistrationPage: false,
+  showWelcomeBanner: false,
+};
+
+BaseComponent.propTypes = {
+  children: PropTypes.node.isRequired,
+  isRegistrationPage: PropTypes.bool,
+  showWelcomeBanner: PropTypes.bool,
+};
+
+export default BaseComponent;
--- a/src/base-component/DiscountBanner.jsx
+++ b/src/base-component/DiscountBanner.jsx
@@ -0,0 +1,71 @@
+import React, { useState } from 'react';
+
+import ClipboardJS from 'clipboard';
+
+import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n';
+import { faCut } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+import { Toast, PageBanner } from '@edx/paragon';
+import messages from './messages';
+
+const DiscountExperimentBanner = (props) => {
+  const { intl } = props;
+  const [show, setShow] = useState(true);
+  const [showToast, setToastShow] = useState(false);
+  new ClipboardJS('.copyIcon'); // eslint-disable-line no-new
+  const getDiscountText = () => (
+    <strong>
+      15% <FormattedMessage
+        id="top.discount.message.15.off"
+        defaultMessage="off"
+        description="Text used with discounts e.g. 15% off"
+      />
+    </strong>
+  );
+
+  return (
+    <>
+      <Toast
+        onClose={() => setToastShow(false)}
+        show={showToast}
+      >
+        {intl.formatMessage(messages['code.copied'])}
+      </Toast>
+      <PageBanner
+        show={show}
+        dismissible
+        onDismiss={() => { setShow(false); }}
+      >
+        <span className="text-primary-700 small variation2-text-alignment">
+          <span className="mr-3">
+            <FormattedMessage
+              id="top.discount.message.body"
+              defaultMessage="Get {discount} your first verified certificate* with code"
+              description="Message body for edX discount"
+              values={{
+                discount: getDiscountText(),
+              }}
+            />
+          </span>
+          <span className="hover-text dashed-border p-1 d-inline-flex flex-wrap align-items-center">
+            <span id="edx-welcome" className="font-weight-bold ">EDXWELCOME</span>
+            <FontAwesomeIcon
+              className="text-dark-200 copyIcon ml-2 hover-icon"
+              icon={faCut}
+              data-clipboard-action="copy"
+              data-clipboard-target="#edx-welcome"
+              onClick={() => setToastShow(true)}
+            />
+          </span>
+        </span>
+      </PageBanner>
+    </>
+  );
+};
+
+DiscountExperimentBanner.propTypes = {
+  intl: intlShape.isRequired,
+
+};
+export default injectIntl(DiscountExperimentBanner);
--- a/src/base-component/LargeLayout.jsx
+++ b/src/base-component/LargeLayout.jsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { getConfig } from '@edx/frontend-platform';
+import { Hyperlink, Image } from '@edx/paragon';
+
+import LargeScreenLeftLayout from './LargeLeftLayout';
+
+const LargeLayout = ({ experimentName, isRegistrationPage }) => (
+  <div className="container row p-0 m-0 large-screen-container">
+    <div className="col-md-9 p-0 screen-header-primary">
+      <Hyperlink destination={getConfig().MARKETING_SITE_BASE_URL}>
+        <Image alt={getConfig().SITE_NAME} className="logo position-absolute" src={getConfig().LOGO_WHITE_URL} />
+      </Hyperlink>
+      <LargeScreenLeftLayout experimentName={experimentName} isRegistrationPage={isRegistrationPage} />
+    </div>
+    <div className="col-md-3 p-0 screen-polygon">
+      <svg
+        width="100%"
+        height="100%"
+        className="ml-n1 large-screen-svg-primary"
+        preserveAspectRatio="xMaxYMin meet"
+      >
+        <g transform="skewX(171.6)">
+          <rect x="0" y="0" height="100%" width="100%" />
+        </g>
+      </svg>
+    </div>
+  </div>
+);
+
+LargeLayout.defaultProps = {
+  experimentName: '',
+  isRegistrationPage: false,
+};
+
+LargeLayout.propTypes = {
+  experimentName: PropTypes.string,
+  isRegistrationPage: PropTypes.bool,
+};
+
+export default LargeLayout;
--- a/src/base-component/LargeLeftLayout.jsx
+++ b/src/base-component/LargeLeftLayout.jsx
@@ -0,0 +1,86 @@
+import React, { useState } from 'react';
+
+import classNames from 'classnames';
+
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { getConfig } from '@edx/frontend-platform';
+import PropTypes from 'prop-types';
+import ClipboardJS from 'clipboard';
+
+import { faCut } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Toast } from '@edx/paragon';
+
+import messages from './messages';
+import SideDiscountBanner from './SideDiscountBanner';
+
+const LargeLeftLayout = (props) => {
+  const { intl, isRegistrationPage, experimentName } = props;
+  const [showToast, setToastShow] = useState(false);
+  new ClipboardJS('.copyIcon'); // eslint-disable-line no-new
+
+  return (
+    <div className="min-vh-100 d-flex justify-content-left align-items-center">
+      <div className="d-flex pr-0 mt-lg-n2">
+        <Toast
+          onClose={() => setToastShow(false)}
+          show={showToast}
+        >
+          {intl.formatMessage(messages['code.copied'])}
+        </Toast>
+        <svg className={classNames(
+          'large-screen-svg-line',
+          {
+            'variation1-bar-color mt-n6 pt-0 ml-5': experimentName === 'variation1' && isRegistrationPage,
+            'variation2-bar-color': experimentName === 'variation2' && isRegistrationPage,
+            'ml-5': experimentName !== 'variation1' || !isRegistrationPage,
+          },
+        )}
+        >
+          <line x1="50" y1="0" x2="10" y2="215" />
+        </svg>
+        <div className={classNames({ 'pl-4': experimentName === 'variation1' && isRegistrationPage })}>
+          <h1 className={classNames('large-heading', { 'mb-4.5': experimentName === 'variation1' && isRegistrationPage })}>
+            {intl.formatMessage(messages['start.learning'])}
+            <span
+              className={((experimentName === 'variation1' || experimentName === 'variation2') && isRegistrationPage) ? 'text-accent-b' : 'text-accent-a'}
+            >
+              <br />
+              {intl.formatMessage(messages['with.site.name'], { siteName: getConfig().SITE_NAME })}
+            </span>
+          </h1>
+          {experimentName === 'variation1' && isRegistrationPage ? (
+            <span className="text-light-300 dicount-heading">
+              <span className="lead mr-3">
+                <SideDiscountBanner />
+              </span>
+              <span className="dashed-border d-inline-flex flex-wrap align-items-center">
+                <span id="edx-welcome" className="text-white edx-welcome font-weight-bold mr-1">EDXWELCOME</span>
+                <FontAwesomeIcon
+                  className="text-light-700 copyIcon ml-1.5 hover-discount-icon"
+                  icon={faCut}
+                  data-clipboard-action="copy"
+                  data-clipboard-target="#edx-welcome"
+                  onClick={() => setToastShow(true)}
+                />
+              </span>
+            </span>
+          ) : null}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+LargeLeftLayout.propTypes = {
+  intl: intlShape.isRequired,
+  experimentName: PropTypes.string,
+  isRegistrationPage: PropTypes.bool,
+};
+
+LargeLeftLayout.defaultProps = {
+  experimentName: '',
+  isRegistrationPage: false,
+};
+
+export default injectIntl(LargeLeftLayout);
--- a/src/base-component/MediumLayout.jsx
+++ b/src/base-component/MediumLayout.jsx
@@ -0,0 +1,102 @@
+import React, { useState } from 'react';
+
+import classNames from 'classnames';
+
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { getConfig } from '@edx/frontend-platform';
+import { Hyperlink, Image, Toast } from '@edx/paragon';
+import PropTypes from 'prop-types';
+
+import ClipboardJS from 'clipboard';
+
+import { faCut } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import messages from './messages';
+import SideDiscountBanner from './SideDiscountBanner';
+
+const MediumLayout = (props) => {
+  const { intl, isRegistrationPage, experimentName } = props;
+  const [showToast, setToastShow] = useState(false);
+  new ClipboardJS('.copyIcon'); // eslint-disable-line no-new
+
+  return (
+    <div className={classNames(
+      'container row p-0 mb-3 medium-screen-container',
+      {
+        'variation1-medium-screen': experimentName === 'variation1' && isRegistrationPage,
+      },
+    )}
+    >
+      <Toast
+        onClose={() => setToastShow(false)}
+        show={showToast}
+      >
+        {intl.formatMessage(messages['code.copied'])}
+      </Toast>
+      <div className="col-md-10 p-0 screen-header-primary">
+        <Hyperlink destination={getConfig().MARKETING_SITE_BASE_URL}>
+          <Image alt={getConfig().SITE_NAME} className="logo" src={getConfig().LOGO_WHITE_URL} />
+        </Hyperlink>
+        <div className="row mt-4 justify-content-center">
+          <svg className={classNames(
+            'medium-screen-svg-line pl-5',
+            {
+              'variation1-bar-color': experimentName === 'variation1' && isRegistrationPage,
+              'variation2-bar-color': experimentName === 'variation2' && isRegistrationPage,
+            },
+          )}
+          >
+            <line x1="50" y1="0" x2="10" y2="215" />
+          </svg>
+          <div className="pb-4">
+            <h1 className="medium-heading">
+              {intl.formatMessage(messages['start.learning'])}
+              <span
+                className={((experimentName === 'variation1' || experimentName === 'variation2') && isRegistrationPage) ? 'text-accent-b' : 'text-accent-a'}
+              >
+                <br />
+                {intl.formatMessage(messages['with.site.name'], { siteName: getConfig().SITE_NAME })}
+              </span>
+            </h1>
+            {experimentName === 'variation1' && isRegistrationPage ? (
+              <div className="text-light-300 pl-3">
+                <SideDiscountBanner />
+                <span className="dashed-border h5 text-white">
+                  <span id="edx-welcome" className="edx-welcome">EDXWELCOME </span>
+                  <FontAwesomeIcon
+                    className="text-light-700 copyIcon ml-1 hover-discount-icon"
+                    icon={faCut}
+                    data-clipboard-action="copy"
+                    data-clipboard-target="#edx-welcome"
+                    onClick={() => setToastShow(true)}
+                  />
+                </span>
+              </div>
+            ) : null}
+          </div>
+        </div>
+        <div />
+      </div>
+      <div className="col-md-2 p-0 screen-polygon">
+        <svg width="100%" height="100%" className="medium-screen-svg-primary" preserveAspectRatio="xMaxYMin meet">
+          <g transform="skewX(168)">
+            <rect x="0" y="0" height="100%" width="100%" />
+          </g>
+        </svg>
+      </div>
+    </div>
+  );
+};
+
+MediumLayout.propTypes = {
+  intl: intlShape.isRequired,
+  experimentName: PropTypes.string,
+  isRegistrationPage: PropTypes.bool,
+};
+
+MediumLayout.defaultProps = {
+  experimentName: '',
+  isRegistrationPage: false,
+};
+
+export default injectIntl(MediumLayout);
--- a/src/base-component/SideDiscountBanner.jsx
+++ b/src/base-component/SideDiscountBanner.jsx
@@ -0,0 +1,38 @@
+import React from 'react';
+
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+
+export default function SideDiscountBanner() {
+  const getDiscountText = () => (
+    <span className="text-accent-a h3">
+      15% <FormattedMessage
+        id="side.discount.message.15.off"
+        defaultMessage="off"
+        description="Text used with discounts e.g. 15% off"
+      />
+    </span>
+  );
+  const getCerificateMsg = () => (
+    <span className="dicount-heading">
+      <FormattedMessage
+        id="certificate.message"
+        defaultMessage="certificate* with code"
+        description="Text with certificate"
+      />
+    </span>
+  );
+  return (
+    <span className="mr-1.5">
+      <FormattedMessage
+        id="side.discount.message.body"
+        defaultMessage="Get {discountText} your first verified {lineBreak} {certificateMsg}"
+        description="Message body for edX discount"
+        values={{
+          discountText: getDiscountText(),
+          lineBreak: <br />,
+          certificateMsg: getCerificateMsg(),
+        }}
+      />
+    </span>
+  );
+}
--- a/src/base-component/SmallLayout.jsx
+++ b/src/base-component/SmallLayout.jsx
@@ -0,0 +1,90 @@
+import React, { useState } from 'react';
+
+import classNames from 'classnames';
+
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { getConfig } from '@edx/frontend-platform';
+import { Hyperlink, Image, Toast } from '@edx/paragon';
+
+import PropTypes from 'prop-types';
+
+import ClipboardJS from 'clipboard';
+
+import { faCut } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import messages from './messages';
+import SideDiscountBanner from './SideDiscountBanner';
+
+const SmallLayout = (props) => {
+  const { intl, isRegistrationPage, experimentName } = props;
+  const [showToast, setToastShow] = useState(false);
+  new ClipboardJS('.copyIcon'); // eslint-disable-line no-new
+
+  return (
+    <>
+      <div className="small-screen-header-primary">
+        <Toast
+          onClose={() => setToastShow(false)}
+          show={showToast}
+        >
+          {intl.formatMessage(messages['code.copied'])}
+        </Toast>
+        <Hyperlink destination={getConfig().MARKETING_SITE_BASE_URL}>
+          <Image alt={getConfig().SITE_NAME} className="logo" src={getConfig().LOGO_WHITE_URL} />
+        </Hyperlink>
+        <div className="d-flex mt-3">
+          <svg className={classNames(
+            'small-screen-svg-line',
+            {
+              'variation1-bar-color': experimentName === 'variation1' && isRegistrationPage,
+              'variation2-bar-color': experimentName === 'variation2' && isRegistrationPage,
+            },
+          )}
+          >
+            <line x1="55" y1="0" x2="40" y2="65" />
+          </svg>
+          <div className="pb-3">
+            <h1 className="small-heading">
+              {intl.formatMessage(messages['start.learning'])}
+              <br />
+              <span
+                className={((experimentName === 'variation1' || experimentName === 'variation2') && isRegistrationPage) ? 'text-accent-b' : 'text-accent-a'}
+              >
+                {intl.formatMessage(messages['with.site.name'], { siteName: getConfig().SITE_NAME })}
+              </span>
+            </h1>
+            {(experimentName === 'variation1' && isRegistrationPage) ? (
+              <div className="small text-light-300 pl-2">
+                <SideDiscountBanner />
+                <span className="dashed-border h6 text-white d-inline-flex flex-wrap align-items-center">
+                  <span id="edx-welcome" className="edx-welcome mr-1">EDXWELCOME</span>
+                  <FontAwesomeIcon
+                    className="text-light-700 copyIcon ml-1 hover-discount-icon"
+                    icon={faCut}
+                    data-clipboard-action="copy"
+                    data-clipboard-target="#edx-welcome"
+                    onClick={() => setToastShow(true)}
+                  />
+                </span>
+              </div>
+            ) : null}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+SmallLayout.propTypes = {
+  intl: intlShape.isRequired,
+  experimentName: PropTypes.string,
+  isRegistrationPage: PropTypes.bool,
+};
+
+SmallLayout.defaultProps = {
+  experimentName: '',
+  isRegistrationPage: false,
+
+};
+
+export default injectIntl(SmallLayout);
--- a/src/base-component/index.jsx
+++ b/src/base-component/index.jsx
@@ -0,0 +1 @@
+export { default } from './BaseComponent';
--- a/src/base-container/components/welcome-page-layout/messages.js
+++ b/src/base-container/components/welcome-page-layout/messages.js
@@ -1,11 +1,22 @@
 import { defineMessages } from '@edx/frontend-platform/i18n';

 const messages = defineMessages({
-  'welcome.to.platform': {
-    id: 'welcome.to.platform',
-    defaultMessage: 'Welcome to {siteName}, {fullName}!',
-    description: 'Welcome message that appears on progressive profile page',
+  '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',
+  },
+  'code.copied': {
+    id: 'code.copied',
+    defaultMessage: 'Code copied',
+    description: 'part of 15% discount code copied',
+  },
+  // authenticated user base component text
  'complete.your.profile.1': {
    id: 'complete.your.profile.1',
    defaultMessage: 'Complete',
@@ -16,6 +27,11 @@ 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;
--- a/src/base-component/tests/BaseComponent.test.jsx
+++ b/src/base-component/tests/BaseComponent.test.jsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
+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);
+  });
+});
--- a/src/base-container/components/default-layout/DefaultLayout.test.jsx
+++ b/src/base-container/components/default-layout/DefaultLayout.test.jsx
@@ -1,50 +0,0 @@
-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();
-  });
-});
--- a/src/base-container/components/default-layout/LargeLayout.jsx
+++ b/src/base-container/components/default-layout/LargeLayout.jsx
@@ -1,45 +0,0 @@
-import React from 'react';
-
-import { getConfig } from '@edx/frontend-platform';
-import { useIntl } from '@edx/frontend-platform/i18n';
-import { Hyperlink, Image } from '@openedx/paragon';
-import classNames from 'classnames';
-
-import messages from './messages';
-
-const LargeLayout = () => {
-  const { formatMessage } = useIntl();
-
-  return (
-    <div className="w-50 d-flex">
-      <div className="col-md-9 bg-primary-400">
-        <Hyperlink destination={getConfig().MARKETING_SITE_BASE_URL}>
-          <Image className="logo position-absolute" alt={getConfig().SITE_NAME} src={getConfig().LOGO_WHITE_URL} />
-        </Hyperlink>
-        <div className="min-vh-100 d-flex align-items-center">
-          <div className={classNames({ 'large-yellow-line mr-n4.5': getConfig().SITE_NAME === 'edX' })} />
-          <h1
-            className={classNames(
-              'display-2 text-white mw-xs',
-              { 'ml-6': getConfig().SITE_NAME !== 'edX' },
-            )}
-          >
-            {formatMessage(messages['start.learning'])}
-            <div className="text-accent-a">
-              {formatMessage(messages['with.site.name'], { siteName: getConfig().SITE_NAME })}
-            </div>
-          </h1>
-        </div>
-      </div>
-      <div className="col-md-3 bg-white p-0">
-        <svg className="ml-n1 w-100 h-100 large-screen-svg-primary" preserveAspectRatio="xMaxYMin meet">
-          <g transform="skewX(171.6)">
-            <rect x="0" y="0" height="100%" width="100%" />
-          </g>
-        </svg>
-      </div>
-    </div>
-  );
-};
-
-export default LargeLayout;
--- a/src/base-container/components/default-layout/MediumLayout.jsx
+++ b/src/base-container/components/default-layout/MediumLayout.jsx
@@ -1,52 +0,0 @@
-import React from 'react';
-
-import { getConfig } from '@edx/frontend-platform';
-import { useIntl } from '@edx/frontend-platform/i18n';
-import { Hyperlink, Image } from '@openedx/paragon';
-import classNames from 'classnames';
-
-import messages from './messages';
-
-const MediumLayout = () => {
-  const { formatMessage } = useIntl();
-
-  return (
-    <>
-      <div className="w-100 medium-screen-top-stripe" />
-      <div className="w-100 p-0 mb-3 d-flex">
-        <div className="col-md-10 bg-primary-400">
-          <Hyperlink destination={getConfig().MARKETING_SITE_BASE_URL}>
-            <Image alt={getConfig().SITE_NAME} className="logo" src={getConfig().LOGO_WHITE_URL} />
-          </Hyperlink>
-          <div className="d-flex align-items-center justify-content-center mb-4 ">
-            <div className={classNames({ 'mt-1 medium-yellow-line': getConfig().SITE_NAME === 'edX' })} />
-            <div>
-              <h1
-                className={classNames(
-                  'display-1 text-white mt-5 mb-5 mr-2 main-heading',
-                  { 'ml-4.5': getConfig().SITE_NAME !== 'edX' },
-                )}
-              >
-                <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>
-          </div>
-        </div>
-        <div className="col-md-2 bg-white p-0">
-          <svg className="w-100 h-100 medium-screen-svg-primary" preserveAspectRatio="xMaxYMin meet">
-            <g transform="skewX(168)">
-              <rect x="0" y="0" height="100%" width="100%" />
-            </g>
-          </svg>
-        </div>
-      </div>
-    </>
-  );
-};
-
-export default MediumLayout;
--- a/src/base-container/components/default-layout/SmallLayout.jsx
+++ b/src/base-container/components/default-layout/SmallLayout.jsx
@@ -1,40 +0,0 @@
-import React from 'react';
-
-import { getConfig } from '@edx/frontend-platform';
-import { useIntl } from '@edx/frontend-platform/i18n';
-import { Hyperlink, Image } from '@openedx/paragon';
-import classNames from 'classnames';
-
-import messages from './messages';
-
-const SmallLayout = () => {
-  const { formatMessage } = useIntl();
-
-  return (
-    <span className="bg-primary-400 w-100">
-      <div className="col-md-12 small-screen-top-stripe" />
-      <div>
-        <Hyperlink destination={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 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',
-            )}
-          >
-            <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>
-      </div>
-    </span>
-  );
-};
-
-export default SmallLayout;
--- a/src/base-container/components/default-layout/index.jsx
+++ b/src/base-container/components/default-layout/index.jsx
@@ -1,3 +0,0 @@
-export { default as DefaultLargeLayout } from './LargeLayout';
-export { default as DefaultMediumLayout } from './MediumLayout';
-export { default as DefaultSmallLayout } from './SmallLayout';
--- a/src/base-container/components/default-layout/messages.js
+++ b/src/base-container/components/default-layout/messages.js
@@ -1,16 +0,0 @@
-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;
--- a/src/base-container/components/image-layout/ExtraSmallLayout.jsx
+++ b/src/base-container/components/image-layout/ExtraSmallLayout.jsx
@@ -1,34 +0,0 @@
-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;
--- a/src/base-container/components/image-layout/LargeLayout.jsx
+++ b/src/base-container/components/image-layout/LargeLayout.jsx
@@ -1,35 +0,0 @@
-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;
--- a/src/base-container/components/image-layout/MediumLayout.jsx
+++ b/src/base-container/components/image-layout/MediumLayout.jsx
@@ -1,35 +0,0 @@
-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;
--- a/src/base-container/components/image-layout/SmallLayout.jsx
+++ b/src/base-container/components/image-layout/SmallLayout.jsx
@@ -1,34 +0,0 @@
-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;
--- a/src/base-container/components/image-layout/index.jsx
+++ b/src/base-container/components/image-layout/index.jsx
@@ -1,4 +0,0 @@
-export { default as ImageLargeLayout } from './LargeLayout';
-export { default as ImageMediumLayout } from './MediumLayout';
-export { default as ImageSmallLayout } from './SmallLayout';
-export { default as ImageExtraSmallLayout } from './ExtraSmallLayout';
--- a/src/base-container/components/image-layout/index.scss
+++ b/src/base-container/components/image-layout/index.scss
@@ -1,37 +0,0 @@
-.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;
-  }
-}
--- a/src/base-container/components/image-layout/messages.js
+++ b/src/base-container/components/image-layout/messages.js
@@ -1,16 +0,0 @@
-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;
--- a/src/base-container/components/welcome-page-layout/LargeLayout.jsx
+++ b/src/base-container/components/welcome-page-layout/LargeLayout.jsx
@@ -1,49 +0,0 @@
-import React from 'react';
-
-import { getConfig } from '@edx/frontend-platform';
-import { useIntl } from '@edx/frontend-platform/i18n';
-import { Hyperlink, Image } from '@openedx/paragon';
-import PropTypes from 'prop-types';
-
-import messages from './messages';
-
-const LargeLayout = ({ fullName }) => {
-  const { formatMessage } = useIntl();
-
-  return (
-    <div className="w-50 d-flex">
-      <div className="col-md-10 bg-light-200 p-0">
-        <Hyperlink destination={getConfig().MARKETING_SITE_BASE_URL}>
-          <Image className="logo position-absolute" alt={getConfig().SITE_NAME} src={getConfig().LOGO_URL} />
-        </Hyperlink>
-        <div className="min-vh-100 d-flex align-items-center">
-          <div className="large-screen-left-container mr-n4.5 large-yellow-line mt-5" />
-          <div>
-            <h1 className="welcome-to-platform data-hj-suppress">
-              {formatMessage(messages['welcome.to.platform'], { siteName: getConfig().SITE_NAME, fullName })}
-            </h1>
-            <h2 className="complete-your-profile">
-              {formatMessage(messages['complete.your.profile.1'])}
-              <div className="text-accent-a">
-                {formatMessage(messages['complete.your.profile.2'])}
-              </div>
-            </h2>
-          </div>
-        </div>
-      </div>
-      <div className="col-md-2 bg-white p-0">
-        <svg className="m1-n1 w-100 h-100 large-screen-svg-light" preserveAspectRatio="xMaxYMin meet">
-          <g transform="skewX(171.6)">
-            <rect x="0" y="0" height="100%" width="100%" />
-          </g>
-        </svg>
-      </div>
-    </div>
-  );
-};
-
-LargeLayout.propTypes = {
-  fullName: PropTypes.string.isRequired,
-};
-
-export default LargeLayout;
--- a/src/base-container/components/welcome-page-layout/MediumLayout.jsx
+++ b/src/base-container/components/welcome-page-layout/MediumLayout.jsx
@@ -1,52 +0,0 @@
-import React from 'react';
-
-import { getConfig } from '@edx/frontend-platform';
-import { useIntl } from '@edx/frontend-platform/i18n';
-import { Hyperlink, Image } from '@openedx/paragon';
-import PropTypes from 'prop-types';
-
-import messages from './messages';
-
-const MediumLayout = ({ fullName }) => {
-  const { formatMessage } = useIntl();
-
-  return (
-    <>
-      <div className="w-100 medium-screen-top-stripe" />
-      <div className="w-100 p-0 mb-3 d-flex">
-        <div className="col-md-10 bg-light-200">
-          <Hyperlink destination={getConfig().MARKETING_SITE_BASE_URL}>
-            <Image className="logo" alt={getConfig().SITE_NAME} src={getConfig().LOGO_URL} />
-          </Hyperlink>
-          <div className="d-flex align-items-center justify-content-center mb-4 ml-5">
-            <div className="medium-yellow-line mt-5 mr-n2" />
-            <div>
-              <h1 className="h3 data-hj-suppress mw-320">
-                {formatMessage(messages['welcome.to.platform'], { siteName: getConfig().SITE_NAME, fullName })}
-              </h1>
-              <h2 className="display-1">
-                {formatMessage(messages['complete.your.profile.1'])}
-                <div className="text-accent-a">
-                  {formatMessage(messages['complete.your.profile.2'])}
-                </div>
-              </h2>
-            </div>
-          </div>
-        </div>
-        <div className="col-md-2 bg-white p-0">
-          <svg className="w-100 h-100 medium-screen-svg-light" preserveAspectRatio="xMaxYMin meet">
-            <g transform="skewX(168)">
-              <rect x="0" y="0" height="100%" width="100%" />
-            </g>
-          </svg>
-        </div>
-      </div>
-    </>
-  );
-};
-
-MediumLayout.propTypes = {
-  fullName: PropTypes.string.isRequired,
-};
-
-export default MediumLayout;
--- a/src/base-container/components/welcome-page-layout/SmallLayout.jsx
+++ b/src/base-container/components/welcome-page-layout/SmallLayout.jsx
@@ -1,41 +0,0 @@
-import React from 'react';
-
-import { getConfig } from '@edx/frontend-platform';
-import { useIntl } from '@edx/frontend-platform/i18n';
-import { Hyperlink, Image } from '@openedx/paragon';
-import PropTypes from 'prop-types';
-
-import messages from './messages';
-
-const SmallLayout = ({ fullName }) => {
-  const { formatMessage } = useIntl();
-
-  return (
-    <div className="min-vw-100 bg-light-200">
-      <div className="col-md-12 small-screen-top-stripe" />
-      <Hyperlink destination={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 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, fullName })}
-          </h1>
-          <h2 className="h1">
-            {formatMessage(messages['complete.your.profile.1'])}
-            <div className="text-accent-a">
-              {formatMessage(messages['complete.your.profile.2'])}
-            </div>
-          </h2>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-SmallLayout.propTypes = {
-  fullName: PropTypes.string.isRequired,
-};
-
-export default SmallLayout;
--- a/src/base-container/components/welcome-page-layout/index.jsx
+++ b/src/base-container/components/welcome-page-layout/index.jsx
@@ -1,3 +0,0 @@
-export { default as AuthLargeLayout } from './LargeLayout';
-export { default as AuthMediumLayout } from './MediumLayout';
-export { default as AuthSmallLayout } from './SmallLayout';
--- a/src/base-container/index.jsx
+++ b/src/base-container/index.jsx
@@ -1,72 +0,0 @@
-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;
--- a/src/base-container/tests/BaseContainer.test.jsx
+++ b/src/base-container/tests/BaseContainer.test.jsx
@@ -1,46 +0,0 @@
-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();
-  });
-});
--- a/src/common-components/EmbeddedRegistrationRoute.jsx
+++ b/src/common-components/EmbeddedRegistrationRoute.jsx
@@ -1,28 +0,0 @@
-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;
--- a/src/common-components/EnterpriseSSO.jsx
+++ b/src/common-components/EnterpriseSSO.jsx
@@ -1,26 +1,21 @@
 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,
-  Icon,
-} from '@openedx/paragon';
-import { Login } from '@openedx/paragon/icons';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import PropTypes from 'prop-types';
+import { getConfig } from '@edx/frontend-platform';
+import { faSignInAlt } from '@fortawesome/free-solid-svg-icons';
+
+import {
+  Form, Button,
+} from '@edx/paragon';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

-import messages from './messages';
 import { LOGIN_PAGE, SUPPORTED_ICON_CLASSES } from '../data/constants';
+import messages from './messages';

-/**
- * This component renders the Single sign-on (SSO) button only for the tpa provider passed
- * */
 const EnterpriseSSO = (props) => {
-  const { formatMessage } = useIntl();
+  const { intl } = props;
  const tpaProvider = props.provider;
-  const hideRegistrationLink = getConfig().ALLOW_PUBLIC_ACCOUNT_CREATION === false
-    || getConfig().SHOW_REGISTRATION_LINKS === false;

  const handleSubmit = (e, url) => {
    e.preventDefault();
@@ -38,7 +33,7 @@ const EnterpriseSSO = (props) => {
        <div className="d-flex flex-column">
          <div className="mw-450">
            <Form className="m-0">
-              <p>{formatMessage(messages['enterprisetpa.title.heading'], { providerName: tpaProvider.name })}</p>
+              <p>{intl.formatMessage(messages['enterprisetpa.title.heading'], { providerName: tpaProvider.name })}</p>
              <Button
                id={tpaProvider.id}
                key={tpaProvider.id}
@@ -49,18 +44,16 @@ const EnterpriseSSO = (props) => {
              >
                {tpaProvider.iconImage ? (
                  <div aria-hidden="true">
-                    <img className="btn-tpa__image-icon" src={tpaProvider.iconImage} alt={`icon ${tpaProvider.name}`} />
+                    <img className="icon-image" src={tpaProvider.iconImage} alt={`icon ${tpaProvider.name}`} />
                    <span className="pl-2" aria-hidden="true">{ tpaProvider.name }</span>
                  </div>
                )
                  : (
                    <>
-                      <div className="btn-tpa__font-container" aria-hidden="true">
-                        {SUPPORTED_ICON_CLASSES.includes(tpaProvider.iconClass) ? (
-                          <FontAwesomeIcon icon={['fab', tpaProvider.iconClass]} />)
-                          : (
-                            <Icon className="h-75" src={Login} />
-                          )}
+                      <div className="font-container" aria-hidden="true">
+                        <FontAwesomeIcon
+                          icon={SUPPORTED_ICON_CLASSES.includes(tpaProvider.iconClass) ? ['fab', tpaProvider.iconClass] : faSignInAlt}
+                        />
                      </div>
                      <span className="pl-2" aria-hidden="true">{ tpaProvider.name }</span>
                    </>
@@ -69,15 +62,12 @@ const EnterpriseSSO = (props) => {
              <div className="mb-4" />
              <Button
                type="submit"
-                id="other-ways-to-sign-in"
                variant="outline-primary"
                state="Complete"
                className="w-100"
                onClick={(e) => handleClick(e)}
              >
-                {hideRegistrationLink
-                  ? formatMessage(messages['enterprisetpa.login.button.text.public.account.creation.disabled'])
-                  : formatMessage(messages['enterprisetpa.login.button.text'])}
+                {intl.formatMessage(messages['enterprisetpa.login.button.text'])}
              </Button>
            </Form>
          </div>
@@ -108,6 +98,7 @@ EnterpriseSSO.propTypes = {
    loginUrl: PropTypes.string,
    registerUrl: PropTypes.string,
  }),
+  intl: intlShape.isRequired,
 };

-export default EnterpriseSSO;
+export default injectIntl(EnterpriseSSO);
--- a/src/common-components/FormGroup.jsx
+++ b/src/common-components/FormGroup.jsx
@@ -2,7 +2,7 @@ import React, { useState } from 'react';

 import {
  Form, TransitionReplace,
-} from '@openedx/paragon';
+} from '@edx/paragon';
 import PropTypes from 'prop-types';

 const FormGroup = (props) => {
@@ -27,9 +27,8 @@ const FormGroup = (props) => {
        readOnly={props.readOnly}
        type={props.type}
        aria-invalid={props.errorMessage !== ''}
-        className="form-group__form-field"
+        className="form-field"
        autoComplete={props.autoComplete}
-        spellCheck={props.spellCheck}
        name={props.name}
        value={props.value}
        onFocus={handleFocus}
@@ -37,6 +36,7 @@ const FormGroup = (props) => {
        onClick={handleClick}
        onChange={props.handleChange}
        controlClassName={props.borderClass}
+
        trailingElement={props.trailingElement}
        floatingLabel={props.floatingLabel}
      >
@@ -64,43 +64,41 @@ const FormGroup = (props) => {

 FormGroup.defaultProps = {
  as: 'input',
-  autoComplete: null,
-  borderClass: '',
-  children: null,
-  className: '',
  errorMessage: '',
+  borderClass: '',
+  autoComplete: null,
+  readOnly: false,
  handleBlur: null,
  handleChange: () => {},
-  handleClick: null,
  handleFocus: null,
+  handleClick: null,
  helpText: [],
  options: null,
-  readOnly: false,
-  spellCheck: null,
  trailingElement: null,
  type: 'text',
+  children: null,
+  className: '',
 };

 FormGroup.propTypes = {
  as: PropTypes.string,
-  autoComplete: PropTypes.string,
-  borderClass: PropTypes.string,
-  children: PropTypes.element,
-  className: PropTypes.string,
  errorMessage: PropTypes.string,
+  borderClass: PropTypes.string,
+  autoComplete: PropTypes.string,
+  readOnly: PropTypes.bool,
  floatingLabel: PropTypes.string.isRequired,
  handleBlur: PropTypes.func,
  handleChange: PropTypes.func,
-  handleClick: PropTypes.func,
  handleFocus: PropTypes.func,
+  handleClick: PropTypes.func,
  helpText: PropTypes.arrayOf(PropTypes.string),
  name: PropTypes.string.isRequired,
  options: PropTypes.func,
-  readOnly: PropTypes.bool,
-  spellCheck: PropTypes.string,
  trailingElement: PropTypes.element,
  type: PropTypes.string,
  value: PropTypes.string.isRequired,
+  children: PropTypes.element,
+  className: PropTypes.string,
 };

 export default FormGroup;
--- a/src/common-components/InstitutionLogistration.jsx
+++ b/src/common-components/InstitutionLogistration.jsx
@@ -1,16 +1,11 @@
 import React from 'react';
-
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { getConfig } from '@edx/frontend-platform';
-import { useIntl } from '@edx/frontend-platform/i18n';
-import { Button, Hyperlink, Icon } from '@openedx/paragon';
-import { Institution } from '@openedx/paragon/icons';
 import PropTypes from 'prop-types';
-
+import { Button, Hyperlink, Icon } from '@edx/paragon';
+import { Institution } from '@edx/paragon/icons';
 import messages from './messages';

-/**
- * This component renders the Institution login button
- * */
 export const RenderInstitutionButton = props => {
  const { onSubmitHandler, buttonTitle } = props;

@@ -27,13 +22,10 @@ export const RenderInstitutionButton = props => {
  );
 };

-/**
- * This component renders the page list of available institutions for login
- * */
 const InstitutionLogistration = props => {
  const lmsBaseUrl = getConfig().LMS_BASE_URL;
-  const { formatMessage } = useIntl();
  const {
+    intl,
    secondaryProviders,
    headingTitle,
  } = props;
@@ -42,11 +34,11 @@ 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 institutions__heading">
+          <h4 className="mb-2 font-weight-bold institute-heading">
            {headingTitle}
          </h4>
          <p className="mb-2">
-            {formatMessage(messages['institution.login.page.sub.heading'])}
+            {intl.formatMessage(messages['institution.login.page.sub.heading'])}
          </p>
        </div>
      </div>
@@ -57,7 +49,7 @@ const InstitutionLogistration = props => {
              <tr key={provider} className="pgn__data-table-row">
                <td>
                  <Hyperlink
-                    className="btn nav-item p-0 mb-1 institutions--provider-link"
+                    className="btn nav-item p-0 mb-1 secondary-provider-link"
                    destination={lmsBaseUrl + provider.loginUrl}
                  >
                    {provider.name}
@@ -95,6 +87,7 @@ RenderInstitutionButton.defaultProps = {

 InstitutionLogistration.propTypes = {
  ...LogistrationProps,
+  intl: intlShape.isRequired,
  headingTitle: PropTypes.string,
 };
 InstitutionLogistration.defaultProps = {
@@ -102,4 +95,4 @@ InstitutionLogistration.defaultProps = {
  headingTitle: '',
 };

-export default InstitutionLogistration;
+export default injectIntl(InstitutionLogistration);
--- a/src/common-components/Logistration.jsx
+++ b/src/common-components/Logistration.jsx
@@ -0,0 +1,104 @@
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import { Redirect } from 'react-router-dom';
+
+import { sendPageEvent, sendTrackEvent } from '@edx/frontend-platform/analytics';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { getConfig } from '@edx/frontend-platform';
+import { getAuthService } from '@edx/frontend-platform/auth';
+import {
+  Tabs,
+  Tab,
+  Icon,
+} from '@edx/paragon';
+import { ChevronLeft } from '@edx/paragon/icons';
+
+import messages from './messages';
+import { LOGIN_PAGE, REGISTER_PAGE } from '../data/constants';
+import { updatePathWithQueryParams, getTpaHint } from '../data/utils';
+import { LoginPage } from '../login';
+import { RegistrationPage } from '../register';
+import BaseComponent from '../base-component';
+
+const Logistration = (props) => {
+  const { intl, selectedPage } = props;
+  const tpa = getTpaHint();
+  const [institutionLogin, setInstitutionLogin] = useState(false);
+  const [key, setKey] = useState('');
+
+  useEffect(() => {
+    const authService = getAuthService();
+    if (authService) {
+      authService.getCsrfTokenService().getCsrfToken(getConfig().LMS_BASE_URL);
+    }
+  });
+
+  const handleInstitutionLogin = (e) => {
+    sendTrackEvent('edx.bi.institution_login_form.toggled', { category: 'user-engagement' });
+    if (typeof e === 'string') {
+      sendPageEvent('login_and_registration', e === '/login' ? 'login' : 'register');
+    } else {
+      sendPageEvent('login_and_registration', e.target.dataset.eventName);
+    }
+
+    setInstitutionLogin(!institutionLogin);
+  };
+
+  const handleOnSelect = (tabKey) => {
+    sendTrackEvent(`edx.bi.${tabKey.replace('/', '')}_form.toggled`, { category: 'user-engagement' });
+    setKey(tabKey);
+  };
+
+  const tabTitle = (
+    <div className="d-flex">
+      <Icon src={ChevronLeft} className="left-icon" />
+      <span className="ml-2">
+        {selectedPage === LOGIN_PAGE
+          ? intl.formatMessage(messages['logistration.sign.in'])
+          : intl.formatMessage(messages['logistration.register'])}
+      </span>
+    </div>
+  );
+
+  return (
+    <BaseComponent isRegistrationPage={selectedPage === REGISTER_PAGE}>
+      <div>
+        {institutionLogin
+          ? (
+            <Tabs defaultActiveKey="" id="controlled-tab" onSelect={handleInstitutionLogin}>
+              <Tab title={tabTitle} eventKey={selectedPage === LOGIN_PAGE ? LOGIN_PAGE : REGISTER_PAGE} />
+            </Tabs>
+          )
+          : (
+            <>
+              {!tpa && (
+                <Tabs defaultActiveKey={selectedPage} id="controlled-tab" onSelect={handleOnSelect}>
+                  <Tab title={intl.formatMessage(messages['logistration.register'])} eventKey={REGISTER_PAGE} />
+                  <Tab title={intl.formatMessage(messages['logistration.sign.in'])} eventKey={LOGIN_PAGE} />
+                </Tabs>
+              )}
+            </>
+          )}
+        { key && (
+          <Redirect to={updatePathWithQueryParams(key)} />
+        )}
+        <div id="main-content" className="main-content">
+          {selectedPage === LOGIN_PAGE
+            ? <LoginPage institutionLogin={institutionLogin} handleInstitutionLogin={handleInstitutionLogin} />
+            : <RegistrationPage institutionLogin={institutionLogin} handleInstitutionLogin={handleInstitutionLogin} />}
+        </div>
+      </div>
+    </BaseComponent>
+  );
+};
+
+Logistration.propTypes = {
+  intl: intlShape.isRequired,
+  selectedPage: PropTypes.string,
+};
+
+Logistration.defaultProps = {
+  selectedPage: REGISTER_PAGE,
+};
+
+export default injectIntl(Logistration);
--- a/src/common-components/NotFoundPage.jsx
+++ b/src/common-components/NotFoundPage.jsx
@@ -1,17 +1,16 @@
 import React from 'react';
-
 import { FormattedMessage } from '@edx/frontend-platform/i18n';

-const NotFoundPage = () => (
-  <div className="container-fluid d-flex py-5 justify-content-center align-items-start text-center">
-    <p className="my-0 py-5 text-muted mw-32em">
-      <FormattedMessage
-        id="error.notfound.message"
-        defaultMessage="The page you're looking for is unavailable or there's an error in the URL. Please check the URL and try again."
-        description="error message when a page does not exist"
-      />
-    </p>
-  </div>
-);
-
-export default NotFoundPage;
+export default function NotFoundPage() {
+  return (
+    <div className="container-fluid d-flex py-5 justify-content-center align-items-start text-center">
+      <p className="my-0 py-5 text-muted mw-32em">
+        <FormattedMessage
+          id="error.notfound.message"
+          defaultMessage="The page you're looking for is unavailable or there's an error in the URL. Please check the URL and try again."
+          description="error message when a page does not exist"
+        />
+      </p>
+    </div>
+  );
+}
--- a/src/common-components/PasswordField.jsx
+++ b/src/common-components/PasswordField.jsx
@@ -1,115 +1,53 @@
 import React, { useState } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import PropTypes from 'prop-types';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';

-import { useIntl } from '@edx/frontend-platform/i18n';
 import {
-  Form, Icon, IconButton, OverlayTrigger, Tooltip, useToggle,
-} from '@openedx/paragon';
+  Form, IconButton, useToggle, Tooltip, OverlayTrigger, Icon,
+} from '@edx/paragon';
 import {
  Check, Remove, Visibility, VisibilityOff,
-} from '@openedx/paragon/icons';
-import PropTypes from 'prop-types';
+} from '@edx/paragon/icons';

 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 { formatMessage } = props.intl;
  const [isPasswordHidden, setHiddenTrue, setHiddenFalse] = useToggle(true);
  const [showTooltip, setShowTooltip] = useState(false);

  const 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,
-        },
-      });
-    }
-
+    if (props.handleBlur) { props.handleBlur(e); }
    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="passwordIcon"
-      src={VisibilityOff}
-      iconAs={Icon}
-      onClick={setHiddenTrue}
-      size="sm"
-      variant="secondary"
-      alt={formatMessage(messages['hide.password'])}
-    />
+    <IconButton onFocus={handleFocus} onBlur={handleBlur} name="passwordValidation" src={VisibilityOff} iconAs={Icon} onClick={setHiddenTrue} size="sm" variant="secondary" alt={formatMessage(messages['hide.password'])} />
  );

  const ShowButton = (
-    <IconButton
-      onFocus={handleFocus}
-      onBlur={handleBlur}
-      name="passwordIcon"
-      src={Visibility}
-      iconAs={Icon}
-      onClick={setHiddenFalse}
-      size="sm"
-      variant="secondary"
-      alt={formatMessage(messages['show.password'])}
-    />
+    <IconButton onFocus={handleFocus} onBlur={handleBlur} name="passwordValidation" 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}`}>
-      <span id="letter-check" className="d-flex align-items-center">
+      <span id="letter-check" className="d-flex position-relative align-content-start">
        {LETTER_REGEX.test(props.value) ? <Icon className="text-success mr-1" src={Check} /> : <Icon className="mr-1 text-light-700" src={Remove} />}
        {formatMessage(messages['one.letter'])}
      </span>
-      <span id="number-check" className="d-flex align-items-center">
+      <span id="number-check" className="d-flex position-relative align-content-start">
        {NUMBER_REGEX.test(props.value) ? <Icon className="text-success mr-1" src={Check} /> : <Icon className="mr-1 text-light-700" src={Remove} />}
        {formatMessage(messages['one.number'])}
      </span>
-      <span id="characters-check" className="d-flex align-items-center">
+      <span id="characters-check" className="d-flex position-relative align-content-start">
        {props.value.length >= 8 ? <Icon className="text-success mr-1" src={Check} /> : <Icon className="mr-1 text-light-700" src={Remove} />}
        {formatMessage(messages['eight.characters'])}
      </span>
@@ -121,11 +59,10 @@ const PasswordField = (props) => {
      <OverlayTrigger key="tooltip" placement={placement} overlay={tooltip} show={showTooltip}>
        <Form.Control
          as="input"
-          className="form-group__form-field"
+          className="form-field"
          type={isPasswordHidden ? 'password' : 'text'}
          name={props.name}
          value={props.value}
-          autoComplete={props.autoComplete}
          aria-invalid={props.errorMessage !== ''}
          onFocus={handleFocus}
          onBlur={handleBlur}
@@ -138,7 +75,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}
-          {props.showScreenReaderText && <span className="sr-only">{formatMessage(messages['password.sr.only.helping.text'])}</span>}
+          <span className="sr-only">{formatMessage(messages['password.sr.only.helping.text'])}</span>
        </Form.Control.Feedback>
      )}
    </Form.Group>
@@ -151,10 +88,7 @@ PasswordField.defaultProps = {
  handleBlur: null,
  handleFocus: null,
  handleChange: () => {},
-  handleErrorChange: null,
  showRequirements: true,
-  showScreenReaderText: true,
-  autoComplete: null,
 };

 PasswordField.propTypes = {
@@ -164,12 +98,10 @@ PasswordField.propTypes = {
  handleBlur: PropTypes.func,
  handleFocus: PropTypes.func,
  handleChange: PropTypes.func,
-  handleErrorChange: PropTypes.func,
+  intl: intlShape.isRequired,
  name: PropTypes.string.isRequired,
  showRequirements: PropTypes.bool,
  value: PropTypes.string.isRequired,
-  autoComplete: PropTypes.string,
-  showScreenReaderText: PropTypes.bool,
 };

-export default PasswordField;
+export default injectIntl(PasswordField);
--- a/src/common-components/RedirectLogistration.jsx
+++ b/src/common-components/RedirectLogistration.jsx
@@ -1,25 +1,16 @@
-import { getConfig } from '@edx/frontend-platform';
-import PropTypes from 'prop-types';
-import { Navigate } from 'react-router-dom';
+import React from 'react';

-import {
-  AUTHN_PROGRESSIVE_PROFILING, RECOMMENDATIONS, REDIRECT,
-} from '../data/constants';
+import PropTypes from 'prop-types';
+import { Redirect } from 'react-router-dom';
+
+import { getConfig } from '@edx/frontend-platform';
+
+import { WELCOME_PAGE } from '../data/constants';
 import { setCookie } from '../data/utils';

-const RedirectLogistration = (props) => {
+function RedirectLogistration(props) {
  const {
-    authenticatedUser,
-    finishAuthUrl,
-    redirectUrl,
-    redirectToProgressiveProfilingPage,
-    success,
-    optionalFields,
-    redirectToRecommendationsPage,
-    educationLevel,
-    userId,
-    registrationEmbedded,
-    host,
+    finishAuthUrl, redirectUrl, redirectToWelcomePage, success,
  } = props;
  let finalRedirectUrl = '';

@@ -34,80 +25,31 @@ const RedirectLogistration = (props) => {
      finalRedirectUrl = redirectUrl;
    }

-    // Redirect to Progressive Profiling after successful registration
-    if (redirectToProgressiveProfilingPage) {
-      // TODO: Do we still need this cookie?
+    if (redirectToWelcomePage) {
      setCookie('van-504-returning-user', true);
-
-      if (registrationEmbedded) {
-        window.parent.postMessage({
-          action: REDIRECT,
-          redirectUrl: getConfig().POST_REGISTRATION_REDIRECT_URL,
-        }, host);
-        return null;
-      }
+      // use this component to redirect WelcomePage after successful registration
+      // return <Redirect to={WELCOME_PAGE} />;
      const registrationResult = { redirectUrl: finalRedirectUrl, success };
-      return (
-        <Navigate
-          to={AUTHN_PROGRESSIVE_PROFILING}
-          state={{
-            registrationResult,
-            optionalFields,
-            authenticatedUser,
-          }}
-          replace
-        />
-      );
-    }
-
-    // Redirect to Recommendation page
-    if (redirectToRecommendationsPage) {
-      const registrationResult = { redirectUrl: finalRedirectUrl, success };
-      return (
-        <Navigate
-          to={RECOMMENDATIONS}
-          state={{
-            registrationResult,
-            educationLevel,
-            userId,
-          }}
-          replace
-        />
-      );
+      return <Redirect to={{ pathname: WELCOME_PAGE, state: { registrationResult } }} />;
    }

    window.location.href = finalRedirectUrl;
  }
-
-  return null;
-};
+  return <></>;
+}

 RedirectLogistration.defaultProps = {
-  authenticatedUser: {},
-  educationLevel: null,
  finishAuthUrl: null,
  success: false,
  redirectUrl: '',
-  redirectToProgressiveProfilingPage: false,
-  optionalFields: {},
-  redirectToRecommendationsPage: false,
-  userId: null,
-  registrationEmbedded: false,
-  host: '',
+  redirectToWelcomePage: false,
 };

 RedirectLogistration.propTypes = {
-  authenticatedUser: PropTypes.shape({}),
-  educationLevel: PropTypes.string,
  finishAuthUrl: PropTypes.string,
  success: PropTypes.bool,
  redirectUrl: PropTypes.string,
-  redirectToProgressiveProfilingPage: PropTypes.bool,
-  optionalFields: PropTypes.shape({}),
-  redirectToRecommendationsPage: PropTypes.bool,
-  userId: PropTypes.number,
-  registrationEmbedded: PropTypes.bool,
-  host: PropTypes.string,
+  redirectToWelcomePage: PropTypes.bool,
 };

 export default RedirectLogistration;
--- a/src/common-components/SocialAuthProviders.jsx
+++ b/src/common-components/SocialAuthProviders.jsx
@@ -1,18 +1,16 @@
 import React from 'react';
+import PropTypes from 'prop-types';

 import { getConfig } from '@edx/frontend-platform';
-import { useIntl } from '@edx/frontend-platform/i18n';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Icon } from '@openedx/paragon';
-import { Login } from '@openedx/paragon/icons';
-import PropTypes from 'prop-types';
+import { faSignInAlt } from '@fortawesome/free-solid-svg-icons';

 import messages from './messages';
 import { LOGIN_PAGE, SUPPORTED_ICON_CLASSES } from '../data/constants';

-const SocialAuthProviders = (props) => {
-  const { formatMessage } = useIntl();
-  const { referrer, socialAuthProviders } = props;
+function SocialAuthProviders(props) {
+  const { intl, referrer, socialAuthProviders } = props;

  function handleSubmit(e) {
    e.preventDefault();
@@ -32,30 +30,29 @@ const SocialAuthProviders = (props) => {
    >
      {provider.iconImage ? (
        <div aria-hidden="true">
-          <img className="btn-tpa__image-icon" src={provider.iconImage} alt={`icon ${provider.name}`} />
+          <img className="icon-image" src={provider.iconImage} alt={`icon ${provider.name}`} />
        </div>
      )
        : (
-          <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>
+          <>
+            <div className="font-container" aria-hidden="true">
+              <FontAwesomeIcon
+                icon={SUPPORTED_ICON_CLASSES.includes(provider.iconClass) ? ['fab', provider.iconClass] : faSignInAlt}
+              />
+            </div>
+          </>
        )}
      <span id="provider-name" className="notranslate mr-auto pl-2" aria-hidden="true">{provider.name}</span>
      <span className="sr-only">
        {referrer === LOGIN_PAGE
-          ? formatMessage(messages['sso.sign.in.with'], { providerName: provider.name })
-          : formatMessage(messages['sso.create.account.using'], { providerName: provider.name })}
+          ? intl.formatMessage(messages['sso.sign.in.with'], { providerName: provider.name })
+          : intl.formatMessage(messages['sso.create.account.using'], { providerName: provider.name })}
      </span>
    </button>
  ));

-  // eslint-disable-next-line react/jsx-no-useless-fragment
  return <>{socialAuth}</>;
-};
+}

 SocialAuthProviders.defaultProps = {
  referrer: LOGIN_PAGE,
@@ -63,6 +60,7 @@ SocialAuthProviders.defaultProps = {
 };

 SocialAuthProviders.propTypes = {
+  intl: intlShape.isRequired,
  referrer: PropTypes.string,
  socialAuthProviders: PropTypes.arrayOf(PropTypes.shape({
    id: PropTypes.string,
@@ -71,8 +69,7 @@ SocialAuthProviders.propTypes = {
    iconImage: PropTypes.string,
    loginUrl: PropTypes.string,
    registerUrl: PropTypes.string,
-    skipRegistrationForm: PropTypes.bool,
  })),
 };

-export default SocialAuthProviders;
+export default injectIntl(SocialAuthProviders);
--- a/src/common-components/SwitchContent.jsx
+++ b/src/common-components/SwitchContent.jsx
@@ -0,0 +1,61 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { TransitionReplace } from '@edx/paragon';
+
+const onChildExit = (htmlNode) => {
+  // If the leaving child has focus, take control and redirect it
+  if (htmlNode.contains(document.activeElement)) {
+    // Get the newly entering sibling.
+    // It's the previousSibling, but not for any explicit reason. So checking for both.
+    const enteringChild = htmlNode.previousSibling || htmlNode.nextSibling;
+
+    // There's no replacement, do nothing.
+    if (!enteringChild) return; // eslint-disable-line curly
+
+    // Get all the focusable elements in the entering child and focus the first one
+    const focusableElements = enteringChild.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+    if (focusableElements.length) {
+      focusableElements[0].focus();
+    }
+  }
+};
+
+function SwitchContent({ expression, cases, className }) {
+  const getContent = (caseKey) => {
+    if (cases[caseKey]) {
+      if (typeof cases[caseKey] === 'string') {
+        return getContent(cases[caseKey]);
+      }
+      return React.cloneElement(cases[caseKey], { key: caseKey });
+    } else if (cases.default) { // eslint-disable-line no-else-return
+      if (typeof cases.default === 'string') {
+        return getContent(cases.default);
+      }
+      React.cloneElement(cases.default, { key: 'default' });
+    }
+
+    return null;
+  };
+
+  return (
+    <TransitionReplace
+      className={className}
+      onChildExit={onChildExit}
+    >
+      {getContent(expression)}
+    </TransitionReplace>
+  );
+}
+
+SwitchContent.propTypes = {
+  expression: PropTypes.string,
+  cases: PropTypes.objectOf(PropTypes.node).isRequired,
+  className: PropTypes.string,
+};
+
+SwitchContent.defaultProps = {
+  expression: null,
+  className: null,
+};
+
+export default SwitchContent;
--- a/src/common-components/ThirdPartyAuth.jsx
+++ b/src/common-components/ThirdPartyAuth.jsx
@@ -1,125 +0,0 @@
-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 './index';
-
-/**
- * This component renders the Single sign-on (SSO) buttons for the providers passed.
- * */
-const ThirdPartyAuth = (props) => {
-  const { formatMessage } = useIntl();
-  const {
-    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;
-
-  return (
-    <>
-      {((isEnterpriseLoginDisabled && isInstitutionAuthActive) || isSocialAuthActive) && (
-        <div className="mt-4 mb-3 h4">
-          {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 ? (
-        <div className="mt-4">
-          <Skeleton className="tpa-skeleton" height={36} count={2} />
-        </div>
-      ) : (
-        <>
-          {(isEnterpriseLoginDisabled && isInstitutionAuthActive) && (
-            <RenderInstitutionButton
-              onSubmitHandler={handleInstitutionLogin}
-              buttonTitle={formatMessage(messages['institution.login.button'])}
-            />
-          )}
-          {isSocialAuthActive && (
-            <div className="row m-0">
-              <SocialAuthProviders
-                socialAuthProviders={providers}
-                referrer={isLoginPage ? LOGIN_PAGE : REGISTER_PAGE}
-              />
-            </div>
-          )}
-        </>
-      )}
-    </>
-  );
-};
-
-ThirdPartyAuth.defaultProps = {
-  currentProvider: null,
-  providers: [],
-  secondaryProviders: [],
-  thirdPartyAuthApiStatus: PENDING_STATE,
-  isLoginPage: false,
-};
-
-ThirdPartyAuth.propTypes = {
-  currentProvider: PropTypes.string,
-  handleInstitutionLogin: PropTypes.func.isRequired,
-  providers: PropTypes.arrayOf(
-    PropTypes.shape({
-      id: PropTypes.string,
-      name: PropTypes.string,
-      iconClass: PropTypes.string,
-      iconImage: PropTypes.string,
-      loginUrl: PropTypes.string,
-      registerUrl: PropTypes.string,
-    }),
-  ),
-  secondaryProviders: PropTypes.arrayOf(
-    PropTypes.shape({
-      id: PropTypes.string,
-      name: PropTypes.string,
-      iconClass: PropTypes.string,
-      iconImage: PropTypes.string,
-      loginUrl: PropTypes.string,
-      registerUrl: PropTypes.string,
-    }),
-  ),
-  thirdPartyAuthApiStatus: PropTypes.string,
-  isLoginPage: PropTypes.bool,
-};
-
-export default ThirdPartyAuth;
--- a/src/common-components/ThirdPartyAuthAlert.jsx
+++ b/src/common-components/ThirdPartyAuthAlert.jsx
@@ -1,52 +1,42 @@
 import React from 'react';
+import PropTypes from 'prop-types';

 import { getConfig } from '@edx/frontend-platform';
-import { useIntl } from '@edx/frontend-platform/i18n';
-import { Alert } from '@openedx/paragon';
-import PropTypes from 'prop-types';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { Alert } from '@edx/paragon';

 import messages from './messages';
 import { LOGIN_PAGE, REGISTER_PAGE } from '../data/constants';

 const ThirdPartyAuthAlert = (props) => {
-  const { formatMessage } = useIntl();
-  const { currentProvider, referrer } = props;
+  const { currentProvider, intl, referrer } = props;
  const platformName = getConfig().SITE_NAME;
  let message;

  if (referrer === LOGIN_PAGE) {
-    message = formatMessage(messages['login.third.party.auth.account.not.linked'], { currentProvider, platformName });
+    message = intl.formatMessage(messages['login.third.party.auth.account.not.linked'], { currentProvider, platformName });
  } else {
-    message = formatMessage(messages['register.third.party.auth.account.not.linked'], { currentProvider, platformName });
-  }
-
-  if (!currentProvider) {
-    return null;
+    message = intl.formatMessage(messages['register.third.party.auth.account.not.linked'], { currentProvider, platformName });
  }

  return (
-    <>
-      <Alert id="tpa-alert" className={referrer === REGISTER_PAGE ? 'alert-success mt-n2 mb-5' : 'alert-warning mt-n2 mb-5'}>
-        {referrer === REGISTER_PAGE ? (
-          <Alert.Heading>{formatMessage(messages['tpa.alert.heading'])}</Alert.Heading>
-        ) : null}
-        <p>{ message }</p>
-      </Alert>
+    <Alert id="tpa-alert" className={referrer === REGISTER_PAGE ? 'alert-success mt-n2' : 'alert-warning mt-n2'}>
      {referrer === REGISTER_PAGE ? (
-        <h4 className="mt-4 mb-4">{formatMessage(messages['registration.using.tpa.form.heading'])}</h4>
+        <Alert.Heading>{intl.formatMessage(messages['tpa.alert.heading'])}</Alert.Heading>
      ) : null}
-    </>
+      <p>{ message }</p>
+    </Alert>
  );
 };

 ThirdPartyAuthAlert.defaultProps = {
-  currentProvider: '',
  referrer: LOGIN_PAGE,
 };

 ThirdPartyAuthAlert.propTypes = {
-  currentProvider: PropTypes.string,
+  currentProvider: PropTypes.string.isRequired,
+  intl: intlShape.isRequired,
  referrer: PropTypes.string,
 };

-export default ThirdPartyAuthAlert;
+export default injectIntl(ThirdPartyAuthAlert);
--- a/src/common-components/UnAuthOnlyRoute.jsx
+++ b/src/common-components/UnAuthOnlyRoute.jsx
@@ -1,18 +1,14 @@
-import { useEffect, useState } from 'react';
-
+import React, { useEffect, useState } from 'react';
+import { Route } from 'react-router-dom';
 import { getConfig } from '@edx/frontend-platform';
 import { fetchAuthenticatedUser, getAuthenticatedUser } from '@edx/frontend-platform/auth';
-import PropTypes from 'prop-types';
-
-import {
-  DEFAULT_REDIRECT_URL,
-} from '../data/constants';
+import { DEFAULT_REDIRECT_URL } from '../data/constants';

 /**
 * This wrapper redirects the requester to our default redirect url if they are
 * already authenticated.
 */
-const UnAuthOnlyRoute = ({ children }) => {
+const UnAuthOnlyRoute = (props) => {
  const [authUser, setAuthUser] = useState({});
  const [isReady, setIsReady] = useState(false);

@@ -29,14 +25,10 @@ const UnAuthOnlyRoute = ({ children }) => {
      return null;
    }

-    return children;
+    return <Route {...props} />;
  }

-  return null;
-};
-
-UnAuthOnlyRoute.propTypes = {
-  children: PropTypes.node.isRequired,
+  return <></>;
 };

 export default UnAuthOnlyRoute;
--- a/src/common-components/Zendesk.jsx
+++ b/src/common-components/Zendesk.jsx
@@ -1,61 +0,0 @@
-import React from 'react';
-
-import { getConfig } from '@edx/frontend-platform';
-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();
-  const setting = {
-    cookies: true,
-    webWidget: {
-      contactOptions: {
-        enabled: false,
-      },
-      chat: {
-        suppress: false,
-        departments: {
-          enabled: ['account settings', 'billing and payments', 'certificates', 'deadlines', 'errors and technical issues', 'other', 'proctoring'],
-        },
-      },
-      contactForm: {
-        ticketForms: [
-          {
-            id: 360003368814,
-            subject: false,
-            fields: [{ id: 'description', prefill: { '*': '' } }],
-          },
-        ],
-        selectTicketForm: {
-          '*': formatMessage(messages.selectTicketForm),
-        },
-        attachments: true,
-      },
-      helpCenter: {
-        originalArticleButton: true,
-      },
-      answerBot: {
-        suppress: false,
-        contactOnlyAfterQuery: true,
-        title: { '*': formatMessage(messages.supportTitle) },
-        avatar: {
-          url: getConfig().ZENDESK_LOGO_URL,
-          name: { '*': formatMessage(messages.supportTitle) },
-        },
-      },
-    },
-  };
-
-  if (window.location.pathname === REGISTER_EMBEDDED_PAGE) {
-    return null;
-  }
-
-  return (
-    <Zendesk defer zendeskKey={getConfig().ZENDESK_KEY} {...setting} />
-  );
-};
-
-export default ZendeskHelp;
--- a/src/common-components/data/actions.js
+++ b/src/common-components/data/actions.js
@@ -1,7 +1,6 @@
 import { AsyncActionType } from '../../data/utils';

 export const THIRD_PARTY_AUTH_CONTEXT = new AsyncActionType('THIRD_PARTY_AUTH', 'GET_THIRD_PARTY_AUTH_CONTEXT');
-export const THIRD_PARTY_AUTH_CONTEXT_CLEAR_ERROR_MSG = 'THIRD_PARTY_AUTH_CONTEXT_CLEAR_ERROR_MSG';

 // Third party auth context
 export const getThirdPartyAuthContext = (urlParams) => ({
@@ -13,15 +12,11 @@ export const getThirdPartyAuthContextBegin = () => ({
  type: THIRD_PARTY_AUTH_CONTEXT.BEGIN,
 });

-export const getThirdPartyAuthContextSuccess = (fieldDescriptions, optionalFields, thirdPartyAuthContext) => ({
+export const getThirdPartyAuthContextSuccess = (thirdPartyAuthContext) => ({
  type: THIRD_PARTY_AUTH_CONTEXT.SUCCESS,
-  payload: { fieldDescriptions, optionalFields, thirdPartyAuthContext },
+  payload: { thirdPartyAuthContext },
 });

 export const getThirdPartyAuthContextFailure = () => ({
  type: THIRD_PARTY_AUTH_CONTEXT.FAILURE,
 });
-
-export const clearThirdPartyAuthContextErrorMessage = () => ({
-  type: THIRD_PARTY_AUTH_CONTEXT_CLEAR_ERROR_MSG,
-});
--- a/src/common-components/data/reducers.js
+++ b/src/common-components/data/reducers.js
@@ -1,59 +1,28 @@
-import { THIRD_PARTY_AUTH_CONTEXT, THIRD_PARTY_AUTH_CONTEXT_CLEAR_ERROR_MSG } from './actions';
-import { COMPLETE_STATE, FAILURE_STATE, PENDING_STATE } from '../../data/constants';
+import { THIRD_PARTY_AUTH_CONTEXT } from './actions';
+
+import { PENDING_STATE, COMPLETE_STATE } from '../../data/constants';

 export const defaultState = {
-  fieldDescriptions: {},
-  optionalFields: {
-    fields: {},
-    extended_profile: [],
-  },
  thirdPartyAuthApiStatus: null,
-  thirdPartyAuthContext: {
-    autoSubmitRegForm: false,
-    currentProvider: null,
-    finishAuthUrl: null,
-    countryCode: null,
-    providers: [],
-    secondaryProviders: [],
-    pipelineUserDetails: null,
-    errorMessage: null,
-    welcomePageRedirectUrl: null,
-  },
 };

-const reducer = (state = defaultState, action = {}) => {
+const reducer = (state = defaultState, action) => {
  switch (action.type) {
    case THIRD_PARTY_AUTH_CONTEXT.BEGIN:
      return {
        ...state,
        thirdPartyAuthApiStatus: PENDING_STATE,
      };
-    case THIRD_PARTY_AUTH_CONTEXT.SUCCESS: {
+    case THIRD_PARTY_AUTH_CONTEXT.SUCCESS:
      return {
        ...state,
-        fieldDescriptions: action.payload.fieldDescriptions?.fields,
-        optionalFields: action.payload.optionalFields,
        thirdPartyAuthContext: action.payload.thirdPartyAuthContext,
        thirdPartyAuthApiStatus: COMPLETE_STATE,
      };
-    }
    case THIRD_PARTY_AUTH_CONTEXT.FAILURE:
      return {
        ...state,
-        thirdPartyAuthApiStatus: FAILURE_STATE,
-        thirdPartyAuthContext: {
-          ...state.thirdPartyAuthContext,
-          errorMessage: null,
-        },
-      };
-    case THIRD_PARTY_AUTH_CONTEXT_CLEAR_ERROR_MSG:
-      return {
-        ...state,
-        thirdPartyAuthApiStatus: PENDING_STATE,
-        thirdPartyAuthContext: {
-          ...state.thirdPartyAuthContext,
-          errorMessage: null,
-        },
+        thirdPartyAuthApiStatus: COMPLETE_STATE,
      };
    default:
      return state;
--- a/src/common-components/data/sagas.js
+++ b/src/common-components/data/sagas.js
@@ -1,26 +1,28 @@
-import { logError } from '@edx/frontend-platform/logging';
 import { call, put, takeEvery } from 'redux-saga/effects';

+import { logError } from '@edx/frontend-platform/logging';
+
+// Actions
 import {
-  getThirdPartyAuthContextBegin,
-  getThirdPartyAuthContextFailure,
-  getThirdPartyAuthContextSuccess,
  THIRD_PARTY_AUTH_CONTEXT,
+  getThirdPartyAuthContextBegin,
+  getThirdPartyAuthContextSuccess,
+  getThirdPartyAuthContextFailure,
 } from './actions';
+
+// Services
 import {
  getThirdPartyAuthContext,
 } from './service';
-import { setCountryFromThirdPartyAuthContext } from '../../register/data/actions';

 export function* fetchThirdPartyAuthContext(action) {
  try {
    yield put(getThirdPartyAuthContextBegin());
-    const {
-      fieldDescriptions, optionalFields, thirdPartyAuthContext,
-    } = yield call(getThirdPartyAuthContext, action.payload.urlParams);
+    const { thirdPartyAuthContext } = yield call(getThirdPartyAuthContext, action.payload.urlParams);

-    yield put(setCountryFromThirdPartyAuthContext(thirdPartyAuthContext.countryCode));
-    yield put(getThirdPartyAuthContextSuccess(fieldDescriptions, optionalFields, thirdPartyAuthContext));
+    yield put(getThirdPartyAuthContextSuccess(
+      thirdPartyAuthContext,
+    ));
  } catch (e) {
    yield put(getThirdPartyAuthContextFailure());
    logError(e);
--- a/src/common-components/data/selectors.js
+++ b/src/common-components/data/selectors.js
@@ -8,21 +8,3 @@ export const thirdPartyAuthContextSelector = createSelector(
  commonComponentsSelector,
  commonComponents => commonComponents.thirdPartyAuthContext,
 );
-
-export const fieldDescriptionSelector = createSelector(
-  commonComponentsSelector,
-  commonComponents => commonComponents.fieldDescriptions,
-);
-
-export const optionalFieldsSelector = createSelector(
-  commonComponentsSelector,
-  commonComponents => commonComponents.optionalFields,
-);
-
-export const tpaProvidersSelector = createSelector(
-  commonComponentsSelector,
-  commonComponents => ({
-    providers: commonComponents.thirdPartyAuthContext.providers,
-    secondaryProviders: commonComponents.thirdPartyAuthContext.secondaryProviders,
-  }),
-);
--- a/src/common-components/data/service.js
+++ b/src/common-components/data/service.js
@@ -1,4 +1,4 @@
-import { getConfig } from '@edx/frontend-platform';
+import { camelCaseObject, convertKeyNames, getConfig } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';

 // eslint-disable-next-line import/prefer-default-export
@@ -18,8 +18,6 @@ export async function getThirdPartyAuthContext(urlParams) {
      throw (e);
    });
  return {
-    fieldDescriptions: data.registrationFields || {},
-    optionalFields: data.optionalFields || {},
-    thirdPartyAuthContext: data.contextData || {},
+    thirdPartyAuthContext: camelCaseObject(convertKeyNames(data, { fullname: 'name' })),
  };
 }
--- a/src/common-components/data/tests/reducer.test.js
+++ b/src/common-components/data/tests/reducer.test.js
@@ -1,82 +0,0 @@
-import { PENDING_STATE } from '../../../data/constants';
-import { THIRD_PARTY_AUTH_CONTEXT, THIRD_PARTY_AUTH_CONTEXT_CLEAR_ERROR_MSG } from '../actions';
-import reducer from '../reducers';
-
-describe('common components reducer', () => {
-  it('test mfe context response', () => {
-    const state = {
-      fieldDescriptions: {},
-      optionalFields: {},
-      thirdPartyAuthApiStatus: null,
-      thirdPartyAuthContext: {
-        currentProvider: null,
-        finishAuthUrl: null,
-        countryCode: null,
-        providers: [],
-        secondaryProviders: [],
-        pipelineUserDetails: null,
-        errorMessage: null,
-      },
-    };
-    const fieldDescriptions = {
-      fields: [],
-    };
-    const optionalFields = {
-      fields: [],
-      extended_profile: {},
-    };
-    const thirdPartyAuthContext = { ...state.thirdPartyAuthContext };
-    const action = {
-      type: THIRD_PARTY_AUTH_CONTEXT.SUCCESS,
-      payload: { fieldDescriptions, optionalFields, thirdPartyAuthContext },
-    };
-
-    expect(
-      reducer(state, action),
-    ).toEqual(
-      {
-        ...state,
-        fieldDescriptions: [],
-        optionalFields: {
-          fields: [],
-          extended_profile: {},
-        },
-        thirdPartyAuthApiStatus: 'complete',
-      },
-    );
-  });
-
-  it('should clear tpa context error message', () => {
-    const state = {
-      fieldDescriptions: {},
-      optionalFields: {},
-      thirdPartyAuthApiStatus: null,
-      thirdPartyAuthContext: {
-        currentProvider: null,
-        finishAuthUrl: null,
-        countryCode: null,
-        providers: [],
-        secondaryProviders: [],
-        pipelineUserDetails: null,
-        errorMessage: 'An error occurred',
-      },
-    };
-
-    const action = {
-      type: THIRD_PARTY_AUTH_CONTEXT_CLEAR_ERROR_MSG,
-    };
-
-    expect(
-      reducer(state, action),
-    ).toEqual(
-      {
-        ...state,
-        thirdPartyAuthApiStatus: PENDING_STATE,
-        thirdPartyAuthContext: {
-          ...state.thirdPartyAuthContext,
-          errorMessage: null,
-        },
-      },
-    );
-  });
-});
--- a/src/common-components/data/tests/sagas.test.js
+++ b/src/common-components/data/tests/sagas.test.js
@@ -1,10 +1,9 @@
 import { runSaga } from 'redux-saga';

-import { setCountryFromThirdPartyAuthContext } from '../../../register/data/actions';
-import initializeMockLogging from '../../../setupTest';
 import * as actions from '../actions';
 import { fetchThirdPartyAuthContext } from '../sagas';
 import * as api from '../service';
+import initializeMockLogging from '../../../setupTest';

 const { loggingService } = initializeMockLogging();

@@ -27,11 +26,7 @@ describe('fetchThirdPartyAuthContext', () => {

  it('should call service and dispatch success action', async () => {
    const getThirdPartyAuthContext = jest.spyOn(api, 'getThirdPartyAuthContext')
-      .mockImplementation(() => Promise.resolve({
-        thirdPartyAuthContext: data,
-        fieldDescriptions: {},
-        optionalFields: {},
-      }));
+      .mockImplementation(() => Promise.resolve({ thirdPartyAuthContext: data }));

    const dispatched = [];
    await runSaga(
@@ -43,8 +38,7 @@ describe('fetchThirdPartyAuthContext', () => {
    expect(getThirdPartyAuthContext).toHaveBeenCalledTimes(1);
    expect(dispatched).toEqual([
      actions.getThirdPartyAuthContextBegin(),
-      setCountryFromThirdPartyAuthContext(),
-      actions.getThirdPartyAuthContextSuccess({}, {}, data),
+      actions.getThirdPartyAuthContextSuccess(data),
    ]);
    getThirdPartyAuthContext.mockClear();
  });
--- a/src/common-components/index.jsx
+++ b/src/common-components/index.jsx
@@ -1,6 +1,5 @@
 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 NotFoundPage } from './NotFoundPage';
 export { default as SocialAuthProviders } from './SocialAuthProviders';
@@ -12,4 +11,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 Zendesk } from './Zendesk';
+export { default as Logistration } from './Logistration';
--- a/src/common-components/messages.jsx
+++ b/src/common-components/messages.jsx
@@ -1,13 +1,29 @@
 import { defineMessages } from '@edx/frontend-platform/i18n';

 const messages = defineMessages({
-  // institution login strings
  'institution.login.page.sub.heading': {
    id: 'institution.login.page.sub.heading',
    defaultMessage: 'Choose your institution from the list below',
    description: 'Heading of the institutions list',
  },
-  // logistration strings
+  // Confirmation Alert Message
+  'forgot.password.confirmation.title': {
+    id: 'forgot.password.confirmation.title',
+    defaultMessage: 'Check your email',
+    description: 'Forgot password confirmation message title',
+  },
+  'forgot.password.confirmation.support.link': {
+    id: 'forgot.password.confirmation.support.link',
+    defaultMessage: 'contact technical support',
+    description: 'Technical support link text',
+  },
+  'forgot.password.confirmation.info': {
+    id: 'forgot.password.confirmation.info',
+    defaultMessage: 'If you do not receive a password reset message after 1 minute, verify that you entered the correct '
+                    + 'email address, or check your spam folder.',
+    description: 'Part of message that appears after user requests password change',
+  },
+  // Logistration strinsg
  'logistration.sign.in': {
    id: 'logistration.sign.in',
    defaultMessage: 'Sign in',
@@ -18,22 +34,32 @@ const messages = defineMessages({
    defaultMessage: 'Register',
    description: 'Text that appears on the tab to switch between login and register',
  },
+  'internal.server.error.message': {
+    id: 'internal.server.error.message',
+    defaultMessage: 'An error has occurred. Try refreshing the page, or check your internet connection.',
+    description: 'Error message that appears when server responds with 500 error code',
+  },
+  'server.ratelimit.error.message': {
+    id: 'server.ratelimit.error.message',
+    defaultMessage: 'An error has occurred because of too many requests. Please try again after some time.',
+    description: 'Error message that appears when server responds with 429 error code',
+  },
  // enterprise sso strings
  'enterprisetpa.title.heading': {
    id: 'enterprisetpa.title.heading',
    defaultMessage: 'Would you like to sign in using your {providerName} credentials?',
    description: 'Header text used in enterprise third party authentication',
  },
+  'enterprisetpa.sso.button.title': {
+    id: 'enterprisetpa.sso.button.title',
+    defaultMessage: 'Sign in using {providerName}',
+    description: 'Text for third party auth provider buttons',
+  },
  'enterprisetpa.login.button.text': {
    id: 'enterprisetpa.login.button.text',
    defaultMessage: 'Show me other ways to sign in or register',
    description: 'Button text for login',
  },
-  'enterprisetpa.login.button.text.public.account.creation.disabled': {
-    id: 'enterprisetpa.login.button.text.public.account.creation.disabled',
-    defaultMessage: 'Show me other ways to sign in',
-    description: 'Button text for login when account creation is disabled',
-  },
  // social auth providers
  'sso.sign.in.with': {
    id: 'sso.sign.in.with',
@@ -58,17 +84,17 @@ const messages = defineMessages({
  },
  'one.letter': {
    id: 'one.letter',
-    defaultMessage: '1 letter',
+    defaultMessage: '1 Letter',
    description: 'password requirement to have 1 letter',
  },
  'one.number': {
    id: 'one.number',
-    defaultMessage: '1 number',
+    defaultMessage: '1 Number',
    description: 'password requirement to have 1 number',
  },
  'eight.characters': {
    id: 'eight.characters',
-    defaultMessage: '8 characters',
+    defaultMessage: '8 Characters',
    description: 'password requirement to have a minimum of 8 characters',
  },
  'password.sr.only.helping.text': {
@@ -97,41 +123,6 @@ const messages = defineMessages({
    description: 'Message that appears on register page if user has successfully authenticated with TPA '
                  + 'but no associated platform account exists',
  },
-  'registration.using.tpa.form.heading': {
-    id: 'registration.using.tpa.form.heading',
-    defaultMessage: 'Finish creating your account',
-    description: 'Heading that appears above form when user is trying to create account using social auth',
-  },
-  supportTitle: {
-    id: 'zendesk.supportTitle',
-    description: 'Title for the support button',
-    defaultMessage: 'edX Support',
-  },
-  selectTicketForm: {
-    id: 'zendesk.selectTicketForm',
-    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;
--- a/src/common-components/tests/EmbeddedRegistrationRoute.test.jsx
+++ b/src/common-components/tests/EmbeddedRegistrationRoute.test.jsx
@@ -1,78 +0,0 @@
-/* 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 { PAGE_NOT_FOUND, REGISTER_EMBEDDED_PAGE } from '../../data/constants';
-import EmbeddedRegistrationRoute from '../EmbeddedRegistrationRoute';
-
-import {
-  MemoryRouter, Route, BrowserRouter as Router, Routes,
-} from 'react-router-dom';
-
-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');
-  });
-});
--- a/src/common-components/tests/FormField.test.jsx
+++ b/src/common-components/tests/FormField.test.jsx
@@ -1,13 +1,9 @@
 import React from 'react';
-import { Provider } from 'react-redux';
+import { mount } from 'enzyme';
+import { act } from 'react-dom/test-utils';

 import { injectIntl, 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';

@@ -21,42 +17,19 @@ describe('FormGroup', () => {
  };

  it('should show help text on field focus', () => {
-    const { queryByText, getByLabelText } = render(<FormGroup {...props} />);
-    const emailInput = getByLabelText('Email');
+    const formGroup = mount(<FormGroup {...props} />);
+    expect(formGroup.find('.pgn-transition-replace-group').find('div#email-1').exists()).toBeFalsy();

-    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');
+    formGroup.find('input#email').simulate('focus');
+    expect(formGroup.find('.pgn-transition-replace-group').find('div#email-1').text()).toEqual('Email field help text');
  });
 });

 describe('PasswordField', () => {
-  const mockStore = configureStore();
  const IntlPasswordField = injectIntl(PasswordField);
  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',
@@ -66,29 +39,25 @@ describe('PasswordField', () => {
  });

  it('should show/hide password on icon click', () => {
-    const { getByLabelText } = render(reduxWrapper(<IntlPasswordField {...props} />));
-    const passwordInput = getByLabelText('Password');
+    const passwordField = mount(<IntlProvider locale="en"><IntlPasswordField {...props} /></IntlProvider>);

-    const showPasswordButton = getByLabelText('Show password');
-    fireEvent.click(showPasswordButton);
-    expect(passwordInput.type).toBe('text');
+    passwordField.find('button[aria-label="Show password"]').simulate('click');
+    expect(passwordField.find('input').prop('type')).toEqual('text');

-    const hidePasswordButton = getByLabelText('Hide password');
-    fireEvent.click(hidePasswordButton);
-    expect(passwordInput.type).toBe('password');
+    passwordField.find('button[aria-label="Hide password"]').simulate('click');
+    expect(passwordField.find('input').prop('type')).toEqual('password');
  });

  it('should show password requirement tooltip on focus', async () => {
-    const { getByLabelText } = render(reduxWrapper(<IntlPasswordField {...props} />));
-    const passwordInput = getByLabelText('Password');
+    const passwordField = mount(<IntlProvider locale="en"><IntlPasswordField {...props} /></IntlProvider>);
    jest.useFakeTimers();
    await act(async () => {
-      fireEvent.focus(passwordInput);
+      passwordField.find('input').simulate('focus');
      jest.runAllTimers();
    });
-    const passwordRequirementTooltip = document.querySelector('#password-requirement-left');
+    passwordField.update();

-    expect(passwordRequirementTooltip).toBeTruthy();
+    expect(passwordField.find('#password-requirement-left').exists()).toBeTruthy();
  });

  it('should show all password requirement checks as failed', async () => {
@@ -96,195 +65,31 @@ describe('PasswordField', () => {
      ...props,
      value: '',
    };
-    const { getByLabelText } = render(reduxWrapper(<IntlPasswordField {...props} />));
-    const passwordInput = getByLabelText('Password');
+
    jest.useFakeTimers();
+    const passwordField = mount(<IntlProvider locale="en"><IntlPasswordField {...props} /></IntlProvider>);
    await act(async () => {
-      fireEvent.focus(passwordInput);
+      passwordField.find('input').simulate('focus');
      jest.runAllTimers();
    });
+    passwordField.update();

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

  it('should update password requirement checks', async () => {
-    const { getByLabelText } = render(reduxWrapper(<IntlPasswordField {...props} />));
-    const passwordInput = getByLabelText('Password');
+    const passwordField = mount(<IntlProvider locale="en"><IntlPasswordField {...props} /></IntlProvider>);
    jest.useFakeTimers();
    await act(async () => {
-      fireEvent.focus(passwordInput);
+      passwordField.find('input').simulate('focus');
      jest.runAllTimers();
    });
+    passwordField.update();

-    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(<IntlPasswordField {...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(<IntlPasswordField {...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(<IntlPasswordField {...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(<IntlPasswordField {...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(<IntlPasswordField {...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(<IntlPasswordField {...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(<IntlPasswordField {...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',
-      },
-    });
+    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');
  });
 });
--- a/src/common-components/tests/Logistration.test.jsx
+++ b/src/common-components/tests/Logistration.test.jsx
@@ -0,0 +1,181 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-redux';
+import { MemoryRouter } from 'react-router-dom';
+
+import { getConfig, mergeConfig } from '@edx/frontend-platform';
+import * as analytics from '@edx/frontend-platform/analytics';
+import { configure, injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
+
+import * as auth from '@edx/frontend-platform/auth';
+import Logistration from '../Logistration';
+import { RenderInstitutionButton } from '../InstitutionLogistration';
+import { COMPLETE_STATE, LOGIN_PAGE } from '../../data/constants';
+
+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: 'edX' }));
+  });
+  it('should render registration page', () => {
+    configure({
+      loggingService: { logError: jest.fn() },
+      config: {
+        ENVIRONMENT: 'production',
+        LANGUAGE_PREFERENCE_COOKIE_NAME: 'yum',
+      },
+      messages: { 'es-419': {}, de: {}, 'en-us': {} },
+    });
+
+    store = mockStore({
+      register: {
+        registrationResult: { success: false, redirectUrl: '' },
+        registrationError: {},
+      },
+      commonComponents: {
+        thirdPartyAuthApiStatus: null,
+      },
+    });
+    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: {
+        thirdPartyAuthApiStatus: null,
+      },
+    });
+
+    const props = { selectedPage: LOGIN_PAGE };
+    const logistration = mount(reduxWrapper(<IntlLogistration {...props} />));
+
+    expect(logistration.find('#main-content').find('LoginPage').exists()).toBeTruthy();
+  });
+
+  it('should display institution login option when secondary providers are present', () => {
+    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} />));
+    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: '',
+    });
+  });
+});
--- a/src/common-components/tests/SocialAuthProviders.test.jsx
+++ b/src/common-components/tests/SocialAuthProviders.test.jsx
@@ -1,10 +1,9 @@
 import React from 'react';
-
-import { IntlProvider } from '@edx/frontend-platform/i18n';
 import renderer from 'react-test-renderer';
+import { IntlProvider } from '@edx/frontend-platform/i18n';

-import registerIcons from '../RegisterFaIcons';
 import SocialAuthProviders from '../SocialAuthProviders';
+import registerIcons from '../RegisterFaIcons';

 registerIcons();

--- a/src/common-components/tests/ThirdPartyAuthAlert.test.jsx
+++ b/src/common-components/tests/ThirdPartyAuthAlert.test.jsx
@@ -1,10 +1,9 @@
 import React from 'react';
-
-import { IntlProvider } from '@edx/frontend-platform/i18n';
 import renderer from 'react-test-renderer';
+import { IntlProvider } from '@edx/frontend-platform/i18n';

-import { REGISTER_PAGE } from '../../data/constants';
 import ThirdPartyAuthAlert from '../ThirdPartyAuthAlert';
+import { REGISTER_PAGE } from '../../data/constants';

 describe('ThirdPartyAuthAlert', () => {
  let props = {};
--- a/src/common-components/tests/UnAuthOnlyRoute.test.jsx
+++ b/src/common-components/tests/UnAuthOnlyRoute.test.jsx
@@ -1,22 +1,13 @@
-/* eslint-disable import/no-import-module-exports */
-/* eslint-disable react/function-component-definition */
 import React from 'react';
+import { mount } from 'enzyme';
+import { BrowserRouter as Router, MemoryRouter, Switch } from 'react-router-dom';

-import { fetchAuthenticatedUser, getAuthenticatedUser } from '@edx/frontend-platform/auth';
-import { render } from '@testing-library/react';
-import { act } from 'react-dom/test-utils';
+import * as auth from '@edx/frontend-platform/auth';

 import { UnAuthOnlyRoute } from '..';
-import { REGISTER_PAGE } from '../../data/constants';
+import { LOGIN_PAGE } from '../../data/constants';

-import {
-  MemoryRouter, Route, BrowserRouter as Router, Routes,
-} from 'react-router-dom';
-
-jest.mock('@edx/frontend-platform/auth', () => ({
-  getAuthenticatedUser: jest.fn(),
-  fetchAuthenticatedUser: jest.fn(),
-}));
+jest.mock('@edx/frontend-platform/auth');

 const RRD = require('react-router-dom');
 // Just render plain div with its children
@@ -27,16 +18,16 @@ module.exports = RRD;
 const TestApp = () => (
  <Router>
    <div>
-      <Routes>
-        <Route path={REGISTER_PAGE} element={<UnAuthOnlyRoute><span>Register Page</span></UnAuthOnlyRoute>} />
-      </Routes>
+      <Switch>
+        <UnAuthOnlyRoute path={LOGIN_PAGE} render={() => (<span>Login Page</span>)} />
+      </Switch>
    </div>
  </Router>
 );

 describe('UnAuthOnlyRoute', () => {
  const routerWrapper = () => (
-    <MemoryRouter initialEntries={[REGISTER_PAGE]}>
+    <MemoryRouter initialEntries={[LOGIN_PAGE]}>
      <TestApp />
    </MemoryRouter>
  );
@@ -45,30 +36,25 @@ describe('UnAuthOnlyRoute', () => {
    jest.clearAllMocks();
  });

-  it('should have called with forceRefresh true', async () => {
+  it('should have called with forceRefresh true', () => {
    const user = {
      username: 'gonzo',
      other: 'data',
    };
+    auth.getAuthenticatedUser = jest.fn(() => user);
+    auth.fetchAuthenticatedUser = jest.fn(() => ({ then: () => auth.getAuthenticatedUser() }));

-    getAuthenticatedUser.mockReturnValue(user);
-    fetchAuthenticatedUser.mockReturnValueOnce(Promise.resolve(user));
+    mount(routerWrapper());

-    await act(async () => {
-      await render(routerWrapper());
-    });
-
-    expect(fetchAuthenticatedUser).toBeCalledWith({ forceRefresh: true });
+    expect(auth.fetchAuthenticatedUser).toBeCalledWith({ forceRefresh: true });
  });

-  it('should have called with forceRefresh false', async () => {
-    getAuthenticatedUser.mockReturnValue(null);
-    fetchAuthenticatedUser.mockReturnValueOnce(Promise.resolve(null));
+  it('should have called with forceRefresh false', () => {
+    auth.getAuthenticatedUser = jest.fn(() => null);
+    auth.fetchAuthenticatedUser = jest.fn(() => ({ then: () => auth.getAuthenticatedUser() }));

-    await act(async () => {
-      await render(routerWrapper());
-    });
+    mount(routerWrapper());

-    expect(fetchAuthenticatedUser).toBeCalledWith({ forceRefresh: false });
+    expect(auth.fetchAuthenticatedUser).toBeCalledWith({ forceRefresh: false });
  });
 });
--- a/src/common-components/tests/Zendesk.test.jsx
+++ b/src/common-components/tests/Zendesk.test.jsx
@@ -1,17 +0,0 @@
-import { IntlProvider } from '@edx/frontend-platform/i18n';
-import renderer from 'react-test-renderer';
-
-import Zendesk from '../Zendesk';
-
-jest.mock('react-zendesk', () => 'Zendesk');
-
-describe('Zendesk Help', () => {
-  it('should match login page third party auth alert message snapshot', () => {
-    const tree = renderer.create(
-      <IntlProvider locale="en">
-        <Zendesk />
-      </IntlProvider>,
-    ).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-});
--- a/src/common-components/tests/snapshots/SocialAuthProviders.test.jsx.snap
+++ b/src/common-components/tests/snapshots/SocialAuthProviders.test.jsx.snap
@@ -10,27 +10,25 @@ exports[`SocialAuthProviders should match social auth provider with default icon
 >
  <div
    aria-hidden="true"
-    className="btn-tpa__font-container"
+    className="font-container"
  >
-    <span
-      className="pgn__icon h-75"
+    <svg
+      aria-hidden="true"
+      className="svg-inline--fa fa-sign-in-alt fa-w-16 "
+      data-icon="sign-in-alt"
+      data-prefix="fas"
+      focusable="false"
+      role="img"
+      style={Object {}}
+      viewBox="0 0 512 512"
+      xmlns="http://www.w3.org/2000/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>
+      <path
+        d="M416 448h-84c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h84c17.7 0 32-14.3 32-32V160c0-17.7-14.3-32-32-32h-84c-6.6 0-12-5.4-12-12V76c0-6.6 5.4-12 12-12h84c53 0 96 43 96 96v192c0 53-43 96-96 96zm-47-201L201 79c-15-15-41-4.5-41 17v96H24c-13.3 0-24 10.7-24 24v96c0 13.3 10.7 24 24 24h136v96c0 21.5 26 32 41 17l168-168c9.3-9.4 9.3-24.6 0-34z"
+        fill="currentColor"
+        style={Object {}}
+      />
+    </svg>
  </div>
  <span
    aria-hidden="true"
@@ -57,11 +55,11 @@ exports[`SocialAuthProviders should match social auth provider with iconClass sn
 >
  <div
    aria-hidden="true"
-    className="btn-tpa__font-container"
+    className="font-container"
  >
    <svg
      aria-hidden="true"
-      className="svg-inline--fa fa-google "
+      className="svg-inline--fa fa-google fa-w-16 "
      data-icon="google"
      data-prefix="fab"
      focusable="false"
@@ -106,7 +104,7 @@ Array [
    >
      <img
        alt="icon Apple"
-        className="btn-tpa__image-icon"
+        className="icon-image"
        src="https://edx.devstack.lms/logo.png"
      />
    </div>
@@ -135,7 +133,7 @@ Array [
    >
      <img
        alt="icon Facebook"
-        className="btn-tpa__image-icon"
+        className="icon-image"
        src="https://edx.devstack.lms/facebook-logo.png"
      />
    </div>
--- a/src/common-components/tests/snapshots/ThirdPartyAuthAlert.test.jsx.snap
+++ b/src/common-components/tests/snapshots/ThirdPartyAuthAlert.test.jsx.snap
@@ -2,7 +2,7 @@

 exports[`ThirdPartyAuthAlert should match login page third party auth alert message snapshot 1`] = `
 <div
-  className="fade alert-content alert-warning mt-n2 mb-5 alert show"
+  className="fade alert-content alert-warning mt-n2 alert show"
  id="tpa-alert"
  role="alert"
 >
@@ -21,33 +21,26 @@ 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 alert show"
+  id="tpa-alert"
+  role="alert"
+>
  <div
-    className="fade alert-content alert-success mt-n2 mb-5 alert show"
-    id="tpa-alert"
-    role="alert"
+    className="pgn__alert-message-wrapper"
  >
    <div
-      className="pgn__alert-message-wrapper"
+      className="alert-message-content"
    >
      <div
-        className="alert-message-content"
+        className="alert-heading h4"
      >
-        <div
-          className="alert-heading h4"
-        >
-          Almost done!
-        </div>
-        <p>
-          You've successfully signed into Google! We just need a little more information before you start learning with Your Platform Name Here.
-        </p>
+        Almost done!
      </div>
+      <p>
+        You've successfully signed into Google! We just need a little more information before you start learning with Your Platform Name Here.
+      </p>
    </div>
-  </div>,
-  <h4
-    className="mt-4 mb-4"
-  >
-    Finish creating your account
-  </h4>,
-]
+  </div>
+</div>
 `;
--- a/Show More
+++ b/Show More