# HG changeset patch
# User ogiorgis <olivier.giorgis@logilab.fr>
# Date 1711020127 -3600
#      Thu Mar 21 12:22:07 2024 +0100
# Node ID 1cac0650a32e6f841d4f4c8776e43caa078f2f6e
# Parent  8338eb6ceaef611d948e602d6d542564216c18e1
feat: add user name in login menu

diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
--- a/frontend/src/components/Header.tsx
+++ b/frontend/src/components/Header.tsx
@@ -1,4 +1,5 @@
 import { useState } from "react";
+import { useClient } from "@/context/ClientContext";
 import {
   AppBar,
   Box,
@@ -9,7 +10,8 @@
   Toolbar,
   Typography,
 } from "@mui/material";
-import AccountCircle from "@mui/icons-material/AccountCircle";
+
+import { AccountCircle, Logout } from "@mui/icons-material";
 import Link from "next/link";
 import Image from "next/image";
 import { usePathname } from "next/navigation";
@@ -20,9 +22,15 @@
   const loggedIn = pathname !== "/login";
   const logout = useApiLogout();
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const client = useClient();
+  const [currentUserName, setCurrentUserName] = useState<string | undefined>(
+    undefined,
+  );
 
-  const handleMenu = (event: React.MouseEvent<HTMLElement>) => {
+  const handleMenu = async (event: React.MouseEvent<HTMLElement>) => {
     setAnchorEl(event.currentTarget);
+    const currentUser = await client.currentUser();
+    setCurrentUserName(currentUser.login);
   };
 
   const handleClose = () => {
@@ -82,7 +90,14 @@
               open={Boolean(anchorEl)}
               onClose={handleClose}
             >
-              <MenuItem onClick={logout}>Déconnexion</MenuItem>
+              <Typography style={{ textAlign: "center" }}>
+                {currentUserName}
+              </Typography>
+              <MenuItem divider />
+              <MenuItem onClick={logout}>
+                <Logout fontSize="small" />
+                Déconnexion
+              </MenuItem>
             </Menu>
           </>
         ) : null}