Skip to content
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

[TRA-15359] Afficher la page de connexion si l'utilisateur a été déconnecté #3729

Open
wants to merge 12 commits into
base: dev
Choose a base branch
from
Open

[TRA-15359] Afficher la page de connexion si l'utilisateur a été déconnecté #3729

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
85a5d2a
feat: started looking at bug. WIP
GaelFerrand Nov 7, 2024
acc6085
feat: added redirection to login page & displaying message
GaelFerrand Nov 7, 2024
01f20a7
fix: reverting session modification
GaelFerrand Nov 7, 2024
4b0d935
fix: fixed typo
GaelFerrand Nov 7, 2024
9ef7573
fix: wording
GaelFerrand Nov 7, 2024
2786e8f
fix: wording and CSS
GaelFerrand Nov 14, 2024
c3d37cb
Merge branch 'dev' into tra-15359
GaelFerrand Nov 14, 2024
74c40eb
Prevents client from performing requests on logout
kornifex Dec 17, 2024
36ff565
Merge branch 'dev' into tra-15359
kornifex Jan 7, 2025
869c9f3
Merge branch 'dev' into tra-15359
kornifex Jan 7, 2025
2237f4e
Reworks routing and auth routes
kornifex Jan 9, 2025
f25e73e
Reworks Header and routing
kornifex Jan 9, 2025
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
313 changes: 161 additions & 152 deletions front/src/Apps/common/Components/layout/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,12 +33,15 @@ import {

import routes from "../../../routes";
import styles from "./Header.module.scss";
import CompanySwitcher from "../CompanySwitcher/CompanySwitcher";
import CompanySwitcher, {
getDefaultOrgId
} from "../CompanySwitcher/CompanySwitcher";

export const GET_ME = gql`
{
me {
id
isAdmin
companies {
id
name
Expand Down Expand Up @@ -581,22 +584,12 @@ const getDesktopMenuEntries = (
return [...(isAuthenticated ? connected : []), ...(isAdmin ? admin : [])];
};

type HeaderProps = {
isAuthenticated: boolean;
isAdmin: boolean;
defaultOrgId?: string;
};

/**
* Main nav
* Contains External and internal links
* On mobile appear as a sliding panel and includes other items
*/
export default function Header({
isAuthenticated,
isAdmin,
defaultOrgId
}: HeaderProps) {
export default function Header() {
const { VITE_API_ENDPOINT } = import.meta.env;
const location = useLocation();
const { updatePermissions, role, permissions } = usePermissions();
Expand All @@ -611,11 +604,16 @@ export default function Header({
location.pathname
);

const { data, loading } = useQuery<Pick<Query, "me">>(GET_ME);

const isAuthenticated = !loading && data != null;
const isAdmin = isAuthenticated && Boolean(data?.me?.isAdmin);

const defaultOrgId = getDefaultOrgId(data?.me.companies ?? []);

// Catching siret from url when not available from props (just after login)
const currentSiret = matchDashboard?.params["siret"] || defaultOrgId;

const { data } = useQuery<Pick<Query, "me">>(GET_ME);

useEffect(() => {
if (isAuthenticated && data && currentSiret) {
const companies = data.me.companies;
Expand Down Expand Up @@ -648,6 +646,8 @@ export default function Header({
[navigate, role]
);

if (loading) return null;

const showRegistry =
permissions.includes(UserPermission.RegistryCanRead) &&
[UserRole.Admin, UserRole.Member].includes(role!);
Expand All @@ -673,7 +673,153 @@ export default function Header({
canViewNewRegistry
);

return !isAuthenticated ? (
return (
<>
<div id="header" className={`fr-header ${styles.header}`}>
<div className={styles.headerContent}>
<div className={`fr-enlarge-link ${styles.headerBranding}`}>
<Link to="/">
<img
src="/marianne.svg"
alt=""
style={{ height: "40px", width: "40px", marginRight: "24px" }}
/>

<img
src="/trackdechets.png"
alt="trackdechets.data.gouv.fr"
style={{ height: "40px", width: "40px" }}
/>
</Link>
</div>

<nav className={`fr-nav ${styles.headerNav}`}>
<ul
className={`fr-nav__list ${styles.headerNavList}`}
style={{ margin: "initial", maxWidth: "initial" }}
>
{menuEntries.map((e, idx) => (
<li
id={
e.caption === allBsdsMenuEntryLbl
? "header-all-bsds-link"
: ""
}
className="fr-nav__item"
key={idx}
>
<MenuLink entry={e} />
</li>
))}

<li className="fr-nav__item">
<button
className="fr-nav__btn"
style={{ width: "fit-content" }}
aria-expanded="false"
aria-controls="aidemenu"
>
Aide
</button>
<div className="fr-collapse fr-menu" id="aidemenu">
<ul className="fr-menu__list">
<li>
<a
className="fr-nav__link"
href="https://faq.trackdechets.fr/"
target="_blank"
rel="noreferrer"
>
Foire aux questions
</a>
</li>
<li>
<a
className="fr-nav__link"
href="https://sandbox.trackdechets.beta.gouv.fr/"
target="_blank"
rel="noreferrer"
>
Site de démonstration
</a>
</li>
<li>
<a
className="fr-nav__link"
href="https://trackdechets.beta.gouv.fr/"
target="_blank"
rel="noreferrer"
>
Page d'accueil / Formations
</a>
</li>
</ul>
</div>
</li>
</ul>
</nav>

<div className={styles.headerActions}>
<form
name="logout"
action={`${VITE_API_ENDPOINT}/logout`}
method="post"
>
<Button
iconId="fr-icon-logout-box-r-line"
onClick={() => {
localAuthService.locallySignOut();
document.forms["logout"].submit();
return false;
}}
priority="tertiary no outline"
title="Se déconnecter"
/>
</form>
</div>

<button
className={`fr-btn fr-btn--tertiary fr-icon-menu-fill ${styles.headerToggle}`}
data-fr-opened="false"
aria-controls="header-menu-modal-fr-header-simple-header"
aria-haspopup="menu"
id="fr-header-simple-header-menu-button"
title="Menu"
data-fr-js-modal-button="true"
>
Menu
</button>
</div>

<MobileSubNav
currentCompany={currentCompany}
canViewNewRegistry={canViewNewRegistry}
/>
</div>

{/* Company switcher on top of the page */}
{!!matchDashboard && companies && currentCompany && (
<div className={styles.companySelector}>
<div className="company-select">
<CompanySwitcher
currentOrgId={currentCompany.orgId}
companies={companies}
handleCompanyChange={handleCompanyChange}
/>
</div>
</div>
)}
</>
);
}

/**
* Main nav when logged out
* Contains External and internal links
* On mobile appear as a sliding panel and includes other items
*/
export function UnauthenticatedHeader() {
return (
<header
role="banner"
id="fr-header-with-horizontal-operator-logo"
Expand Down Expand Up @@ -852,142 +998,5 @@ export default function Header({
</div>
</div>
</header>
) : (
<>
<div id="header" className={`fr-header ${styles.header}`}>
<div className={styles.headerContent}>
<div className={`fr-enlarge-link ${styles.headerBranding}`}>
<Link to="/">
<img
src="/marianne.svg"
alt=""
style={{ height: "40px", width: "40px", marginRight: "24px" }}
/>

<img
src="/trackdechets.png"
alt="trackdechets.data.gouv.fr"
style={{ height: "40px", width: "40px" }}
/>
</Link>
</div>

<nav className={`fr-nav ${styles.headerNav}`}>
<ul
className={`fr-nav__list ${styles.headerNavList}`}
style={{ margin: "initial", maxWidth: "initial" }}
>
{menuEntries.map((e, idx) => (
<li
id={
e.caption === allBsdsMenuEntryLbl
? "header-all-bsds-link"
: ""
}
className="fr-nav__item"
key={idx}
>
<MenuLink entry={e} />
</li>
))}

<li className="fr-nav__item">
<button
className="fr-nav__btn"
style={{ width: "fit-content" }}
aria-expanded="false"
aria-controls="aidemenu"
>
Aide
</button>
<div className="fr-collapse fr-menu" id="aidemenu">
<ul className="fr-menu__list">
<li>
<a
className="fr-nav__link"
href="https://faq.trackdechets.fr/"
target="_blank"
rel="noreferrer"
>
Foire aux questions
</a>
</li>
<li>
<a
className="fr-nav__link"
href="https://sandbox.trackdechets.beta.gouv.fr/"
target="_blank"
rel="noreferrer"
>
Site de démonstration
</a>
</li>
<li>
<a
className="fr-nav__link"
href="https://trackdechets.beta.gouv.fr/"
target="_blank"
rel="noreferrer"
>
Page d'accueil / Formations
</a>
</li>
</ul>
</div>
</li>
</ul>
</nav>

<div className={styles.headerActions}>
<form
name="logout"
action={`${VITE_API_ENDPOINT}/logout`}
method="post"
>
<Button
iconId="fr-icon-logout-box-r-line"
onClick={() => {
localAuthService.locallySignOut();
document.forms["logout"].submit();
return false;
}}
priority="tertiary no outline"
title="Se déconnecter"
/>
</form>
</div>

<button
className={`fr-btn fr-btn--tertiary fr-icon-menu-fill ${styles.headerToggle}`}
data-fr-opened="false"
aria-controls="header-menu-modal-fr-header-simple-header"
aria-haspopup="menu"
id="fr-header-simple-header-menu-button"
title="Menu"
data-fr-js-modal-button="true"
>
Menu
</button>
</div>

<MobileSubNav
currentCompany={currentCompany}
canViewNewRegistry={canViewNewRegistry}
/>
</div>

{/* Company switcher on top of the page */}
{!!matchDashboard && companies && currentCompany && (
<div className={styles.companySelector}>
<div className="company-select">
<CompanySwitcher
currentOrgId={currentCompany.orgId}
companies={companies}
handleCompanyChange={handleCompanyChange}
/>
</div>
</div>
)}
</>
);
}
Loading
Loading