Add all fields to credential detail page (#541)

browser-extensions/chrome/src/pages/CredentialDetails.tsx

@@ -59,18 +59,17 @@ const CredentialDetails: React.FC = () => {
 
         <div className="grid gap-6 md:grid-cols-2">
           <div className="space-y-4">
+            <h2 className="text-xl font-semibold text-gray-900 dark:text-white">Login credentials</h2>
             <FormInputCopyToClipboard
               id="email"
               label="Email"
               value={credential.Email || ''}
             />
-
             <FormInputCopyToClipboard
               id="username"
               label="Username"
               value={credential.Username}
             />
-
             <FormInputCopyToClipboard
               id="password"
               label="Password"
@@ -78,7 +77,49 @@ const CredentialDetails: React.FC = () => {
               type="password"
             />
           </div>
+
+          <div className="space-y-4">
+            <h2 className="text-xl font-semibold text-gray-900 dark:text-white">Alias</h2>
+            <FormInputCopyToClipboard
+              id="fullName"
+              label="Full Name"
+              value={`${credential.Alias.FirstName} ${credential.Alias.LastName}`}
+            />
+            <FormInputCopyToClipboard
+              id="firstName"
+              label="First Name"
+              value={credential.Alias.FirstName}
+            />
+            <FormInputCopyToClipboard
+              id="lastName"
+              label="Last Name"
+              value={credential.Alias.LastName}
+            />
+            <FormInputCopyToClipboard
+              id="birthDate"
+              label="Birth Date"
+              value={credential.Alias.BirthDate ? new Date(credential.Alias.BirthDate).toISOString().split('T')[0] : ''}
+            />
+            {credential.Alias.NickName && (
+              <FormInputCopyToClipboard
+                id="nickName"
+                label="Nickname"
+                value={credential.Alias.NickName}
+              />
+            )}
+          </div>
         </div>
+
+        {credential.Notes && (
+          <div className="space-y-4">
+            <h2 className="text-xl font-semibold text-gray-900 dark:text-white">Notes</h2>
+            <div className="p-4 bg-gray-50 rounded-lg dark:bg-gray-700">
+              <p className="text-gray-900 dark:text-gray-100 whitespace-pre-wrap">
+                {credential.Notes}
+              </p>
+            </div>
+          </div>
+        )}
       </div>
     </div>
   );

browser-extensions/chrome/src/types/Credential.ts

@@ -1,10 +1,18 @@
 export type Credential = {
     Id: string;
     Username: string;
-    ServiceId: string;
-    ServiceName: string;
-    Email: string;
-    ServiceUrl: string;
-    Logo: Uint8Array;
     Password: string;
+    Email: string;
+    ServiceName: string;
+    ServiceUrl?: string;
+    Logo?: Uint8Array;
+    Notes?: string;
+    Alias: {
+        FirstName: string;
+        LastName: string;
+        NickName?: string;
+        BirthDate: string;
+        Gender?: string;
+        Email?: string;
+    };
 }

browser-extensions/chrome/src/utils/SqliteClient.tsx

@@ -99,23 +99,48 @@ class SqliteClient {
      * @returns Array of Credential objects with service details
      */
     public getAllCredentials(): Credential[] {
-        return this.executeQuery<Credential>(`
-            SELECT
+        const query = `
+            SELECT DISTINCT
                 c.Id,
                 c.Username,
+                c.Notes,
                 c.ServiceId,
                 s.Name as ServiceName,
                 s.Url as ServiceUrl,
                 s.Logo as Logo,
-                MAX(p.Value) as Password,
-                a.Email as Email
+                a.FirstName,
+                a.LastName,
+                a.NickName,
+                a.BirthDate,
+                a.Gender,
+                a.Email,
+                p.Value as Password
             FROM Credentials c
-            JOIN Services s ON s.Id = c.ServiceId
+            LEFT JOIN Services s ON c.ServiceId = s.Id
+            LEFT JOIN Aliases a ON c.AliasId = a.Id
             LEFT JOIN Passwords p ON p.CredentialId = c.Id
-            LEFT JOIN Aliases a ON a.Id = c.AliasId AND a.IsDeleted = 0
-            WHERE c.IsDeleted = 0
-            GROUP BY c.Id, c.Username, c.ServiceId, s.Name, s.Url, s.Logo
-        `);
+            WHERE c.IsDeleted = 0`;
+
+        const results = this.executeQuery(query);
+
+        return results.map((row: any) => ({
+            Id: row.Id,
+            Username: row.Username,
+            Password: row.Password,
+            Email: row.Email,
+            ServiceName: row.ServiceName,
+            ServiceUrl: row.ServiceUrl,
+            Logo: row.Logo,
+            Notes: row.Notes,
+            Alias: {
+                FirstName: row.FirstName,
+                LastName: row.LastName,
+                NickName: row.NickName,
+                BirthDate: row.BirthDate,
+                Gender: row.Gender,
+                Email: row.Email
+            }
+        }));
     }
 
     /**