Skip to content

Enterprise theming changes #6

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ssurendrannair merged 9 commits into from
Feb 20, 2026
Merged

Enterprise theming changes #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
61573be
Merge pull request #4 from edx/AUT-17-update-auth-mfe-to-support-ente…
ssurendrannair Feb 16, 2026
c7f3b09
feat: frontend changes for enterprise theming
ssurendrannair Jan 21, 2026
47d5ba4
fix: code changes for passing tests
ssurendrannair Feb 20, 2026
f8aecd1
fix: code changes for passing tests
ssurendrannair Feb 20, 2026
ca9381f
fix: code changes for passing tests
ssurendrannair Feb 20, 2026
525490d
fix: code changes for passing tests
ssurendrannair Feb 20, 2026
540f0de
fix: code changes for passing tests
ssurendrannair Feb 20, 2026
b263afe
fix: code changes for passing tests
ssurendrannair Feb 20, 2026
f596838
fix: code changes for passing tests
ssurendrannair Feb 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
88 changes: 67 additions & 21 deletions src/base-container/components/welcome-page-layout/LargeLayout.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,38 +1,88 @@
import React from 'react';
import { useSelector } from 'react-redux';

import { getConfig } from '@edx/frontend-platform';
import { useIntl } from '@edx/frontend-platform/i18n';
import { Hyperlink, Image } from '@openedx/paragon';
import PropTypes from 'prop-types';
import classNames from 'classnames';

import messages from './messages';

