feat: show used connected

src/components/AppHeader.jsx

@@ -1,9 +1,10 @@
 import { useState } from 'react';
 import fendiLogo from '/favicon.png'
-import { AppBar, Toolbar, Typography, InputBase, IconButton, Box } from '@mui/material';
+import { AppBar, Toolbar, Typography, InputBase, IconButton, Box, Avatar} from '@mui/material';
 import SearchIcon from '@mui/icons-material/Search';
 import MenuDrawer from './MenuDrawer';
 import MenuIcon from '@mui/icons-material/Menu';
+import { useAuth } from '../context/AuthContext';
 
 export default function AppHeader({ zone = 'public', onSelectMenuItem }) {
 
@@ -14,6 +15,7 @@ export default function AppHeader({ zone = 'public', onSelectMenuItem }) {
   };
 
   const [menuOpen, setMenuOpen] = useState(false);
+  const { user, logout } = useAuth();
 
   const isPrivate = zone === 'private';
   const isRestricted = zone === 'restricted';
@@ -53,7 +55,7 @@ export default function AppHeader({ zone = 'public', onSelectMenuItem }) {
         )}
 
         {/* Login button only visible for public zone */}
-        {isPublic && (
+        {isPublic && !user && (
           <Box>
             <IconButton color="inherit">
               <Typography variant="button" color="#A68A72FF">
@@ -63,6 +65,13 @@ export default function AppHeader({ zone = 'public', onSelectMenuItem }) {
           </Box>
         )}
 
+        {user && (
+          <Box display="flex" alignItems="center" gap={2}>
+            <Typography variant="body1">{user.name}</Typography>
+            <Avatar alt={user.name} src={user.picture} />
+          </Box>
+        )}
+
         {/* Rendering the Drawer */}
         <MenuDrawer
           zone="private"

src/private/LoginPage.jsx

@@ -11,17 +11,17 @@ export default function LoginPage() {
     return (
         <Box display="flex" flexDirection="column" alignItems="center" mt={10}>
             <Typography variant="h4" gutterBottom>
-                Iniciar sesión
+                Sign in with Google
             </Typography>
 
             <GoogleLogin
                 onSuccess={(credentialResponse) => {
-                    const user = jwt_decode(credentialResponse.credential);
+                    const user = jwtDecode(credentialResponse.credential);
                     login(user);
                     navigate('/');
                 }}
                 onError={() => {
-                    console.log('Error al iniciar sesión');
+                    console.log('Error signing in');
                 }}
             />
         </Box>