diff --git a/webapp/src/components/layout/AppHeader.vue b/webapp/src/components/layout/AppHeader.vue index d416466..383587b 100644 --- a/webapp/src/components/layout/AppHeader.vue +++ b/webapp/src/components/layout/AppHeader.vue @@ -22,19 +22,64 @@ const isAuthenticated = computed(() => authStore.isAuthenticated) const isAdmin = computed(() => authStore.isAdmin) const user = computed(() => authStore.user) +// Extract name parts from email (before @, split by . - _) +function extractNamePartsFromEmail(email: string): string[] { + const localPart = email.split('@')[0] || '' + return localPart.split(/[.\-_]+/).filter(p => p.length > 0) +} + +// Capitalize first letter of a string +function capitalize(str: string): string { + return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase() +} + +// Display name (for menu and header) +const displayName = computed(() => { + // If user has a real name that's not just the email, use it + if (user.value?.name && user.value.name !== user.value.email) { + return user.value.name + } + // Otherwise extract from email + if (user.value?.email) { + const parts = extractNamePartsFromEmail(user.value.email) + if (parts.length > 0) { + return parts.map(capitalize).join(' ') + } + } + return user.value?.email || '' +}) + // User initials for avatar const userInitials = computed(() => { if (!user.value?.name && !user.value?.email) return '?' - const name = user.value.name || user.value.email || '' - const parts = name.split(/[\s@]+/).filter(p => p.length > 0) - if (parts.length >= 2) { - const first = parts[0] ?? '' - const second = parts[1] ?? '' - if (first.length > 0 && second.length > 0) { + + // If user has a real name, use it for initials + if (user.value?.name && user.value.name !== user.value.email) { + const nameParts = user.value.name.split(/\s+/).filter(p => p.length > 0) + if (nameParts.length >= 2) { + const first = nameParts[0] ?? '' + const second = nameParts[1] ?? '' return (first.charAt(0) + second.charAt(0)).toUpperCase() } + return user.value.name.slice(0, 2).toUpperCase() } - return name.slice(0, 2).toUpperCase() + + // Extract from email + if (user.value?.email) { + const parts = extractNamePartsFromEmail(user.value.email) + if (parts.length >= 2) { + // nom.prenom@ or prenom.nom@ → 2 initials + const first = parts[0] ?? '' + const second = parts[1] ?? '' + return (first.charAt(0) + second.charAt(0)).toUpperCase() + } + if (parts.length === 1 && parts[0]) { + // Single word → 1 initial only + return parts[0].charAt(0).toUpperCase() + } + } + + return '?' }) const isActive = (path: string) => { @@ -122,7 +167,7 @@ const closeUserMenu = () => {
{{ userInitials }}
- + @@ -146,7 +191,7 @@ const closeUserMenu = () => {
-

{{ user?.name }}

+

{{ displayName }}

{{ user?.email }}

@@ -256,7 +301,7 @@ const closeUserMenu = () => {
-

{{ user?.name }}

+

{{ displayName }}

{{ user?.email }}