refactor: move fields specific code to their wrappers

Description:
Applied frontend validations on all the fields
VAN-1614

.env

@@ -13,19 +13,29 @@ ORDER_HISTORY_URL=null
 REFRESH_ACCESS_TOKEN_ENDPOINT=null
 SEGMENT_KEY=''
 SITE_NAME=null
-USER_INFO_COOKIE_NAME=null
-AUTHN_MINIMAL_HEADER=true
-LOGIN_ISSUE_SUPPORT_LINK=''
-USER_SURVEY_COOKIE_NAME=null
-COOKIE_DOMAIN=null
-WELCOME_PAGE_SUPPORT_LINK=null
 INFO_EMAIL=''
-DISABLE_ENTERPRISE_LOGIN=''
+# ***** Cookies *****
 REGISTER_CONVERSION_COOKIE_NAME=null
-ENABLE_PROGRESSIVE_PROFILING=''
+# ***** Links *****
+LOGIN_ISSUE_SUPPORT_LINK=''
+AUTHN_PROGRESSIVE_PROFILING_SUPPORT_LINK=null
+POST_REGISTRATION_REDIRECT_URL=''
+SEARCH_CATALOG_URL=''
+# ***** Features flags *****
+DISABLE_ENTERPRISE_LOGIN=''
+ENABLE_DYNAMIC_REGISTRATION_FIELDS=''
+ENABLE_PROGRESSIVE_PROFILING_ON_AUTHN=''
+ENABLE_POPULAR_AND_TRENDING_RECOMMENDATIONS=''
 MARKETING_EMAILS_OPT_IN=''
-ENABLE_COPPA_COMPLIANCE=''
+SHOW_CONFIGURABLE_EDX_FIELDS=''
+# ***** 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=''

.env.development

@@ -18,21 +18,24 @@ 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'
+# ***** Cookies *****
+REGISTER_CONVERSION_COOKIE_NAME='openedx-user-register-conversion'
+SESSION_COOKIE_DOMAIN='localhost'
 USER_INFO_COOKIE_NAME='edx-user-info'
-AUTHN_MINIMAL_HEADER=true
-LOGIN_ISSUE_SUPPORT_LINK='/login-issue-support-url'
+# ***** Links *****
+LOGIN_ISSUE_SUPPORT_LINK='http://localhost:18000/login-issue-support-url'
 TOS_AND_HONOR_CODE='http://localhost:18000/honor'
 TOS_LINK='http://localhost:18000/tos'
 PRIVACY_POLICY='http://localhost:18000/privacy'
-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=''
-ZENDESK_KEY=''
-ZENDESK_LOGO_URL=''
+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=''

.env.private.example

@@ -0,0 +1,4 @@
+# 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'

.env.test

@@ -16,15 +16,6 @@ ORDER_HISTORY_URL='http://localhost:1996/orders'
 REFRESH_ACCESS_TOKEN_ENDPOINT='http://localhost:18000/login_refresh'
 SEGMENT_KEY=''
 SITE_NAME='Your Platform Name Here'
-USER_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=''
-ZENDESK_KEY=''
-ZENDESK_LOGO_URL=''
 APP_ID=''
 MFE_CONFIG_API_URL=''

.eslintignore