const LargeLayout = ({ fullName }) => {
const LargeLayout = () => {
Copy link

Copilot AI Feb 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The BaseContainer component passes a fullName prop to the layout components, but this component has been refactored to no longer accept this prop. This will generate React PropTypes warnings in development and the fullName is never used. Either update BaseContainer to not pass fullName to these components, or add PropTypes validation to handle it gracefully.

Copilot uses AI. Check for mistakes.
const { formatMessage } = useIntl();

const enterpriseBranding = useSelector(
state => state.commonComponents?.thirdPartyAuthContext?.enterpriseBranding,
);

const enterpriseLogoUrl = enterpriseBranding?.enterpriseLogoUrl || null;
const enterpriseName = enterpriseBranding?.enterpriseName || null;

const enterpriseWelcomeHtml = enterpriseBranding?.enterpriseBrandedWelcomeString
|| enterpriseBranding?.platformWelcomeString
|| '';

const siteName = getConfig().SITE_NAME;
const baseLogoSrc = getConfig().LOGO_WHITE_URL || getConfig().LOGO_URL;

return (
<div className="w-50 d-flex">
<div className="col-md-10 bg-light-200 p-0">
<div className="col-md-10 bg-primary-400 auth-hero-left position-relative">
{/* base edX logo at very top-left */}
<Hyperlink destination={getConfig().MARKETING_SITE_BASE_URL}>
<Image className="logo position-absolute" alt={getConfig().SITE_NAME} src={getConfig().LOGO_URL} />
<Image
className="logo auth-hero-base-logo"
alt={siteName}
src={baseLogoSrc}
/>
</Hyperlink>
<div className="min-vh-100 d-flex align-items-center">
<div className="large-screen-left-container mr-n4.5 large-yellow-line mt-5" />
<div>
<h1 className="welcome-to-platform data-hj-suppress">
{formatMessage(messages['welcome.to.platform'], { siteName: getConfig().SITE_NAME, fullName })}
</h1>
<h2 className="complete-your-profile">
{formatMessage(messages['complete.your.profile.1'])}
<div className="text-accent-a">
{formatMessage(messages['complete.your.profile.2'])}

{/* main hero content block, aligned like Figma */}
<div className="auth-hero-content d-flex flex-column">
{/* row: [enterprise logo] [yellow slash] [Start learning with edX] */}
<div className="d-flex align-items-center">
{enterpriseLogoUrl && (
<div className="auth-hero-enterprise-logo-wrapper mr-4">
<Image
alt={enterpriseName || 'Enterprise'}
src={enterpriseLogoUrl}
className="auth-hero-enterprise-logo"
/>
</div>
)}

<div className="auth-hero-slash mr-4" aria-hidden="true" />

<div className="auth-hero-heading">
<div
className={classNames(
'auth-hero-heading-line text-white',
)}
>
{formatMessage(messages['start.learning'])}
</div>
</h2>
<div className="auth-hero-heading-line text-accent-a">
{formatMessage(messages['with.edx'])}
Copy link

Copilot AI Feb 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Inconsistent messaging across different layout sizes. SmallLayout and MediumLayout use messages['with.site.name'] with dynamic siteName, while LargeLayout uses messages['with.edx'] with hard-coded " with edX" text. This creates an inconsistent user experience where the message changes based on screen size. Use the same message pattern across all layouts for consistency, preferably messages['with.site.name'] to support different site configurations.

Suggested change
{formatMessage(messages['with.edx'])}
{formatMessage(messages['with.site.name'], { siteName })}

Copilot uses AI. Check for mistakes.
</div>
Comment on lines +56 to +66
Copy link

Copilot AI Feb 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The hero heading is rendered using <div>s instead of semantic headings. Please consider restoring <h1>/<h2> (or adding proper heading roles) so assistive tech can interpret the page structure correctly.

Copilot uses AI. Check for mistakes.
</div>
</div>

{/* enterprise-specific message aligned under heading */}
{enterpriseWelcomeHtml && (
<div
className="auth-hero-message mt-4"
dangerouslySetInnerHTML={{ __html: enterpriseWelcomeHtml }}

Check warning on line 74 in src/base-container/components/welcome-page-layout/LargeLayout.jsx

View workflow job for this annotation

GitHub Actions / tests 

Dangerous property 'dangerouslySetInnerHTML' found
Copy link

Copilot AI Feb 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The use of dangerouslySetInnerHTML with enterpriseWelcomeHtml from backend data creates a Cross-Site Scripting (XSS) vulnerability. If the backend data is compromised or contains malicious content, it could execute arbitrary JavaScript in users' browsers. Consider using a sanitization library like DOMPurify to sanitize the HTML before rendering, or better yet, use a safer rendering approach that doesn't require raw HTML insertion.

Copilot uses AI. Check for mistakes.
/>
Comment on lines +71 to +75
Copy link

Copilot AI Feb 19, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Security: Using dangerouslySetInnerHTML with enterpriseWelcomeHtml without sanitization can expose the application to XSS vulnerabilities. The HTML content comes from enterpriseBranding?.enterpriseBrandedWelcomeString or enterpriseBranding?.platformWelcomeString which appears to come from backend data. Ensure this content is properly sanitized on the backend, or use a sanitization library like DOMPurify on the frontend before rendering.

Copilot uses AI. Check for mistakes.
Comment on lines +71 to +75
Copy link

Copilot AI Feb 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Using dangerouslySetInnerHTML without sanitization is a security risk. The enterpriseWelcomeHtml contains HTML from enterpriseBrandedWelcomeString or platformWelcomeString which could potentially include malicious scripts. Consider sanitizing the HTML content using a library like DOMPurify before rendering it.

Copilot uses AI. Check for mistakes.
)}
</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">

{/* keep existing right decorative triangle */}
<div className="col-md-3 bg-white p-0">
Copy link

Copilot AI Feb 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The column width has changed from col-md-2 to col-md-3, which alters the layout proportions. The left column is still col-md-10, so the total is now 13 columns instead of 12, which exceeds Bootstrap's 12-column grid system. This will cause layout issues. Either change the left column to col-md-9 or change the right column back to col-md-2 to maintain a valid 12-column grid.

Suggested change
<div className="col-md-3 bg-white p-0">
<div className="col-md-2 bg-white p-0">

Copilot uses AI. Check for mistakes.
<svg
className="m1-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>
Expand All @@ -42,8 +92,4 @@
);
};

LargeLayout.propTypes = {
fullName: PropTypes.string.isRequired,
};

export default LargeLayout;
74 changes: 54 additions & 20 deletions src/base-container/components/welcome-page-layout/MediumLayout.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,40 +1,78 @@
import React from 'react';
import { useSelector } from 'react-redux';

import { getConfig } from '@edx/frontend-platform';
import { useIntl } from '@edx/frontend-platform/i18n';
import { Hyperlink, Image } from '@openedx/paragon';
import PropTypes from 'prop-types';

import messages from './messages';

const MediumLayout = ({ fullName }) => {
const MediumLayout = () => {
Copy link

Copilot AI Feb 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The BaseContainer component passes a fullName prop to the layout components, but this component has been refactored to no longer accept this prop. This will generate React PropTypes warnings in development and the fullName is never used. Either update BaseContainer to not pass fullName to these components, or add PropTypes validation to handle it gracefully.

Copilot uses AI. Check for mistakes.
const { formatMessage } = useIntl();

const enterpriseBranding = useSelector(
state => state.commonComponents?.thirdPartyAuthContext?.enterpriseBranding,
);

const enterpriseLogoUrl = enterpriseBranding?.enterpriseLogoUrl || null;
const enterpriseName = enterpriseBranding?.enterpriseName || null;
const enterpriseWelcomeHtml = enterpriseBranding?.enterpriseBrandedWelcomeString
|| enterpriseBranding?.platformWelcomeString
|| '';

const siteName = getConfig().SITE_NAME;
const baseLogoSrc = getConfig().LOGO_WHITE_URL || getConfig().LOGO_URL;

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">
<div className="col-md-10 bg-primary-400 auth-hero-left">
<Hyperlink destination={getConfig().MARKETING_SITE_BASE_URL}>
<Image className="logo" alt={getConfig().SITE_NAME} src={getConfig().LOGO_URL} />
<Image className="logo auth-hero-base-logo" alt={siteName} src={baseLogoSrc} />
</Hyperlink>
<div className="d-flex align-items-center justify-content-center mb-4 ml-5">
<div className="medium-yellow-line mt-5 mr-n2" />
<div>
<h1 className="h3 data-hj-suppress mw-320">
{formatMessage(messages['welcome.to.platform'], { siteName: getConfig().SITE_NAME, fullName })}
</h1>
<h2 className="display-1">
{formatMessage(messages['complete.your.profile.1'])}
<div className="text-accent-a">
{formatMessage(messages['complete.your.profile.2'])}

<div className="auth-hero-content d-flex flex-column">
<div className="d-flex align-items-center">
{enterpriseLogoUrl && (
<div className="auth-hero-enterprise-logo-wrapper mr-4">
<Image
alt={enterpriseName || 'Enterprise'}
src={enterpriseLogoUrl}
className="auth-hero-enterprise-logo"
/>
</div>
)}

<div className="auth-hero-slash" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" width="191" height="250" viewBox="0 0 191 250" fill="none" style={{ width: '100%', height: '100%' }}>
Copy link

Copilot AI Feb 19, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Best practice: Inline styles are used for the SVG. Consider moving these styles to CSS for better maintainability and consistency with the rest of the codebase styling approach.

Suggested change
<svg xmlns="http://www.w3.org/2000/svg" width="191" height="250" viewBox="0 0 191 250" fill="none" style={{ width: '100%', height: '100%' }}>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 191 250" fill="none">

Copilot uses AI. Check for mistakes.
<line x1="69.8107" y1="33.833" x2="32.9503" y2="206.952" stroke="#F0CC00" strokeWidth="8" />
</svg>
</div>

<div className="auth-hero-heading">
<div className="auth-hero-heading-line text-white">
{formatMessage(messages['start.learning'])}
</div>
<div className="auth-hero-heading-line text-accent-a">
{formatMessage(messages['with.site.name'], { siteName })}
</div>
</h2>
</div>
Comment on lines +53 to +60
Copy link

Copilot AI Feb 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This hero heading uses <div> elements rather than semantic headings. For accessibility and SEO, consider using <h1>/<h2> (or role="heading" with aria-level) so screen readers can correctly navigate the page structure.

Copilot uses AI. Check for mistakes.
</div>

{enterpriseWelcomeHtml && (
<div
className="auth-hero-message mt-4"
// eslint-disable-next-line react/no-danger
dangerouslySetInnerHTML={{
__html: enterpriseWelcomeHtml,
}}
/>
Comment on lines +63 to +70
Copy link

Copilot AI Feb 19, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Security: Using dangerouslySetInnerHTML with enterpriseWelcomeHtml without sanitization can expose the application to XSS vulnerabilities. The HTML content comes from enterpriseBranding?.enterpriseBrandedWelcomeString or enterpriseBranding?.platformWelcomeString which appears to come from backend data. Ensure this content is properly sanitized on the backend, or use a sanitization library like DOMPurify on the frontend before rendering.

Copilot uses AI. Check for mistakes.
Comment on lines +63 to +70
Copy link

Copilot AI Feb 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Using dangerouslySetInnerHTML without sanitization is a security risk. The enterpriseWelcomeHtml contains HTML from enterpriseBrandedWelcomeString or platformWelcomeString which could potentially include malicious scripts. Consider sanitizing the HTML content using a library like DOMPurify before rendering it.

Copilot uses AI. Check for mistakes.
)}
</div>
</div>
<div className="col-md-2 bg-white p-0">
<svg className="w-100 h-100 medium-screen-svg-light" preserveAspectRatio="xMaxYMin meet">
<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>
Expand All @@ -45,8 +83,4 @@ const MediumLayout = ({ fullName }) => {
);
};

MediumLayout.propTypes = {
fullName: PropTypes.string.isRequired,
};

export default MediumLayout;
73 changes: 54 additions & 19 deletions src/base-container/components/welcome-page-layout/SmallLayout.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,41 +1,76 @@
import React from 'react';
import { useSelector } from 'react-redux';

import { getConfig } from '@edx/frontend-platform';
import { useIntl } from '@edx/frontend-platform/i18n';
import { Hyperlink, Image } from '@openedx/paragon';
import PropTypes from 'prop-types';

import messages from './messages';

const SmallLayout = ({ fullName }) => {
const SmallLayout = () => {
Copy link

Copilot AI Feb 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The BaseContainer component passes a fullName prop to the layout components (SmallLayout, MediumLayout, LargeLayout), but these components have been refactored to no longer accept this prop. This will generate React PropTypes warnings in development and the fullName is never used. Either update BaseContainer to not pass fullName to these components, or add PropTypes validation to handle it gracefully.

Copilot uses AI. Check for mistakes.
const { formatMessage } = useIntl();

const enterpriseBranding = useSelector(
state => state.commonComponents?.thirdPartyAuthContext?.enterpriseBranding,
);

const enterpriseLogoUrl = enterpriseBranding?.enterpriseLogoUrl || null;
const enterpriseName = enterpriseBranding?.enterpriseName || null;
const enterpriseWelcomeHtml = enterpriseBranding?.enterpriseBrandedWelcomeString
|| enterpriseBranding?.platformWelcomeString
|| '';

const siteName = getConfig().SITE_NAME;
const baseLogoSrc = getConfig().LOGO_WHITE_URL || getConfig().LOGO_URL;

return (
<div className="min-vw-100 bg-light-200">
<div className="min-vw-100 bg-primary-400 auth-hero-left">
<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} />
<Image className="logo-small auth-hero-base-logo" alt={siteName} src={baseLogoSrc} />
</Hyperlink>
<div className="d-flex align-items-center m-3.5">
<div className="small-yellow-line mt-4.5" />
<div>
<h1 className="h5 data-hj-suppress">
{formatMessage(messages['welcome.to.platform'], { siteName: getConfig().SITE_NAME, fullName })}
</h1>
<h2 className="h1">
{formatMessage(messages['complete.your.profile.1'])}
<div className="text-accent-a">
{formatMessage(messages['complete.your.profile.2'])}

<div className="auth-hero-content d-flex flex-column">
<div className="d-flex align-items-center">
{enterpriseLogoUrl && (
<div className="auth-hero-enterprise-logo-wrapper mr-3">
<Image
alt={enterpriseName || 'Enterprise'}
src={enterpriseLogoUrl}
className="auth-hero-enterprise-logo"
/>
</div>
)}

<div className="auth-hero-slash" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" width="191" height="250" viewBox="0 0 191 250" fill="none" style={{ width: '100%', height: '100%' }}>
Copy link

Copilot AI Feb 19, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Best practice: Inline styles are used for the SVG. Consider moving these styles to CSS for better maintainability and consistency with the rest of the codebase styling approach.

Suggested change
<svg xmlns="http://www.w3.org/2000/svg" width="191" height="250" viewBox="0 0 191 250" fill="none" style={{ width: '100%', height: '100%' }}>
<svg
xmlns="http://www.w3.org/2000/svg"
width="191"
height="250"
viewBox="0 0 191 250"
fill="none"
className="w-100 h-100"
>

Copilot uses AI. Check for mistakes.
<line x1="69.8107" y1="33.833" x2="32.9503" y2="206.952" stroke="#F0CC00" strokeWidth="8" />
</svg>
</div>
Comment on lines +45 to +49
Copy link

Copilot AI Feb 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The auth-hero-slash div has specific styling (width: 0, height: 110px, border-left: 6px) but contains an inline SVG with viewBox and percentage-based dimensions that override the container. This creates confusion about which approach is being used. Either use the border-based approach (removing the SVG) or use the SVG approach (removing the border/width/height styles). The current implementation mixes both approaches inconsistently.

Suggested change
<div className="auth-hero-slash" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" width="191" height="250" viewBox="0 0 191 250" fill="none" style={{ width: '100%', height: '100%' }}>
<line x1="69.8107" y1="33.833" x2="32.9503" y2="206.952" stroke="#F0CC00" strokeWidth="8" />
</svg>
</div>
<div className="auth-hero-slash" aria-hidden="true" />

Copilot uses AI. Check for mistakes.

<div className="auth-hero-heading">
<div className="auth-hero-heading-line text-white">
{formatMessage(messages['start.learning'])}
</div>
<div className="auth-hero-heading-line text-accent-a">
{formatMessage(messages['with.site.name'], { siteName })}
</div>
</h2>
</div>
Comment on lines +51 to +58
Copy link

Copilot AI Feb 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The hero heading is now built with <div> elements instead of semantic heading tags (<h1>, <h2>, etc.). This reduces document structure information for screen readers; consider using appropriate heading elements (and styling them) to preserve accessibility semantics.

Copilot uses AI. Check for mistakes.
</div>

{enterpriseWelcomeHtml && (
<div
className="auth-hero-message mt-3"
// eslint-disable-next-line react/no-danger
// HTML is provided by trusted enterprise branding config (sanitized upstream).
dangerouslySetInnerHTML={{

Check warning on line 66 in src/base-container/components/welcome-page-layout/SmallLayout.jsx

View workflow job for this annotation

GitHub Actions / tests 

Dangerous property 'dangerouslySetInnerHTML' found
__html: enterpriseWelcomeHtml,
}}
/>
Comment on lines +62 to +69
Copy link

Copilot AI Feb 19, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Security: Using dangerouslySetInnerHTML with enterpriseWelcomeHtml without sanitization can expose the application to XSS vulnerabilities. The HTML content comes from enterpriseBranding?.enterpriseBrandedWelcomeString or enterpriseBranding?.platformWelcomeString which appears to come from backend data. Ensure this content is properly sanitized on the backend, or use a sanitization library like DOMPurify on the frontend before rendering.

Copilot uses AI. Check for mistakes.
Comment on lines +62 to +69
Copy link

Copilot AI Feb 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Using dangerouslySetInnerHTML without sanitization is a security risk. The enterpriseWelcomeHtml contains HTML from enterpriseBrandedWelcomeString or platformWelcomeString which could potentially include malicious scripts. Consider sanitizing the HTML content using a library like DOMPurify before rendering it.

Copilot uses AI. Check for mistakes.
)}
</div>
</div>
);
};

SmallLayout.propTypes = {
fullName: PropTypes.string.isRequired,
};

export default SmallLayout;
Comment on lines +10 to 76
Copy link

Copilot AI Feb 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The SmallLayout, MediumLayout, and LargeLayout components no longer accept the fullName prop, but the BaseContainer still passes it (lines 22, 25, 28, 31, 45, 48, 51 of base-container/index.jsx). While React will ignore extra props, this creates confusion and technical debt. Update the BaseContainer to stop passing the fullName prop to these layout components since they no longer use it.

Copilot uses AI. Check for mistakes.
14 changes: 14 additions & 0 deletions src/base-container/components/welcome-page-layout/messages.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,20 @@ const messages = defineMessages({
defaultMessage: 'Welcome to {siteName}, {fullName}!',
description: 'Welcome message that appears on progressive profile page',
},
'start.learning': {
id: 'start.learning',
defaultMessage: 'Start learning',
description: 'Header text for logistration MFE pages',
},
'with.site.name': {
id: 'with.site.name',
defaultMessage: 'with {siteName}',
description: 'Header text with site name for logistration MFE pages',
},
'with.edx': {
id: 'with.edx',
defaultMessage: ' with edX',
Copy link

Copilot AI Feb 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The message 'with.edx' is missing a description field. All other messages in this file have descriptions that explain their purpose. Add a description like "description: 'Second line of header text with edX branding for logistration MFE pages'" for consistency with the codebase conventions.

Suggested change
defaultMessage: ' with edX',
defaultMessage: ' with edX',
description: 'Second line of header text with edX branding for logistration MFE pages',

Copilot uses AI. Check for mistakes.
Copy link

Copilot AI Feb 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

defaultMessage for with.edx includes a leading space (' with edX'). Since this string is rendered on its own line in LargeLayout, the leading space will be visible and may affect alignment; consider removing the leading space.

Suggested change
defaultMessage: ' with edX',
defaultMessage: 'with edX',

Copilot uses AI. Check for mistakes.
},
'complete.your.profile.1': {
id: 'complete.your.profile.1',
defaultMessage: 'Complete',
Expand Down
11 changes: 7 additions & 4 deletions src/common-components/data/reducers.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ export const defaultState = {
pipelineUserDetails: null,
errorMessage: null,
welcomePageRedirectUrl: null,
enterpriseBranding: null,
},
};

Expand All @@ -28,16 +29,18 @@ const reducer = (state = defaultState, action = {}) => {
...state,
thirdPartyAuthApiStatus: PENDING_STATE,
};
case THIRD_PARTY_AUTH_CONTEXT.SUCCESS: {
case THIRD_PARTY_AUTH_CONTEXT.SUCCESS:
return {
...state,
fieldDescriptions: action.payload.fieldDescriptions?.fields,
optionalFields: action.payload.optionalFields,
thirdPartyAuthContext: action.payload.thirdPartyAuthContext,
thirdPartyAuthContext: {
Comment on lines 33 to +37
Copy link

Copilot AI Feb 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

THIRD_PARTY_AUTH_CONTEXT.SUCCESS no longer persists countriesCodesList into the commonComponents slice. RegistrationPage reads state.commonComponents.countriesCodesList and passes it to ConfigurableRegistrationForm, which calls .length on it—so this will become undefined and can throw at runtime. Please add countriesCodesList back to defaultState and set it from action.payload.countriesCodesList in the SUCCESS branch.

Copilot uses AI. Check for mistakes.
...action.payload.thirdPartyAuthContext,
enterpriseBranding: action.payload.thirdPartyAuthContext.enterpriseBranding || null,
},
thirdPartyAuthApiStatus: COMPLETE_STATE,
countriesCodesList: action.payload.countriesCodesList,
};
}

case THIRD_PARTY_AUTH_CONTEXT.FAILURE:
return {
...state,
Expand Down
1 change: 1 addition & 0 deletions src/common-components/data/tests/reducer.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ describe('common components reducer', () => {
secondaryProviders: [],
pipelineUserDetails: null,
errorMessage: null,
enterpriseBranding: null,
},
};
const fieldDescriptions = {
Expand Down
4 changes: 2 additions & 2 deletions src/data/constants.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ export const RECOMMENDATIONS = '/recommendations';
export const PASSWORD_RESET_CONFIRM = '/password_reset_confirm/:token/';
export const PAGE_NOT_FOUND = '/notfound';
export const ENTERPRISE_LOGIN_URL = '/enterprise/login';
export const APP_NAME = 'authn';
Copy link

Copilot AI Feb 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The APP_NAME constant was changed from 'authn_mfe' to 'authn', but this change may break analytics tracking and reporting that depend on the specific 'authn_mfe' identifier. Verify that all analytics dashboards, reports, and downstream systems are updated to handle 'authn' instead of 'authn_mfe', or consider maintaining backward compatibility.

Suggested change
export const APP_NAME = 'authn';
export const APP_NAME = 'authn_mfe';

Copilot uses AI. Check for mistakes.

// Constants
export const SUPPORTED_ICON_CLASSES = ['apple', 'facebook', 'google', 'microsoft'];
Expand All @@ -35,6 +36,5 @@ export const VALID_EMAIL_REGEX = '(^[-!#$%&\'*+/=?^_`{}|~0-9A-Z]+(\\.[-!#$%&\'*+

// Query string parameters that can be passed to LMS to manage
// things like auto-enrollment upon login and registration.
export const AUTH_PARAMS = ['course_id', 'enrollment_action', 'course_mode', 'email_opt_in', 'purchase_workflow', 'next', 'register_for_free', 'track', 'is_account_recovery', 'variant', 'host', 'cta'];
export const AUTH_PARAMS = ['course_id', 'enrollment_action', 'course_mode', 'email_opt_in', 'purchase_workflow', 'next', 'register_for_free', 'track', 'is_account_recovery', 'variant', 'host', 'cta', 'enterprise_customer'];
export const REDIRECT = 'redirect';
export const APP_NAME = 'authn_mfe';
Loading