Skip to content

[change] Fix header duplication #314 #1068

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

Open
kankaa16 wants to merge 9 commits into
base: master
Choose a base branch
from
Open

[change] Fix header duplication #314 #1068

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
e2ff5cd
Refactored Status componentDidMount logic
kankaa16 Mar 14, 2026
6a43455
Merge branch 'master' into change-status.js
kankaa16 Mar 14, 2026
7feb4c8
[change] Refactor componentDidMount logic for better maintainability …
kankaa16 Mar 14, 2026
1935f52
[change] Eliminate header HTML duplication #314
kankaa16 Mar 21, 2026
287d595
[change] Eliminate header HTML duplication #314
kankaa16 Mar 21, 2026
8f5c1b1
[change] Eliminate header HTML duplication #314
kankaa16 Mar 21, 2026
88a23cc
[change] Eliminate header HTML duplication #314
kankaa16 Mar 21, 2026
09d2ecc
[change] Eliminate header HTML duplication #314
kankaa16 Mar 21, 2026
474b205
Merge branch 'master' into fix-header-duplication
kankaa16 Mar 21, 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
36 changes: 12 additions & 24 deletions client/components/header/__snapshots__/header.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,8 +57,7 @@ exports[`<Header /> rendering should render sticky msg and close it on clicking
className="header-row-2-inner"
>
<a
className="header-link header-desktop-link
header-link-1 button"
className="header-link header-desktop-link header-link-1 button"
href="link-1/"
key="link-1/"
rel="noreferrer noopener"
Expand All @@ -67,8 +66,7 @@ exports[`<Header /> rendering should render sticky msg and close it on clicking
link-1
</a>
<a
className="header-link header-desktop-link
header-link-2 button"
className="header-link header-desktop-link header-link-2 button"
href="link-2/"
key="link-2/"
rel="noreferrer noopener"
Expand Down Expand Up @@ -133,8 +131,7 @@ exports[`<Header /> rendering should render sticky msg and close it on clicking
className="display-none header-mobile-menu"
>
<a
className="header-link mobile-link
header-link-1 button"
className="header-link mobile-link header-link-1 button"
href="link-1/"
key="link-1/"
rel="noreferrer noopener"
Expand All @@ -143,8 +140,7 @@ exports[`<Header /> rendering should render sticky msg and close it on clicking
link-1
</a>
<a
className="header-link mobile-link
header-link-2 button"
className="header-link mobile-link header-link-2 button"
href="link-2/"
key="link-2/"
rel="noreferrer noopener"
Expand Down Expand Up @@ -259,17 +255,15 @@ exports[`<Header /> rendering should render with links 1`] = `
className="header-row-2-inner"
>
<a
className="header-link header-desktop-link
header-link-1 button"
className="header-link header-desktop-link header-link-1 button"
href="link-1/"
rel="noreferrer noopener"
target="_blank"
>
link-1
</a>
<a
className="header-link header-desktop-link
header-link-2 button"
className="header-link header-desktop-link header-link-2 button"
href="link-2/"
rel="noreferrer noopener"
target="_blank"
Expand Down Expand Up @@ -334,17 +328,15 @@ exports[`<Header /> rendering should render with links 1`] = `
className="display-none header-mobile-menu"
>
<a
className="header-link mobile-link
header-link-1 button"
className="header-link mobile-link header-link-1 button"
href="link-1/"
rel="noreferrer noopener"
target="_blank"
>
link-1
</a>
<a
className="header-link mobile-link
header-link-2 button"
className="header-link mobile-link header-link-2 button"
href="link-2/"
rel="noreferrer noopener"
target="_blank"
Expand Down Expand Up @@ -565,8 +557,7 @@ exports[`<Header /> rendering with placeholder translation tags should render tr
className="header-row-2-inner"
>
<a
className="header-link header-desktop-link
header-link-1 button"
className="header-link header-desktop-link header-link-1 button"
href="/{orgSlug}/login"
key="/{orgSlug}/login"
rel="noreferrer noopener"
Expand All @@ -575,8 +566,7 @@ exports[`<Header /> rendering with placeholder translation tags should render tr
Sign In
</a>
<a
className="header-link header-desktop-link
header-link-2 button"
className="header-link header-desktop-link header-link-2 button"
href="/{orgSlug}/registration"
key="/{orgSlug}/registration"
rel="noreferrer noopener"
Expand Down Expand Up @@ -641,8 +631,7 @@ exports[`<Header /> rendering with placeholder translation tags should render tr
className="display-none header-mobile-menu"
>
<a
className="header-link mobile-link
header-link-1 button"
className="header-link mobile-link header-link-1 button"
href="/{orgSlug}/login"
key="/{orgSlug}/login"
rel="noreferrer noopener"
Expand All @@ -651,8 +640,7 @@ exports[`<Header /> rendering with placeholder translation tags should render tr
Sign In
</a>
<a
className="header-link mobile-link
header-link-2 button"
className="header-link mobile-link header-link-2 button"
href="/{orgSlug}/registration"
key="/{orgSlug}/registration"
rel="noreferrer noopener"
Expand Down
127 changes: 46 additions & 81 deletions client/components/header/header.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,21 +61,49 @@ export default class Header extends React.Component {
) : null;
};

renderLinkItem = (link, index, isMobile = false) => {
const {language, orgSlug, location, isAuthenticated, userData} = this.props;

const {pathname} = location;
const internalLinks = [`/${orgSlug}/login`, `/${orgSlug}/registration`];

if (!shouldLinkBeShown(link, isAuthenticated, userData)) return null;

const resolvedUrl = link.url.replace("{orgSlug}", orgSlug);
const isActive = pathname === resolvedUrl;

if (
isInternalLink(link.url) &&
(internalLinks.indexOf(link.url) < 0 || !isAuthenticated)
Comment thread
kankaa16 marked this conversation as resolved.
) {
return (
<Link
className={`header-link ${isMobile ? "mobile-link" : "header-desktop-link"} header-link-${index + 1}${isActive ? " active" : ""} button`}
to={resolvedUrl}
key={index}
>
{getText(link.text, language)}
</Link>
);
}

return (
<a
href={link.url}
className={`header-link ${isMobile ? "mobile-link" : "header-desktop-link"} header-link-${index + 1} button`}
target="_blank"
rel="noreferrer noopener"
key={link.url}
>
{getText(link.text, language)}
</a>
);
};
Comment thread
coderabbitai[bot] marked this conversation as resolved.

render() {
const {menu} = this.state;
const {
header,
languages,
language,
orgSlug,
setLanguage,
location,
isAuthenticated,
userData,
} = this.props;
const {header, languages, language, orgSlug, setLanguage} = this.props;
const {logo, links, second_logo: secondLogo} = header;
const {pathname} = location;
const internalLinks = [`/${orgSlug}/login`, `/${orgSlug}/registration`];
return (
<>
<div className="header-container header-desktop">
Expand Down Expand Up @@ -126,42 +154,9 @@ export default class Header extends React.Component {
<div className="header-row-2">
<div className="header-row-2-inner">
{links &&
links.map((link, index) => {
if (!shouldLinkBeShown(link, isAuthenticated, userData)) {
return null;
}
if (
isInternalLink(link.url) &&
(internalLinks.indexOf(link.url) < 0 || !isAuthenticated)
) {
return (
<Link
className={`header-link header-desktop-link
header-link-${index + 1} ${
pathname === link.url.replace("{orgSlug}", orgSlug)
? "active"
: ""
} button `}
to={link.url.replace("{orgSlug}", orgSlug)}
key={index}
>
{getText(link.text, language)}
</Link>
);
}
return (
<a
href={link.url}
className={`header-link header-desktop-link
header-link-${index + 1} button`}
target="_blank"
rel="noreferrer noopener"
key={link.url}
>
{getText(link.text, language)}
</a>
);
})}
links.map((link, index) =>
this.renderLinkItem(link, index, false),
)}
</div>
</div>
</div>
Expand Down Expand Up @@ -210,39 +205,9 @@ export default class Header extends React.Component {
className={`${menu ? "display-flex" : "display-none"} header-mobile-menu`}
>
{links &&
links.map((link, index) => {
if (shouldLinkBeShown(link, isAuthenticated, userData)) {
if (isInternalLink(link.url)) {
return (
<Link
className={`header-link mobile-link
header-link-${index + 1} ${
pathname === link.url.replace("{orgSlug}", orgSlug)
? "active"
: ""
} button`}
to={link.url.replace("{orgSlug}", orgSlug)}
key={index}
>
{getText(link.text, language)}
</Link>
);
}
return (
<a
href={link.url}
className={`header-link mobile-link
header-link-${index + 1} button`}
target="_blank"
rel="noreferrer noopener"
key={link.url}
>
{getText(link.text, language)}
</a>
);
}
return null;
})}
links.map((link, index) =>
this.renderLinkItem(link, index, true),
)}
<div className="mobile-languages-row">
{languages.map((lang) => (
<button
Expand Down
11 changes: 11 additions & 0 deletions client/components/header/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -179,3 +179,14 @@
cursor: auto;
}
}
@media (min-width: 768px) {
.mobile-only {
display: none !important;
}
}

@media (max-width: 767px) {
.desktop-only {
display: none !important;
}
}
20 changes: 15 additions & 5 deletions client/components/status/status.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -745,16 +745,26 @@ export default class Status extends React.Component {
setPlanExhausted,
} = this.props;
const {setLoading} = this.context;
const {message, type, warningMessage, showUpgradeBtn} = event.data;
const {message, type, warningMessage, showUpgradeBtn} = event.data || {};

// Only accept messages from trusted origins,
// For more info read: https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage#security_concern
const trustedOrigin =
event.origin === new URL(captivePortalLoginForm.action).origin ||
event.origin === window.location.origin;

let actionOrigin = null;

try {
if (captivePortalLoginForm.action?.trim()) {
actionOrigin = new URL(captivePortalLoginForm.action).origin;
}
} catch {
// invalid URL, ignore
}

const isTrustedOrigin =
event.origin === actionOrigin || event.origin === window.location.origin;

if (
!trustedOrigin ||
!isTrustedOrigin ||
!type ||
// internet-mode will not contain message, but message
// is required for authError and authMessage type
Expand Down
Loading
Loading