@@ -1,5 +1,6 @@
 coverage/*
 dist/
+docs
 node_modules/
 __mocks__/
 __snapshots__/

.eslintrc.js

@@ -1,16 +1,17 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
 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 
+    // 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', {
@@ -18,9 +19,9 @@ module.exports = createConfig('eslint', {
       labelAttributes: [],
       controlComponents: [],
       assert: 'htmlFor',
-      depth: 25
+      depth: 25,
     }],
-    'sort-imports': ['error', {ignoreCase: true, ignoreDeclarationSort: true}],
+    'sort-imports': ['error', { ignoreCase: true, ignoreDeclarationSort: true }],
     'import/order': [
       'error',
       {
@@ -46,5 +47,6 @@ module.exports = createConfig('eslint', {
         },
       },
     ],
+    'function-paren-newline': 'off',
   },
 });

.github/pull_request_template.md

@@ -2,11 +2,16 @@
 
 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|
@@ -21,4 +26,4 @@ Include a link to the sandbox for design changes or screenshot for before and af
 #### Post-merge Checklist
 
 * [ ] Deploy the changes to prod after verifying on stage or ask **@openedx/vanguards** to do it. 
-* [ ] 🎉 🙌 Celebrate! Thanks for your contribution.
+* [ ] 🎉 🙌 Celebrate! Thanks for your contribution.

.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 }}

.github/workflows/add-remove-label-on-comment.yml

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

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

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

.github/workflows/ci.yml

@@ -11,17 +11,16 @@ on:
 jobs:
   tests:
     runs-on: ubuntu-20.04
-    strategy:
-      matrix:
-        node: [16]
+
     steps:
     - name: Checkout
-      uses: actions/checkout@v2
-
+      uses: actions/checkout@v3
+    - name: Setup Nodejs Env
+      run: echo "NODE_VER=`cat .nvmrc`" >> $GITHUB_ENV
     - name: Setup Nodejs
-      uses: actions/setup-node@v2
+      uses: actions/setup-node@v3
       with:
-        node-version: ${{ matrix.node }}
+        node-version: ${{ env.NODE_VER }}
 
     - name: Install Dependencies
       run: npm ci

.github/workflows/lockfileversion-check.yml

@@ -10,4 +10,4 @@ on:
 
 jobs:
   version-check:
-    uses: openedx/.github/.github/workflows/lockfileversion-check.yml@master
+    uses: openedx/.github/.github/workflows/lockfileversion-check-v3.yml@master

.github/workflows/self-assign-issue.yml

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

.gitignore

@@ -5,6 +5,7 @@ node_modules
 npm-debug.log
 coverage
 module.config.js
+.env.private
 
 dist/
 src/i18n/transifex_input.json

.nvmrc

@@ -0,0 +1 @@
+18

CODEOWNERS

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

Makefile

@@ -1,6 +1,7 @@
 export TRANSIFEX_RESOURCE = frontend-app-authn
-transifex_langs = "ar,fr,es_419,zh_CN,it_IT,pt_PT,de_DE,uk,ru,hi"
+transifex_langs = "ar,fr,es_419,zh_CN,pt,it,de,uk,ru,hi,fr_CA,it_IT,pt_PT,de_DE"
 
+intl_imports = ./node_modules/.bin/intl-imports.js
 transifex_utils = ./node_modules/.bin/transifex-utils.js
 i18n = ./src/i18n
 transifex_input = $(i18n)/transifex_input.json
@@ -42,11 +43,37 @@ push_translations:
 	# Pushing comments to Transifex...
 	./node_modules/@edx/reactifex/bash_scripts/put_comments_v3.sh
 
+ifeq ($(OPENEDX_ATLAS_PULL),)
 # Pulls translations from Transifex.
 pull_translations:
 	tx pull -t -f --mode reviewed --languages=$(transifex_langs)
+else
+# Experimental: OEP-58 Pulls translations using atlas
+pull_translations:
+	rm -rf src/i18n/messages
+	mkdir src/i18n/messages
+	cd src/i18n/messages \
+	  && atlas pull --filter=$(transifex_langs) \
+	           translations/paragon/src/i18n/messages:paragon \
+	           translations/frontend-app-authn/src/i18n/messages:frontend-app-authn
 
-# This target is used by CI.
+	$(intl_imports) paragon frontend-app-authn
+endif
+
+# This target is used by Travis.
 validate-no-uncommitted-package-lock-changes:
 	# Checking for package-lock.json changes...
 	git diff --exit-code package-lock.json
+
+.PHONY: validate
+validate:
+	make validate-no-uncommitted-package-lock-changes
+	npm run i18n_extract
+	npm run lint -- --max-warnings 0
+	npm run test
+	npm run build
+
+.PHONY: validate.ci
+validate.ci:
+	npm ci
+	make validate

README.rst

@@ -72,8 +72,8 @@ The authentication micro-frontend also requires the following additional variabl
      - The fully-qualified URL to the password reset support page in the target environment.
      - ``https://support.example.com``
 
-   * - ``WELCOME_PAGE_SUPPORT_LINK``
-     - The fully-qualified URL to the welcome support page in the target environment.
+   * - ``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``
@@ -96,7 +96,7 @@ The authentication micro-frontend also requires the following additional variabl
      - 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``
+   * - ``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)
 
@@ -104,6 +104,15 @@ The authentication micro-frontend also requires the following additional variabl
      - 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`` | ``''``
+
+
 edX-specific Environment Variables
 **********************************
 
@@ -121,14 +130,52 @@ Furthermore, there are several edX-specific environment variables that enable 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.
+
+Open edX Code of Conduct
+------------------------
+All community members are expected to follow the `Open edX Code of Conduct <https://openedx.org/code-of-conduct/>`_.
+
+People
+------
+The assigned maintainers for this component and other project details may be
+found in `Backstage <https://backstage.openedx.org/catalog/default/group/vanguards>`_. Backstage pulls this data from the ``catalog-info.yaml``
+file in this repo.
+
+Reporting Security Issues
+-------------------------
+
+Please do not report security issues in public. Please email security@edx.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.
 
 ==============================
 

catalog-info.yaml

@@ -0,0 +1,18 @@
+# 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:vanguards
+  type: 'service'
+  lifecycle: 'production'

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
-      /constants.js
+      /mockedData.js
       /reducers.js
       /sagas.js
       /selectors.js

openedx.yaml

@@ -3,6 +3,6 @@
 
 nick: Authn MFE
 oeps: {}
-owner: edx/vanguards
+owner: openedx/vanguards
 openedx-release:
   ref: master

package.json

@@ -32,57 +32,52 @@
     "url": "https://github.com/openedx/frontend-app-authn/issues"
   },
   "dependencies": {
-    "@edx/brand": "npm:@edx/brand-openedx@1.1.0",
-    "@edx/frontend-component-cookie-policy-banner": "2.2.0",
-    "@edx/frontend-platform": "3.1.1",
-    "@edx/paragon": "20.20.0",
-    "@fortawesome/fontawesome-svg-core": "6.2.1",
-    "@fortawesome/free-brands-svg-icons": "6.2.1",
-    "@fortawesome/free-regular-svg-icons": "6.2.1",
-    "@fortawesome/free-solid-svg-icons": "6.2.1",
+    "@edx/brand": "npm:@edx/brand-openedx@1.2.0",
+    "@edx/frontend-platform": "^5.0.0",
+    "@edx/paragon": "20.46.2",
+    "@fortawesome/fontawesome-svg-core": "6.4.2",
+    "@fortawesome/free-brands-svg-icons": "6.4.2",
+    "@fortawesome/free-solid-svg-icons": "6.4.2",
     "@fortawesome/react-fontawesome": "0.2.0",
-    "@redux-devtools/extension": "3.2.3",
+    "@optimizely/react-sdk": "^2.9.1",
+    "@redux-devtools/extension": "3.2.5",
+    "algoliasearch": "^4.14.3",
     "classnames": "2.3.2",
-    "core-js": "3.26.1",
-    "extract-react-intl-messages": "4.1.1",
+    "core-js": "3.32.0",
     "fastest-levenshtein": "1.0.16",
-    "form-urlencoded": "4.2.1",
-    "lodash.camelcase": "4.3.0",
-    "lodash.snakecase": "4.1.1",
+    "form-urlencoded": "6.1.0",
     "prop-types": "15.8.1",
-    "query-string": "5.1.1",
-    "react": "16.14.0",
-    "react-dom": "16.14.0",
+    "query-string": "7.1.3",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-helmet": "6.1.0",
-    "react-loading-skeleton": "2.2.0",
-    "react-onclickoutside": "6.12.2",
+    "react-loading-skeleton": "3.3.1",
     "react-redux": "7.2.9",
     "react-responsive": "8.2.0",
-    "react-router": "5.3.4",
-    "react-router-dom": "5.3.4",
+    "react-router": "6.15.0",
+    "react-router-dom": "6.15.0",
+    "react-zendesk": "^0.1.13",
     "redux": "4.2.0",
     "redux-logger": "3.0.6",
     "redux-mock-store": "1.5.4",
-    "redux-saga": "1.2.1",
+    "redux-saga": "1.2.3",
     "redux-thunk": "2.4.2",
-    "regenerator-runtime": "0.13.11",
-    "reselect": "4.1.7",
-    "sanitize-html": "2.7.3",
-    "semver-regex": "3.1.4",
+    "regenerator-runtime": "0.14.0",
+    "reselect": "4.1.8",
     "universal-cookie": "4.0.4"
   },
   "devDependencies": {
     "@edx/browserslist-config": "^1.1.1",
-    "@edx/frontend-build": "11.0.2",
+    "@edx/frontend-build": "12.9.8",
     "@edx/reactifex": "1.1.0",
-    "babel-plugin-formatjs": "10.3.31",
+    "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
+    "babel-plugin-formatjs": "10.5.3",
     "enzyme": "3.11.0",
-    "enzyme-adapter-react-16": "1.15.7",
-    "eslint-plugin-import": "2.26.0",
+    "eslint-plugin-import": "2.28.0",
     "glob": "7.2.3",
     "history": "5.3.0",
     "husky": "7.0.4",
-    "jest": "27.5.1",
-    "react-test-renderer": "16.14.0"
+    "jest": "29.6.2",
+    "react-test-renderer": "^17.0.2"
   }
 }

public/index.html

@@ -4,6 +4,11 @@
       <title>Authn | <%= process.env.SITE_NAME %></title>
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
+      <script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.6/iframeResizer.contentWindow.min.js"
+              integrity="sha512-R7Piufj0/o6jG9ZKrAvS2dblFr2kkuG4XVQwStX+/4P+KwOLUXn2DXy0l1AJDxxqGhkM/FJllZHG2PKOAheYzg=="
+              crossorigin="anonymous"
+              referrerpolicy="no-referrer">
+      </script>
       <% if (process.env.OPTIMIZELY_URL) { %>
         <script
           src="<%= process.env.OPTIMIZELY_URL %>"
@@ -13,58 +18,6 @@
           src="<%= process.env.MARKETING_SITE_BASE_URL %>/optimizelyjs/<%= process.env.OPTIMIZELY_PROJECT_ID %>.js"
         ></script>
       <% } %>
-      <% if (process.env.ZENDESK_KEY) { %>
-        <script
-          id="ze-snippet"
-          src="https://static.zdassets.com/ekr/snippet.js?key=<%= process.env.ZENDESK_KEY %>"
-        >
-        </script>
-        <script type="text/javascript">
-          window.zESettings = {
-            cookies: true,
-            webWidget: {
-              contactOptions: {
-                enabled: false,
-              },
-              chat: {
-                suppress: false,
-              },
-              contactForm: {
-                ticketForms: [
-                  {
-                    id: 360003368814,
-                    subject: false,
-                    fields: [
-                      {
-                        id: 'description',
-                        prefill: {
-                          '*': '',
-                        },
-                      },
-                    ],
-                  },
-                ],
-                selectTicketForm: {
-                  '*': 'Please choose your request type:',
-                },
-                attachments: true,
-              },
-              helpCenter: {
-                originalArticleButton: true,
-              },
-              answerBot: {
-                suppress: false,
-                contactOnlyAfterQuery: true,
-                title: { '*': 'edX Support' },
-                avatar: {
-                  url: '<%= process.env.ZENDESK_LOGO_URL %>',
-                  name: { '*': 'edX Support' },
-                },
-              },
-            },
-          };
-        </script>
-      <% } %>
   </head>
   <body>
     <div id="root"></div>

src/MainApp.jsx

@@ -3,19 +3,30 @@ import React from 'react';
 import { getConfig } from '@edx/frontend-platform';
 import { AppProvider } from '@edx/frontend-platform/react';
 import { Helmet } from 'react-helmet';
-import { Redirect, Route, Switch } from 'react-router-dom';
+import { Navigate, Route, Routes } from 'react-router-dom';
 
 import {
-  Logistration, NotFoundPage, registerIcons, UnAuthOnlyRoute,
+  EmbeddedRegistrationRoute, NotFoundPage, registerIcons, UnAuthOnlyRoute, Zendesk,
 } from './common-components';
 import configureStore from './data/configureStore';
 import {
-  LOGIN_PAGE, PAGE_NOT_FOUND, PASSWORD_RESET_CONFIRM, REGISTER_PAGE, RESET_PAGE, WELCOME_PAGE,
+  AUTHN_PROGRESSIVE_PROFILING,
+  LOGIN_PAGE,
+  PAGE_NOT_FOUND,
+  PASSWORD_RESET_CONFIRM,
+  RECOMMENDATIONS,
+  REGISTER_EMBEDDED_PAGE,
+  REGISTER_PAGE,
+  RESET_PAGE,
 } from './data/constants';
 import { updatePathWithQueryParams } from './data/utils';
-import ForgotPasswordPage from './forgot-password';
-import ResetPasswordPage from './reset-password';
-import { ProgressiveProfiling } from './welcome';
+import { ForgotPasswordPage } from './forgot-password';
+import Logistration from './logistration/Logistration';
+import { ProgressiveProfiling } from './progressive-profiling';
+import { RecommendationsPage } from './recommendations';
+import { EmbeddableRegistrationPage } from './register';
+import { ResetPasswordPage } from './reset-password';
+
 import './index.scss';
 
 registerIcons();
@@ -25,20 +36,27 @@ const MainApp = () => (
     <Helmet>
       <link rel="shortcut icon" href={getConfig().FAVICON_URL} type="image/x-icon" />
     </Helmet>
-    <Switch>
-      <Route exact path="/">
-        <Redirect to={updatePathWithQueryParams(REGISTER_PAGE)} />
-      </Route>
-      <UnAuthOnlyRoute exact path={LOGIN_PAGE} render={() => <Logistration selectedPage={LOGIN_PAGE} />} />
-      <UnAuthOnlyRoute exact path={REGISTER_PAGE} component={Logistration} />
-      <UnAuthOnlyRoute exact path={RESET_PAGE} component={ForgotPasswordPage} />
-      <Route exact path={PASSWORD_RESET_CONFIRM} component={ResetPasswordPage} />
-      <Route exact path={WELCOME_PAGE} component={ProgressiveProfiling} />
-      <Route path={PAGE_NOT_FOUND} component={NotFoundPage} />
-      <Route path="*">
-        <Redirect to={PAGE_NOT_FOUND} />
-      </Route>
-    </Switch>
+    {getConfig().ZENDESK_KEY && <Zendesk />}
+    <Routes>
+      <Route path="/" element={<Navigate replace to={updatePathWithQueryParams(REGISTER_PAGE)} />} />
+      <Route
+        path={REGISTER_EMBEDDED_PAGE}
+        element={<EmbeddedRegistrationRoute><EmbeddableRegistrationPage /></EmbeddedRegistrationRoute>}
+      />
+      <Route
+        path={LOGIN_PAGE}
+        element={
+          <UnAuthOnlyRoute><Logistration selectedPage={LOGIN_PAGE} /></UnAuthOnlyRoute>
+        }
+      />
+      <Route path={REGISTER_PAGE} element={<UnAuthOnlyRoute><Logistration /></UnAuthOnlyRoute>} />
+      <Route path={RESET_PAGE} element={<UnAuthOnlyRoute><ForgotPasswordPage /></UnAuthOnlyRoute>} />
+      <Route path={PASSWORD_RESET_CONFIRM} element={<ResetPasswordPage />} />
+      <Route path={AUTHN_PROGRESSIVE_PROFILING} element={<ProgressiveProfiling />} />
+      <Route path={RECOMMENDATIONS} element={<RecommendationsPage />} />
+      <Route path={PAGE_NOT_FOUND} element={<NotFoundPage />} />
+      <Route path="*" element={<Navigate replace to={PAGE_NOT_FOUND} />} />
+    </Routes>
   </AppProvider>
 );
 

src/base-component/AuthLargeLayout.jsx

@@ -1,46 +0,0 @@
-import React from 'react';
-
-import { getConfig } from '@edx/frontend-platform';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Hyperlink, Image } from '@edx/paragon';
-import PropTypes from 'prop-types';
-
-import messages from './messages';
-
-const AuthLargeLayout = ({ intl, username }) => (
-  <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">
-            {intl.formatMessage(messages['welcome.to.platform'], { siteName: getConfig().SITE_NAME, username })}
-          </h1>
-          <h2 className="complete-your-profile">
-            {intl.formatMessage(messages['complete.your.profile.1'])}
-            <div className="text-accent-a">
-              {intl.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>
-);
-
-AuthLargeLayout.propTypes = {
-  intl: intlShape.isRequired,
-  username: PropTypes.string.isRequired,
-};
-
-export default injectIntl(AuthLargeLayout);

src/base-component/AuthMediumLayout.jsx

@@ -1,49 +0,0 @@
-import React from 'react';
-
-import { getConfig } from '@edx/frontend-platform';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Hyperlink, Image } from '@edx/paragon';
-import PropTypes from 'prop-types';
-
-import messages from './messages';
-
-const AuthMediumLayout = ({ intl, username }) => (
-  <>
-    <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">
-              {intl.formatMessage(messages['welcome.to.platform'], { siteName: getConfig().SITE_NAME, username })}
-            </h1>
-            <h2 className="display-1">
-              {intl.formatMessage(messages['complete.your.profile.1'])}
-              <div className="text-accent-a">
-                {intl.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>
-  </>
-);
-
-AuthMediumLayout.propTypes = {
-  intl: intlShape.isRequired,
-  username: PropTypes.string.isRequired,
-};
-
-export default injectIntl(AuthMediumLayout);

src/base-component/AuthSmallLayout.jsx

@@ -1,38 +0,0 @@
-import React from 'react';
-
-import { getConfig } from '@edx/frontend-platform';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Hyperlink, Image } from '@edx/paragon';
-import PropTypes from 'prop-types';
-
-import messages from './messages';
-
-const AuthSmallLayout = ({ intl, username }) => (
-  <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 mb-3 mt-3 mr-3">
-      <div className="small-yellow-line mt-4.5" />
-      <div>
-        <h1 className="h5 data-hj-suppress">
-          {intl.formatMessage(messages['welcome.to.platform'], { siteName: getConfig().SITE_NAME, username })}
-        </h1>
-        <h2 className="h1">
-          {intl.formatMessage(messages['complete.your.profile.1'])}
-          <div className="text-accent-a">
-            {intl.formatMessage(messages['complete.your.profile.2'])}
-          </div>
-        </h2>
-      </div>
-    </div>
-  </div>
-);
-
-AuthSmallLayout.propTypes = {
-  intl: intlShape.isRequired,
-  username: PropTypes.string.isRequired,
-};
-
-export default injectIntl(AuthSmallLayout);

src/base-component/BaseComponent.jsx

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

src/base-component/LargeLayout.jsx

@@ -1,45 +0,0 @@
-import React from 'react';
-
-import { getConfig } from '@edx/frontend-platform';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Hyperlink, Image } from '@edx/paragon';
-import classNames from 'classnames';
-
-import messages from './messages';
-
-const LargeLayout = ({ intl }) => (
-  <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' },
-          )}
-        >
-          {intl.formatMessage(messages['start.learning'])}
-          <div className="text-accent-a">
-            {intl.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>
-);
-
-LargeLayout.propTypes = {
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(LargeLayout);

src/base-component/MediumLayout.jsx

@@ -1,50 +0,0 @@
-import React from 'react';
-
-import { getConfig } from '@edx/frontend-platform';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Hyperlink, Image } from '@edx/paragon';
-import classNames from 'classnames';
-
-import messages from './messages';
-
-const MediumLayout = ({ intl }) => (
-  <>
-    <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',
-                { 'ml-4.5': getConfig().SITE_NAME !== 'edX' },
-              )}
-            >
-              <span className="mr-2">{intl.formatMessage(messages['start.learning'])}</span>
-              <span className="text-accent-a d-inline-block">
-                {intl.formatMessage(messages['with.site.name'], { siteName: getConfig().SITE_NAME })}
-              </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>
-  </>
-);
-
-MediumLayout.propTypes = {
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(MediumLayout);

src/base-component/SmallLayout.jsx

@@ -1,39 +0,0 @@
-import React from 'react';
-
-import { getConfig } from '@edx/frontend-platform';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Hyperlink, Image } from '@edx/paragon';
-import classNames from 'classnames';
-
-import messages from './messages';
-
-const SmallLayout = ({ intl }) => (
-  <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 mb-3 mt-3 mr-3">
-        <div className={classNames({ 'small-yellow-line mr-n2.5': getConfig().SITE_NAME === 'edX' })} />
-        <h1
-          className={classNames(
-            'text-white mt-3.5 mb-3.5',
-            { 'ml-4.5': getConfig().SITE_NAME !== 'edX' },
-          )}
-        >
-          <span className="mr-1">{intl.formatMessage(messages['start.learning'])}</span>
-          <span className="text-accent-a d-inline-block">
-            {intl.formatMessage(messages['with.site.name'], { siteName: getConfig().SITE_NAME })}
-          </span>
-        </h1>
-      </div>
-    </div>
-  </span>
-);
-
-SmallLayout.propTypes = {
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(SmallLayout);

src/base-component/index.jsx

@@ -1 +0,0 @@
-export { default } from './BaseComponent';

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

@@ -3,16 +3,14 @@ import React from 'react';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { mount } from 'enzyme';
 
-import LargeLayout from '../LargeLayout';
-import MediumLayout from '../MediumLayout';
-import SmallLayout from '../SmallLayout';
+import { DefaultLargeLayout, DefaultMediumLayout, DefaultSmallLayout } from './index';
 
-describe('ScreenLayout', () => {
-  it('should display the form, pass as a child in SmallScreenLayout', () => {
+describe('Default Layout tests', () => {
+  it('should display the form passed as a child in SmallScreenLayout', () => {
     const smallScreen = mount(
       <IntlProvider locale="en">
         <div>
-          <SmallLayout />
+          <DefaultSmallLayout />
           <form>
             <input type="text" />
           </form>
@@ -22,11 +20,11 @@ describe('ScreenLayout', () => {
     expect(smallScreen.find('form').exists()).toEqual(true);
   });
 
-  it('should display the form, pass as a child in MediumScreenLayout', () => {
+  it('should display the form passed as a child in MediumScreenLayout', () => {
     const mediumScreen = mount(
       <IntlProvider locale="en">
         <div>
-          <MediumLayout />
+          <DefaultMediumLayout />
           <form>
             <input type="text" />
           </form>
@@ -36,11 +34,11 @@ describe('ScreenLayout', () => {
     expect(mediumScreen.find('form').exists()).toEqual(true);
   });
 
-  it('should display the form, pass as a child in LargeScreenLayout', () => {
+  it('should display the form passed as a child in LargeScreenLayout', () => {
     const largeScreen = mount(
       <IntlProvider locale="en">
         <div>
-          <LargeLayout />
+          <DefaultLargeLayout />
           <form>
             <input type="text" />
           </form>

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

@@ -0,0 +1,45 @@
+import React from 'react';
+
+import { getConfig } from '@edx/frontend-platform';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Hyperlink, Image } from '@edx/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;

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

@@ -0,0 +1,50 @@
+import React from 'react';
+
+import { getConfig } from '@edx/frontend-platform';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Hyperlink, Image } from '@edx/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',
+                  { 'ml-4.5': getConfig().SITE_NAME !== 'edX' },
+                )}
+              >
+                <span className="mr-2">{formatMessage(messages['start.learning'])}</span>
+                <span className="text-accent-a d-inline-block">
+                  {formatMessage(messages['with.site.name'], { siteName: getConfig().SITE_NAME })}
+                </span>
+              </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;

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

@@ -0,0 +1,39 @@
+import React from 'react';
+
+import { getConfig } from '@edx/frontend-platform';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Hyperlink, Image } from '@edx/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 mb-3 mt-3 mr-3">
+          <div className={classNames({ 'small-yellow-line mr-n2.5': getConfig().SITE_NAME === 'edX' })} />
+          <h1
+            className={classNames(
+              'text-white mt-3.5 mb-3.5',
+              { 'ml-4.5': getConfig().SITE_NAME !== 'edX' },
+            )}
+          >
+            <span className="mr-1">{formatMessage(messages['start.learning'])}</span>
+            <span className="text-accent-a d-inline-block">
+              {formatMessage(messages['with.site.name'], { siteName: getConfig().SITE_NAME })}
+            </span>
+          </h1>
+        </div>
+      </div>
+    </span>
+  );
+};
+
+export default SmallLayout;

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

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

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

@@ -0,0 +1,16 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  'start.learning': {
+    id: 'start.learning',
+    defaultMessage: 'Start learning',
+    description: 'Header text for logistration MFE pages',
+  },
+  'with.site.name': {
+    id: 'with.site.name',
+    defaultMessage: 'with {siteName}',
+    description: 'Header text with site name for logistration MFE pages',
+  },
+});
+
+export default messages;

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

@@ -0,0 +1,34 @@
+import React from 'react';
+
+import { getConfig } from '@edx/frontend-platform';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Hyperlink, Image } from '@edx/paragon';
+
+import messages from './messages';
+
+const ExtraSmallLayout = () => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <span
+      className="w-100 bg-primary-500 banner__image extra-small-layout"
+      style={{ backgroundImage: `url(${getConfig().BANNER_IMAGE_EXTRA_SMALL})` }}
+    >
+      <Hyperlink destination={getConfig().MARKETING_SITE_BASE_URL}>
+        <Image className="company-logo" alt={getConfig().SITE_NAME} src={getConfig().LOGO_WHITE_URL} />
+      </Hyperlink>
+      <div className="ml-4.5 mr-1 pb-3.5 pt-3.5">
+        <h1 className="banner__heading">
+          <span className="text-light-500">
+            {formatMessage(messages['your.career.turning.point'])}{' '}
+          </span>
+          <span className="text-warning-300">
+            {formatMessage(messages['is.here'])}
+          </span>
+        </h1>
+      </div>
+    </span>
+  );
+};
+
+export default ExtraSmallLayout;

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

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import { getConfig } from '@edx/frontend-platform';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Hyperlink, Image } from '@edx/paragon';
+
+import './index.scss';
+import messages from './messages';
+
+const LargeLayout = () => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <div
+      className="w-50 bg-primary-500 banner__image large-layout"
+      style={{ backgroundImage: `url(${getConfig().BANNER_IMAGE_LARGE})` }}
+    >
+      <Hyperlink destination={getConfig().MARKETING_SITE_BASE_URL}>
+        <Image className="company-logo position-absolute" alt={getConfig().SITE_NAME} src={getConfig().LOGO_WHITE_URL} />
+      </Hyperlink>
+      <div className="min-vh-100 p-5 d-flex align-items-end">
+        <h1 className="display-2 mw-sm mb-3 d-flex flex-column flex-shrink-0 justify-content-center">
+          <span className="text-light-500">
+            {formatMessage(messages['your.career.turning.point'])}
+          </span>
+          <span className="text-warning-300">
+            {formatMessage(messages['is.here'])}
+          </span>
+        </h1>
+      </div>
+    </div>
+  );
+};
+
+export default LargeLayout;

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

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import { getConfig } from '@edx/frontend-platform';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Hyperlink, Image } from '@edx/paragon';
+
+import './index.scss';
+import messages from './messages';
+
+const MediumLayout = () => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <div
+      className="w-100 mb-3 bg-primary-500 banner__image medium-layout"
+      style={{ backgroundImage: `url(${getConfig().BANNER_IMAGE_MEDIUM})` }}
+    >
+      <Hyperlink destination={getConfig().MARKETING_SITE_BASE_URL}>
+        <Image className="company-logo" alt={getConfig().SITE_NAME} src={getConfig().LOGO_WHITE_URL} />
+      </Hyperlink>
+      <div className="ml-5 pb-4 pt-4">
+        <h1 className="display-2 banner__heading">
+          <span className="text-light-500">
+            {formatMessage(messages['your.career.turning.point'])}{' '}
+          </span>
+          <span className="text-warning-300 d-inline-block">
+            {formatMessage(messages['is.here'])}
+          </span>
+        </h1>
+      </div>
+    </div>
+  );
+};
+
+export default MediumLayout;

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

@@ -0,0 +1,34 @@
+import React from 'react';
+
+import { getConfig } from '@edx/frontend-platform';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Hyperlink, Image } from '@edx/paragon';
+
+import messages from './messages';
+
+const SmallLayout = () => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <span
+      className="w-100 bg-primary-500 banner__image small-layout"
+      style={{ backgroundImage: `url(${getConfig().BANNER_IMAGE_SMALL})` }}
+    >
+      <Hyperlink destination={getConfig().MARKETING_SITE_BASE_URL}>
+        <Image className="company-logo" alt={getConfig().SITE_NAME} src={getConfig().LOGO_WHITE_URL} />
+      </Hyperlink>
+      <div className="ml-5 mr-1 pb-3.5 pt-3.5">
+        <h1 className="display-2">
+          <span className="text-light-500">
+            {formatMessage(messages['your.career.turning.point'])}{' '}
+          </span>
+          <span className="text-warning-300">
+            {formatMessage(messages['is.here'])}
+          </span>
+        </h1>
+      </div>
+    </span>
+  );
+};
+
+export default SmallLayout;

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

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

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

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

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

@@ -0,0 +1,16 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  'your.career.turning.point': {
+    id: 'your.career.turning.point',
+    defaultMessage: 'Your career turning point',
+    description: 'Part of the heading "Your career turning point is here." shown on Authn MFE',
+  },
+  'is.here': {
+    id: 'is.here',
+    defaultMessage: 'is here.',
+    description: 'Part of the heading "Your career turning point is here." shown on Authn MFE',
+  },
+});
+
+export default messages;

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

@@ -0,0 +1,49 @@
+import React from 'react';
+
+import { getConfig } from '@edx/frontend-platform';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Hyperlink, Image } from '@edx/paragon';
+import PropTypes from 'prop-types';
+
+import messages from './messages';
+
+const LargeLayout = ({ username }) => {
+  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, username })}
+            </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 = {
+  username: PropTypes.string.isRequired,
+};
+
+export default LargeLayout;

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

@@ -0,0 +1,52 @@
+import React from 'react';
+
+import { getConfig } from '@edx/frontend-platform';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Hyperlink, Image } from '@edx/paragon';
+import PropTypes from 'prop-types';
+
+import messages from './messages';
+
+const MediumLayout = ({ username }) => {
+  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, username })}
+              </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 = {
+  username: PropTypes.string.isRequired,
+};
+
+export default MediumLayout;

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

@@ -0,0 +1,41 @@
+import React from 'react';
+
+import { getConfig } from '@edx/frontend-platform';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Hyperlink, Image } from '@edx/paragon';
+import PropTypes from 'prop-types';
+
+import messages from './messages';
+
+const SmallLayout = ({ username }) => {
+  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 mb-3 mt-3 mr-3">
+        <div className="small-yellow-line mt-4.5" />
+        <div>
+          <h1 className="h5 data-hj-suppress">
+            {formatMessage(messages['welcome.to.platform'], { siteName: getConfig().SITE_NAME, username })}
+          </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 = {
+  username: PropTypes.string.isRequired,
+};
+
+export default SmallLayout;

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

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