fix: fix useSelector usage in logistration and login component (#1203)

* fix: Registration with password that doesn't meet the requirements
---------

Co-authored-by: Dima Alipov <dimaalipov@MacBook-Pro-Dima.local>
Co-authored-by: Syed Sajjad  Hussain Shah <ssajjad@2u.com>

.env

@@ -13,18 +13,30 @@ 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=''
+# ***** Cookies *****
+USER_RETENTION_COOKIE_NAME=null
+# ***** Links *****
+LOGIN_ISSUE_SUPPORT_LINK=''
+AUTHN_PROGRESSIVE_PROFILING_SUPPORT_LINK=null
+POST_REGISTRATION_REDIRECT_URL=''
+SEARCH_CATALOG_URL=''
+# ***** Features flags *****
 DISABLE_ENTERPRISE_LOGIN=''
-REGISTER_CONVERSION_COOKIE_NAME=null
-ENABLE_PROGRESSIVE_PROFILING=''
+ENABLE_DYNAMIC_REGISTRATION_FIELDS=''
+ENABLE_PROGRESSIVE_PROFILING_ON_AUTHN=''
+ENABLE_POST_REGISTRATION_RECOMMENDATIONS=''
 MARKETING_EMAILS_OPT_IN=''
-ENABLE_COPPA_COMPLIANCE=''
-SHOW_DYNAMIC_PROFILING_PAGE=''
+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=''

.env.development

@@ -18,18 +18,26 @@ 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'
-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=''
+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,13 +16,5 @@ 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 @@
-const { createConfig } = require('@edx/frontend-build');
+// eslint-disable-next-line import/no-extraneous-dependencies
+const { createConfig } = require('@openedx/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 
-    // @edx/frontend-build from v3 to v5:
+    // to fail for no apparent reason since upgrading
+    // @openedx/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,7 +19,34 @@ 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',
   },
 });

.github/pull_request_template.md

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

.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
@@ -41,8 +40,5 @@ jobs:
     - name: Build
       run: npm run build
 
-    - name: Verify Es5
-      run: npm run is-es5
-
     - name: Run Code Coverage
-      uses: codecov/codecov-action@v2
+      uses: codecov/codecov-action@v4

.github/workflows/commitlint.yml

@@ -7,4 +7,4 @@ on:
 
 jobs:
   commitlint:
-    uses: edx/.github/.github/workflows/commitlint.yml@master
+    uses: openedx/.github/.github/workflows/commitlint.yml@master

.github/workflows/lockfileversion-check.yml

@@ -10,4 +10,4 @@ on:
 
 jobs:
   version-check:
-    uses: edx/.github/.github/workflows/lockfileversion-check.yml@master
+    uses: openedx/.github/.github/workflows/lockfile-check.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/2u-vanguards

Makefile

@@ -1,19 +1,20 @@
 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,de,de_DE,es_419,fa_IR,fr,fr_CA,hi,it,it_IT,pt,pt_PT,ru,uk,zh_CN"
 
+intl_imports = ./node_modules/.bin/intl-imports.js
 transifex_utils = ./node_modules/.bin/transifex-utils.js
 i18n = ./src/i18n
 transifex_input = $(i18n)/transifex_input.json
 
 # This directory must match .babelrc .
-transifex_temp = ./temp/babel-plugin-react-intl
+transifex_temp = ./temp/babel-plugin-formatjs
 
 precommit:
 	npm run lint
 	npm audit
 
 requirements:
-	npm install
+	npm ci
 
 i18n.extract:
 	# Pulling display strings from .jsx files into .json files...
@@ -42,11 +43,38 @@ 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 -f --mode reviewed --languages=$(transifex_langs)
+	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 $(ATLAS_OPTIONS) \
+	           translations/paragon/src/i18n/messages:paragon \
+	           translations/frontend-platform/src/i18n/messages:frontend-platform \
+	           translations/frontend-app-authn/src/i18n/messages:frontend-app-authn
 
-# This target is used by CI.
+	$(intl_imports) paragon frontend-platform frontend-app-authn
+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

@@ -1,48 +1,222 @@
-|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.
 
-Development
------------
+**What is the domain of this MFE?**
 
-Start Devstack
-^^^^^^^^^^^^^^
+- Register page
 
