From 9f79c0cfeb28f1049fc9f742f1325627cd014fe2 Mon Sep 17 00:00:00 2001
From: Leendert de Borst <ldeborst@xivisoft.com>
Date: Mon, 28 Apr 2025 12:08:46 +0200
Subject: [PATCH] Update credential cards for all clients to show email if
 username is empty (#771)

---
 .../popup/components/CredentialCard.tsx       | 52 +++++++++++++++++++
 .../popup/pages/CredentialsList.tsx           | 24 ++-------
 mobile-app/components/CredentialCard.tsx      | 19 +++----
 3 files changed, 63 insertions(+), 32 deletions(-)
 create mode 100644 browser-extension/src/entrypoints/popup/components/CredentialCard.tsx

diff --git a/browser-extension/src/entrypoints/popup/components/CredentialCard.tsx b/browser-extension/src/entrypoints/popup/components/CredentialCard.tsx
new file mode 100644
index 000000000..7910582db
--- /dev/null
+++ b/browser-extension/src/entrypoints/popup/components/CredentialCard.tsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Credential } from '../../../utils/types/Credential';
+import SqliteClient from '../../../utils/SqliteClient';
+
+type CredentialCardProps = {
+  credential: Credential;
+};
+
+const CredentialCard: React.FC<CredentialCardProps> = ({ credential }) => {
+  const navigate = useNavigate();
+
+  const getDisplayText = (cred: Credential): string => {
+    // Show username if available
+    if (cred.Username) {
+      return cred.Username;
+    }
+
+    // Show email if username is not available
+    if (cred.Alias?.Email) {
+      return cred.Alias.Email;
+    }
+
+    // Show empty string if neither username nor email is available
+    return '';
+  };
+
+  return (
+    <li>
+      <button
+        onClick={() => navigate(`/credentials/${credential.Id}`)}
+        className="w-full p-2 border dark:border-gray-600 rounded flex items-center bg-white dark:bg-gray-800 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
+      >
+        <img
+          src={SqliteClient.imgSrcFromBytes(credential.Logo)}
+          alt={credential.ServiceName}
+          className="w-8 h-8 mr-2 flex-shrink-0"
+          onError={(e) => {
+            const target = e.target as HTMLImageElement;
+            target.src = '/assets/images/service-placeholder.webp';
+          }}
+        />
+        <div className="text-left">
+          <p className="font-medium text-gray-900 dark:text-white">{credential.ServiceName}</p>
+          <p className="text-sm text-gray-600 dark:text-gray-400">{getDisplayText(credential)}</p>
+        </div>
+      </button>
+    </li>
+  );
+};
+
+export default CredentialCard;
diff --git a/browser-extension/src/entrypoints/popup/pages/CredentialsList.tsx b/browser-extension/src/entrypoints/popup/pages/CredentialsList.tsx
index b2100fec0..945c5215a 100644
--- a/browser-extension/src/entrypoints/popup/pages/CredentialsList.tsx
+++ b/browser-extension/src/entrypoints/popup/pages/CredentialsList.tsx
@@ -9,7 +9,8 @@ import ReloadButton from '../components/ReloadButton';
 import LoadingSpinner from '../components/LoadingSpinner';
 import { useMinDurationLoading } from '../../../hooks/useMinDurationLoading';
 import { sendMessage } from 'webext-bridge/popup';
-import SqliteClient  from '../../../utils/SqliteClient';
+import SqliteClient from '../../../utils/SqliteClient';
+import CredentialCard from '../components/CredentialCard';
 /**
  * Credentials list page.
  */
@@ -165,26 +166,7 @@ const CredentialsList: React.FC = () => {
       ) : (
         <ul className="space-y-2">
           {filteredCredentials.map(cred => (
-            <li key={cred.Id}>
-              <button
-                onClick={() => navigate(`/credentials/${cred.Id}`)}
-                className="w-full p-2 border dark:border-gray-600 rounded flex items-center bg-white dark:bg-gray-800 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
-              >
-                <img
-                  src={SqliteClient.imgSrcFromBytes(cred.Logo)}
-                  alt={cred.ServiceName}
-                  className="w-8 h-8 mr-2 flex-shrink-0"
-                  onError={(e) => {
-                    const target = e.target as HTMLImageElement;
-                    target.src = '/assets/images/service-placeholder.webp';
-                  }}
-                />
-                <div className="text-left">
-                  <p className="font-medium text-gray-900 dark:text-white">{cred.ServiceName}</p>
-                  <p className="text-sm text-gray-600 dark:text-gray-400">{cred.Username}</p>
-                </div>
-              </button>
-            </li>
+            <CredentialCard key={cred.Id} credential={cred} />
           ))}
         </ul>
       )}
diff --git a/mobile-app/components/CredentialCard.tsx b/mobile-app/components/CredentialCard.tsx
index b2075619c..dbd388b5e 100644
--- a/mobile-app/components/CredentialCard.tsx
+++ b/mobile-app/components/CredentialCard.tsx
@@ -13,23 +13,20 @@ export function CredentialCard({ credential }: CredentialCardProps) {
 
   /**
    * Get the display text for a credential, showing username by default,
-   * falling back to email only if username is null/undefined
+   * falling back to email only if username is null/undefined/empty
    */
   const getCredentialDisplayText = (cred: Credential): string => {
-    const username = cred.Username ?? '';
-
-    // Show username if available.
-    if (username.length > 0) {
-      return username;
+    // Show username if available
+    if (cred.Username) {
+      return cred.Username;
     }
 
-    // Show email if username is not available.
-    const email = cred.Alias?.Email ?? '';
-    if (email.length > 0) {
-      return email;
+    // Show email if username is not available
+    if (cred.Alias?.Email) {
+      return cred.Alias.Email;
     }
 
-    // Show empty string if neither username nor email is available.
+    // Show empty string if neither username nor email is available
     return '';
   };