From 355f198293066d80e4d963739677e9cd8e8da0c1 Mon Sep 17 00:00:00 2001
From: Leendert de Borst <ldeborst@xivisoft.com>
Date: Fri, 18 Apr 2025 13:24:18 +0200
Subject: [PATCH] Make credential card show username/email uniformly in all
 clients (#771)

---
 mobile-app/app/(tabs)/(credentials)/index.tsx | 35 +++++++++++++------
 .../Credentials/CredentialCard.razor          | 24 ++++++++++++-
 2 files changed, 48 insertions(+), 11 deletions(-)

diff --git a/mobile-app/app/(tabs)/(credentials)/index.tsx b/mobile-app/app/(tabs)/(credentials)/index.tsx
index 035fcf77b..109e35a3b 100644
--- a/mobile-app/app/(tabs)/(credentials)/index.tsx
+++ b/mobile-app/app/(tabs)/(credentials)/index.tsx
@@ -89,6 +89,28 @@ export default function CredentialsScreen() {
   const authContext = useAuth();
   const dbContext = useDb();
 
+  /**
+   * Get the display text for a credential, showing username by default,
+   * falling back to email only if username is null/undefined
+   */
+  const getCredentialDisplayText = (cred: Credential): string => {
+    const username = cred.Username ?? '';
+
+    // Show username if available.
+    if (username.length > 0) {
+      return username;
+    }
+
+    // Show email if username is not available.
+    const email = cred.Alias?.Email ?? '';
+    if (email.length > 0) {
+      return email;
+    }
+
+    // Show empty string if neither username nor email is available.
+    return '';
+  };
+
   const isAuthenticated = authContext.isLoggedIn;
   const isDatabaseAvailable = dbContext.dbAvailable;
 
@@ -210,16 +232,9 @@ export default function CredentialsScreen() {
                       <Text style={[styles.serviceName]}>
                         {item.ServiceName ?? 'Unknown Service'}
                       </Text>
-                      {item.Username && (
-                        <Text style={[styles.credentialText]}>
-                          Username: {item.Username}
-                        </Text>
-                      )}
-                      {item.Alias?.Email && (
-                        <Text style={[styles.credentialText]}>
-                          Email: {item.Alias.Email}
-                        </Text>
-                      )}
+                      <Text style={[styles.credentialText]}>
+                        {getCredentialDisplayText(item)}
+                      </Text>
                     </View>
                   </View>
                 </TouchableOpacity>
diff --git a/src/AliasVault.Client/Main/Components/Credentials/CredentialCard.razor b/src/AliasVault.Client/Main/Components/Credentials/CredentialCard.razor
index 57793f87d..2dab304dc 100644
--- a/src/AliasVault.Client/Main/Components/Credentials/CredentialCard.razor
+++ b/src/AliasVault.Client/Main/Components/Credentials/CredentialCard.razor
@@ -5,7 +5,7 @@
     <div class="px-4 py-2 text-gray-400 rounded text-center flex flex-col items-center">
         <DisplayFavicon FaviconBytes="@Obj.Logo" Padding="true"></DisplayFavicon>
         <div class="text-gray-900 dark:text-gray-100">@Obj.Service</div>
-        <div class="text-gray-500 dark:text-gray-400">@Obj.Username</div>
+        <div class="text-gray-500 dark:text-gray-400">@GetDisplayText()</div>
     </div>
 </div>
 
@@ -16,6 +16,28 @@
     [Parameter]
     public required CredentialListEntry Obj { get; set; }
 
+    /// <summary>
+    /// Gets the display text for the credential, showing username by default,
+    /// falling back to email only if username is null/empty.
+    /// </summary>
+    private string GetDisplayText()
+    {
+        // Show username if available
+        if (!string.IsNullOrEmpty(Obj.Username))
+        {
+            return Obj.Username;
+        }
+
+        // Show email if username is not available
+        if (!string.IsNullOrEmpty(Obj.Email))
+        {
+            return Obj.Email;
+        }
+
+        // Show empty string if neither username nor email is available
+        return string.Empty;
+    }
+
     /// <summary>
     /// Navigate to the details page of the credential.
     /// </summary>