-To use this application `devstack <https://github.com/edx/devstack>`__ must be running.
+- Login page
 
--  Start devstack
+- Forgot password page
 
-Start the development server
-^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+- Reset password page
 
-In this project, install requirements and start the development server by running:
+- Progressive profiling page
 
-.. code:: bash
+***************
+Getting Started
+***************
 
-   npm install
-   npm start # The server will run on port 1999
+Installation
+============
 
-Once the dev server is up visit http://localhost:1999/login.
+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.
 
-Configuration and Deployment
-----------------------------
+1. Install Devstack using the `Getting Started <https://github.com/openedx/devstack#getting-started>`_ instructions.
 
-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:
+2. Start up LMS, if it's not already started.
 
-.. code:: bash
+4. Within this project (frontend-app-authn), install requirements and start the development server:
 
-   NODE_ENV=development ACCESS_TOKEN_COOKIE_NAME='edx-jwt-cookie-header-payload' npm run build
+   .. code-block::
 
+      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://github.com/edx/edx-developer-docs/blob/5191e800bf16cf42f25c58c58f983bdaf7f9305d/docs/micro-frontends-in-open-edx.rst>`__.
+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.
+
+
+==============================
 
 .. |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
-.. |license| image:: https://img.shields.io/npm/l/@edx/frontend-app-authn.svg
-   :target: @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

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:2u-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

docs/how_tos/enable_social_auth.rst

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

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/edx/frontend-platform/blob/master/docs/how_tos/i18n.rst
+This document has moved to the frontend-platform repo: https://github.com/openedx/frontend-platform/blob/master/docs/how_tos/i18n.rst

docs/how_tos/modifying_base_container.rst

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

jest.config.js

@@ -1,4 +1,4 @@
-const { createConfig } = require('@edx/frontend-build');
+const { createConfig } = require('@openedx/frontend-build');
 
 module.exports = createConfig('jest', {
   setupFiles: [
@@ -10,4 +10,5 @@ module.exports = createConfig('jest', {
     'src/index.jsx',
     'MainApp.jsx',
   ],
+  testEnvironment: 'jsdom',
 });

openedx.yaml

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

package.json

@@ -4,16 +4,14 @@
   "description": "Frontend application template",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/edx/frontend-app-authn.git"
+    "url": "git+https://github.com/openedx/frontend-app-authn.git"
   },
   "browserslist": [
-    "last 2 versions",
-    "ie 11"
+    "extends @edx/browserslist-config"
   ],
   "scripts": {
     "build": "fedx-scripts webpack",
-    "i18n_extract": "BABEL_ENV=i18n fedx-scripts babel src --quiet > /dev/null",
-    "is-es5": "es-check es5 ./dist/*.js",
+    "i18n_extract": "fedx-scripts formatjs extract",
     "lint": "fedx-scripts eslint --ext .js --ext .jsx .",
     "snapshot": "fedx-scripts jest --updateSnapshot",
     "start": "fedx-scripts webpack-dev-server --progress",
@@ -26,67 +24,62 @@
   },
   "author": "edX",
   "license": "AGPL-3.0",
-  "homepage": "https://github.com/edx/frontend-app-authn#readme",
+  "homepage": "https://github.com/openedx/frontend-app-authn#readme",
   "publishConfig": {
     "access": "public"
   },
   "bugs": {
-    "url": "https://github.com/edx/frontend-app-authn/issues"
+    "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.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",
+    "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
+    "@edx/frontend-platform": "7.1.1",
+    "@edx/openedx-atlas": "^0.6.0",
+    "@fortawesome/fontawesome-svg-core": "6.5.1",
+    "@fortawesome/free-brands-svg-icons": "6.5.1",
+    "@fortawesome/free-solid-svg-icons": "6.5.1",
+    "@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.0",
+    "fastest-levenshtein": "1.0.16",
+    "form-urlencoded": "6.1.4",
     "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.1",
-    "react-redux": "7.2.6",
+    "react-loading-skeleton": "3.4.0",
+    "react-redux": "7.2.9",
     "react-responsive": "8.2.0",
-    "react-router": "5.2.1",
-    "react-router-dom": "5.3.0",
-    "redux": "4.1.2",
-    "@redux-devtools/extension": "3.2.2",
+    "react-router": "6.22.3",
+    "react-router-dom": "6.22.3",
+    "react-zendesk": "^0.1.13",
+    "redux": "4.2.0",
     "redux-logger": "3.0.6",
     "redux-mock-store": "1.5.4",
-    "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.4",
+    "redux-saga": "1.3.0",
+    "redux-thunk": "2.4.2",
+    "regenerator-runtime": "0.14.1",
+    "reselect": "4.1.8",
     "universal-cookie": "4.0.4"
   },
   "devDependencies": {
-    "@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",
+    "@edx/browserslist-config": "^1.1.1",
+    "@edx/reactifex": "1.1.0",
+    "@openedx/frontend-build": "13.0.28",
+    "babel-plugin-formatjs": "10.5.13",
+    "eslint-plugin-import": "2.29.1",
+    "glob": "7.2.3",
     "history": "5.3.0",
     "husky": "7.0.4",
-    "jest": "27.5.1",
-    "react-test-renderer": "16.14.0"
+    "jest": "29.7.0",
+    "react-test-renderer": "^17.0.2"
   }
 }

