feat: improvement of user name display

Author: btouchard

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()
+  }
+
+  // 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 name.slice(0, 2).toUpperCase()
+
+  return '?'
 })
 
 const isActive = (path: string) => {
@@ -122,7 +167,7 @@ const closeUserMenu = () => {
               <div class="w-8 h-8 rounded-lg bg-slate-100 dark:bg-slate-700 flex items-center justify-center text-xs font-semibold text-slate-600 dark:text-slate-300">
                 {{ userInitials }}
               </div>
-              <span class="text-slate-700 dark:text-slate-200 hidden lg:inline">{{ user?.name || user?.email?.split('@')[0] }}</span>
+              <span class="text-slate-700 dark:text-slate-200 hidden lg:inline">{{ displayName }}</span>
               <ChevronDown :size="16" class="text-slate-400" />
             </button>
 
@@ -146,7 +191,7 @@ const closeUserMenu = () => {
                 <div class="p-2">
                   <!-- User info -->
                   <div class="px-3 py-2 border-b border-slate-100 dark:border-slate-700 mb-2">
-                    <p class="font-medium text-slate-900 dark:text-slate-100">{{ user?.name }}</p>
+                    <p class="font-medium text-slate-900 dark:text-slate-100">{{ displayName }}</p>
                     <p class="text-xs text-slate-500 dark:text-slate-400 truncate">{{ user?.email }}</p>
                   </div>
 
@@ -256,7 +301,7 @@ const closeUserMenu = () => {
             <!-- User section -->
             <div class="border-t border-slate-200 dark:border-slate-700 pt-3 mt-3">
               <div class="px-3 py-2 mb-2">
-                <p class="font-medium text-slate-900 dark:text-slate-100">{{ user?.name }}</p>
+                <p class="font-medium text-slate-900 dark:text-slate-100">{{ displayName }}</p>
                 <p class="text-xs text-slate-500 dark:text-slate-400">{{ user?.email }}</p>
               </div>
               <button

webapp/src/locales/de.json

@@ -55,15 +55,16 @@
   },
   "sign": {
     "title": "Lesebestätigung",
-    "subtitle": "Bestätigen Sie Ihre Lektüre mit einer kryptografischen Ed25519-Bestätigung",
+    "subtitle": "Bestätigen Sie Ihre Lektüre mit einer sicheren und unwiderruflichen Bestätigung",
     "loading": {
       "title": "Dokument wird geladen...",
-      "description": "Bitte warten Sie, während wir das Dokument zur Signatur vorbereiten."
+      "description": "Bitte warten Sie, während wir das Dokument vorbereiten."
     },
     "noDocument": {
       "title": "Kein Dokument angegeben",
-      "description": "Um ein Dokument zu signieren, fügen Sie den Parameter {code} zur URL hinzu",
-      "examples": "Beispiele:"
+      "description": "Um die Lektüre eines Dokuments zu bestätigen, fügen Sie den Parameter {code} zur URL hinzu",
+      "examples": "Beispiele:",
+      "orEnterReference": "Oder geben Sie Ihre Dokumentenreferenz unten ein"
     },
     "success": {
       "title": "Lektüre erfolgreich bestätigt!",
@@ -87,7 +88,7 @@
       "recorded": "Ihre Bestätigung wird mit den folgenden Informationen aufgezeichnet:",
       "email": "Ihre E-Mail-Adresse",
       "timestamp": "Präziser Zeitstempel der Bestätigung",
-      "signature": "Kryptografische Ed25519-Bestätigung",
+      "signature": "Sicherer kryptografischer Fingerabdruck",
       "hash": "SHA-256-Hash des Inhalts"
     },
     "confirmations": {
@@ -101,7 +102,7 @@
     },
     "howItWorks": {
       "title": "Wie funktioniert es?",
-      "subtitle": "Ackify ermöglicht es Ihnen, kryptografisch zu beweisen, dass Sie ein Dokument gelesen haben",
+      "subtitle": "Ackify ermöglicht es Ihnen, offiziell zu bezeugen, dass Sie ein Dokument gelesen haben",
       "step1": {
         "title": "1. Auf das Dokument zugreifen",
         "description": "Fügen Sie {code} zur Adresse dieser Seite hinzu"
@@ -112,12 +113,12 @@
       },
       "step3": {
         "title": "3. Lektüre bestätigen",
-        "description": "Ihre Bestätigung wird mit einer Ed25519-Signatur aufgezeichnet"
+        "description": "Ihre Bestätigung wird sicher und überprüfbar aufgezeichnet"
       },
       "features": {
         "crypto": {
           "title": "Kryptografische Sicherheit",
-          "description": "Unwiderrufliche Ed25519-Signaturen garantieren die Authentizität"
+          "description": "Unwiderrufliche Bestätigungen garantieren die Authentizität"
         },
         "instant": {
           "title": "Sofort",
@@ -206,7 +207,7 @@
     "allConfirmations": "Alle meine Bestätigungen",
     "about": {
       "title": "Über Bestätigungen",
-      "description": "Jede Bestätigung wird kryptografisch mit Ed25519 aufgezeichnet und verkettet, um die Integrität zu gewährleisten. Bestätigungen sind unwiderruflich und präzise mit Zeitstempel versehen."
+      "description": "Jede Bestätigung wird kryptografisch aufgezeichnet und verkettet, um die Integrität zu gewährleisten. Bestätigungen sind unwiderruflich und präzise mit Zeitstempel versehen."
     },
     "search": "Suchen...",
     "error": {
@@ -447,17 +448,17 @@
     }
   },
   "embed": {
-    "loading": "Signaturinformationen werden geladen...",
-    "title": "Signatur für",
+    "loading": "Bestätigungsinformationen werden geladen...",
+    "title": "Bestätigung für",
     "document": "Dokument:",
-    "signedBy": "Signiert von",
+    "signedBy": "Bestätigt von",
     "on": "am",
     "verified": "Verifiziert",
     "viewAll": "Alle Bestätigungen ansehen",
-    "error": "Signaturinformationen können nicht geladen werden",
-    "sign": "Signieren",
-    "signDocument": "Dieses Dokument signieren",
-    "noSignatures": "Keine Signatur für dieses Dokument",
+    "error": "Bestätigungsinformationen können nicht geladen werden",
+    "sign": "Bestätigen",
+    "signDocument": "Dieses Dokument bestätigen",
+    "noSignatures": "Keine Bestätigung für dieses Dokument",
     "confirmationsCount": "{count} Bestätigung(en)",
     "poweredBy": "Powered by Ackify",
     "missingDocId": "Dokument-ID fehlt"
@@ -468,7 +469,7 @@
     "home": "Zurück zur Startseite"
   },
   "footer": {
-    "description": "Open-Source-Lösung für kryptografische Dokumentlesebestätigung mit unwiderruflichen Ed25519-Signaturen.",
+    "description": "Open-Source-Lösung für kryptografische Dokumentlesebestätigung mit unwiderruflichen Attestierungen.",
     "navigation": {
       "title": "Navigation"
     },

webapp/src/locales/en.json

@@ -55,15 +55,16 @@
   },
   "sign": {
     "title": "Reading Confirmation",
-    "subtitle": "Certify your reading with an Ed25519 cryptographic confirmation",
+    "subtitle": "Certify your reading with a secure and non-repudiable confirmation",
     "loading": {
       "title": "Loading document...",
-      "description": "Please wait while we prepare the document for signing."
+      "description": "Please wait while we prepare the document."
     },
     "noDocument": {
       "title": "No document specified",
-      "description": "To sign a document, add the {code} parameter to the URL",
-      "examples": "Examples:"
+      "description": "To confirm reading a document, add the {code} parameter to the URL",
+      "examples": "Examples:",
+      "orEnterReference": "Or enter your document reference below"
     },
     "success": {
       "title": "Reading confirmed successfully!",
@@ -87,7 +88,7 @@
       "recorded": "Your confirmation will be recorded with the following information:",
       "email": "Your email address",
       "timestamp": "Precise confirmation timestamp",
-      "signature": "Ed25519 cryptographic confirmation",
+      "signature": "Secure cryptographic fingerprint",
       "hash": "SHA-256 hash of the content"
     },
     "confirmations": {
@@ -101,7 +102,7 @@
     },
     "howItWorks": {
       "title": "How does it work?",
-      "subtitle": "Ackify allows you to cryptographically prove that you've read a document",
+      "subtitle": "Ackify allows you to officially attest that you've read a document",
       "step1": {
         "title": "1. Access the document",
         "description": "Add {code} to this page's address"
@@ -112,12 +113,12 @@
       },
       "step3": {
         "title": "3. Confirm reading",
-        "description": "Your confirmation is recorded with an Ed25519 signature"
+        "description": "Your confirmation is recorded securely and verifiably"
       },
       "features": {
         "crypto": {
           "title": "Cryptographic security",
-          "description": "Non-repudiable Ed25519 signatures guaranteeing authenticity"
+          "description": "Non-repudiable confirmations guaranteeing authenticity"
         },
         "instant": {
           "title": "Instant",
@@ -206,7 +207,7 @@
     "allConfirmations": "All my confirmations",
     "about": {
       "title": "About confirmations",
-      "description": "Each confirmation is cryptographically recorded with Ed25519 and chained to ensure integrity. Confirmations are non-repudiable and precisely timestamped."
+      "description": "Each confirmation is cryptographically recorded and chained to ensure integrity. Confirmations are non-repudiable and precisely timestamped."
     },
     "search": "Search...",
     "error": {
@@ -447,17 +448,17 @@
     }
   },
   "embed": {
-    "loading": "Loading signature information...",
-    "title": "Signature for",
+    "loading": "Loading confirmation information...",
+    "title": "Confirmation for",
     "document": "Document:",
-    "signedBy": "Signed by",
+    "signedBy": "Confirmed by",
     "on": "on",
     "verified": "Verified",
     "viewAll": "View all confirmations",
-    "error": "Unable to load signature information",
-    "sign": "Sign",
-    "signDocument": "Sign this document",
-    "noSignatures": "No signatures for this document",
+    "error": "Unable to load confirmation information",
+    "sign": "Confirm",
+    "signDocument": "Confirm this document",
+    "noSignatures": "No confirmations for this document",
     "confirmationsCount": "{count} confirmation(s)",
     "poweredBy": "Powered by Ackify",
     "missingDocId": "Document ID missing"
@@ -468,7 +469,7 @@
     "home": "Back to home"
   },
   "footer": {
-    "description": "Open-source solution for cryptographic confirmation of document reading with non-repudiable Ed25519 signatures.",
+    "description": "Open-source solution for cryptographic confirmation of document reading with non-repudiable attestations.",
     "navigation": {
       "title": "Navigation"
     },

webapp/src/locales/es.json

@@ -55,15 +55,16 @@
   },
   "sign": {
     "title": "Confirmación de Lectura",
-    "subtitle": "Certifique su lectura con una confirmación criptográfica Ed25519",
+    "subtitle": "Certifique su lectura con una confirmación segura e irrefutable",
     "loading": {
       "title": "Cargando el documento...",
-      "description": "Por favor, espere mientras preparamos el documento para la firma."
+      "description": "Por favor, espere mientras preparamos el documento."
     },
     "noDocument": {
       "title": "Ningún documento especificado",
-      "description": "Para firmar un documento, añada el parámetro {code} a la URL",
-      "examples": "Ejemplos:"
+      "description": "Para confirmar la lectura de un documento, añada el parámetro {code} a la URL",
+      "examples": "Ejemplos:",
+      "orEnterReference": "O introduzca su referencia documental a continuación"
     },
     "success": {
       "title": "¡Lectura confirmada con éxito!",
@@ -87,7 +88,7 @@
       "recorded": "Su confirmación será registrada con la siguiente información:",
       "email": "Su dirección de email",
       "timestamp": "Marca de tiempo precisa de la confirmación",
-      "signature": "Confirmación criptográfica Ed25519",
+      "signature": "Huella criptográfica segura",
       "hash": "Hash SHA-256 del contenido"
     },
     "confirmations": {
@@ -101,7 +102,7 @@
     },
     "howItWorks": {
       "title": "¿Cómo funciona?",
-      "subtitle": "Ackify le permite probar criptográficamente que ha leído un documento",
+      "subtitle": "Ackify le permite atestiguar oficialmente que ha leído un documento",
       "step1": {
         "title": "1. Acceda al documento",
         "description": "Añada {code} a la dirección de esta página"
@@ -112,12 +113,12 @@
       },
       "step3": {
         "title": "3. Confirme la lectura",
-        "description": "Su confirmación se registra con una firma Ed25519"
+        "description": "Su confirmación se registra de manera segura y verificable"
       },
       "features": {
         "crypto": {
           "title": "Seguridad criptográfica",
-          "description": "Firmas Ed25519 irrefutables que garantizan la autenticidad"
+          "description": "Confirmaciones irrefutables que garantizan la autenticidad"
         },
         "instant": {
           "title": "Instantáneo",
@@ -206,7 +207,7 @@
     "allConfirmations": "Todas mis confirmaciones",
     "about": {
       "title": "Acerca de las confirmaciones",
-      "description": "Cada confirmación se registra criptográficamente con Ed25519 y se encadena para garantizar la integridad. Las confirmaciones son irrefutables y tienen una marca de tiempo precisa."
+      "description": "Cada confirmación se registra criptográficamente y se encadena para garantizar la integridad. Las confirmaciones son irrefutables y tienen una marca de tiempo precisa."
     },
     "search": "Buscar...",
     "error": {
@@ -447,17 +448,17 @@
     }
   },
   "embed": {
-    "loading": "Cargando información de la firma...",
-    "title": "Firma para",
+    "loading": "Cargando información de la confirmación...",
+    "title": "Confirmación para",
     "document": "Documento:",
-    "signedBy": "Firmado por",
+    "signedBy": "Confirmado por",
     "on": "el",
     "verified": "Verificado",
     "viewAll": "Ver todas las confirmaciones",
-    "error": "Imposible cargar la información de la firma",
-    "sign": "Firmar",
-    "signDocument": "Firmar este documento",
-    "noSignatures": "Ninguna firma para este documento",
+    "error": "Imposible cargar la información de la confirmación",
+    "sign": "Confirmar",
+    "signDocument": "Confirmar este documento",
+    "noSignatures": "Ninguna confirmación para este documento",
     "confirmationsCount": "{count} confirmación(es)",
     "poweredBy": "Desarrollado por Ackify",
     "missingDocId": "ID de documento faltante"
@@ -468,7 +469,7 @@
     "home": "Volver al inicio"
   },
   "footer": {
-    "description": "Solución de código abierto de confirmación criptográfica de lectura de documentos con firmas Ed25519 irrefutables.",
+    "description": "Solución de código abierto de confirmación criptográfica de lectura de documentos con atestaciones irrefutables.",
     "navigation": {
       "title": "Navegación"
     },