diff --git a/src/frontend/apps/desk/src/core/auth/UserInfo.tsx b/src/frontend/apps/desk/src/core/auth/UserInfo.tsx
new file mode 100644
index 0000000..b7270cb
--- /dev/null
+++ b/src/frontend/apps/desk/src/core/auth/UserInfo.tsx
@@ -0,0 +1,20 @@
+import { useTranslation } from 'react-i18next';
+
+import { Box, Text } from '@/components';
+import { useAuthStore } from '@/core/auth';
+
+export const UserInfo = () => {
+ const { t } = useTranslation();
+ const { authenticated, userData } = useAuthStore();
+ const userName = userData?.name || userData?.email || t('No Username');
+ const organizationName = userData?.organization?.name || '';
+
+ return authenticated ? (
+
+
+ {userName}
+ {organizationName ? ` | ${organizationName}` : ''}
+
+
+ ) : null;
+};
diff --git a/src/frontend/apps/desk/src/features/header/Header.tsx b/src/frontend/apps/desk/src/features/header/Header.tsx
index 5032ebc..c987ae2 100644
--- a/src/frontend/apps/desk/src/features/header/Header.tsx
+++ b/src/frontend/apps/desk/src/features/header/Header.tsx
@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next';
import { default as IconRegie } from '@/assets/logo-regie.svg?url';
import { Icon, StyledLink, Text } from '@/components/';
import { ButtonLogin } from '@/core/auth';
+import { UserInfo } from '@/core/auth/UserInfo';
import { useCunninghamTheme } from '@/cunningham';
import { LanguagePicker } from '@/features/language';
import { useLeftPanelStore } from '@/features/left-panel';
@@ -107,6 +108,7 @@ export const Header = () => {
flexDirection: 'row',
}}
>
+
diff --git a/src/frontend/apps/desk/src/features/left-panel/components/LeftPanel.tsx b/src/frontend/apps/desk/src/features/left-panel/components/LeftPanel.tsx
index 0fe6285..672d346 100644
--- a/src/frontend/apps/desk/src/features/left-panel/components/LeftPanel.tsx
+++ b/src/frontend/apps/desk/src/features/left-panel/components/LeftPanel.tsx
@@ -4,6 +4,7 @@ import { createGlobalStyle } from 'styled-components';
import { SeparatedSection } from '@/components/separators';
import { ButtonLogin } from '@/core';
+import { UserInfo } from '@/core/auth/UserInfo';
import { LanguagePicker } from '@/features/language';
import { useLeftPanelStore } from '../stores';
@@ -99,6 +100,7 @@ export const LeftPanel = () => {
gap: 'var(--c--theme--spacings--sm)',
}}
>
+
diff --git a/src/frontend/apps/e2e/__tests__/app-desk/siret.spec.ts b/src/frontend/apps/e2e/__tests__/app-desk/siret.spec.ts
index 590cb48..57e4f88 100644
--- a/src/frontend/apps/e2e/__tests__/app-desk/siret.spec.ts
+++ b/src/frontend/apps/e2e/__tests__/app-desk/siret.spec.ts
@@ -19,12 +19,11 @@ test.describe('OIDC interop with SIRET', () => {
});
});
-test.describe('When a commune, display commune name below user name', () => {
- test('it checks the name is added below the user name', async ({ page }) => {
- const logout = page.getByRole('button', {
- name: 'Marie Delamairie',
- });
-
- await expect(logout.getByText('Merlaut')).toBeVisible();
+test.describe('When a commune, display commune name with user name', () => {
+ test('it checks the name is added with the user name', async ({ page }) => {
+ // check the name is displayed along with the organization name : name | org name
+ await expect(
+ page.getByRole('banner').getByText('Marie Delamairie | Merlaut'),
+ ).toBeVisible();
});
});