public/index.html

@@ -1,10 +1,15 @@
 <!doctype html>
 <html lang="en-us">
   <head>
-      <title>Authn | edX</title>
+      <title><%= (process.env.SITE_NAME && process.env.SITE_NAME != 'null') ? 'Authentication | ' + process.env.SITE_NAME : 'Authentication' %></title>    
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
-      <link rel="shortcut icon" href="<%=htmlWebpackPlugin.options.FAVICON_URL%>" type="image/x-icon" />
+      <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>
       <% if (process.env.OPTIMIZELY_URL) { %>
         <script
           src="<%= process.env.OPTIMIZELY_URL %>"
@@ -14,58 +19,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

@@ -1,44 +1,62 @@
 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 {
-  UnAuthOnlyRoute, registerIcons, NotFoundPage, Logistration,
+  EmbeddedRegistrationRoute, NotFoundPage, registerIcons, UnAuthOnlyRoute, Zendesk,
 } from './common-components';
-import {
-  LOGIN_PAGE, PAGE_NOT_FOUND, REGISTER_PAGE, RESET_PAGE, PASSWORD_RESET_CONFIRM, WELCOME_PAGE,
-} from './data/constants';
 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,
+} from './data/constants';
 import { updatePathWithQueryParams } from './data/utils';
-import ForgotPasswordPage from './forgot-password';
-import ResetPasswordPage from './reset-password';
-import WelcomePage, { ProgressiveProfiling } from './welcome';
+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 './index.scss';
 
 registerIcons();
 
 const MainApp = () => (
   <AppProvider store={configureStore()}>
-    <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} />
+    <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)} />} />
       <Route
-        exact
-        path={WELCOME_PAGE}
-        component={(getConfig().SHOW_DYNAMIC_PROFILING_PAGE) ? ProgressiveProfiling : WelcomePage}
+        path={REGISTER_EMBEDDED_PAGE}
+        element={<EmbeddedRegistrationRoute><RegistrationPage /></EmbeddedRegistrationRoute>}
       />
-      <Route path={PAGE_NOT_FOUND} component={NotFoundPage} />
-      <Route path="*">
-        <Redirect to={PAGE_NOT_FOUND} />
-      </Route>
-    </Switch>
+      <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/_style.scss

@@ -1,887 +0,0 @@
-// ----------------------------
-// #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;
-    z-index: 100 !important;
-}
-
-.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-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;
-}

src/base-component/AuthExtraLargeLayout.jsx

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

src/base-component/AuthMediumLayout.jsx

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

src/base-component/AuthSmallLayout.jsx

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

src/base-component/BaseComponent.jsx

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

src/base-component/DiscountBanner.jsx

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

src/base-component/LargeLayout.jsx

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

src/base-component/LargeLeftLayout.jsx

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

src/base-component/MediumLayout.jsx

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

src/base-component/SideDiscountBanner.jsx

@@ -1,38 +0,0 @@
-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>
-  );
-}

src/base-component/SmallLayout.jsx

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

src/base-component/index.jsx

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

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

@@ -1,51 +0,0 @@
-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);
-  });
-});

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

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

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

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

src/base-container/components/default-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 '@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;

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

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