mirror/aliasvault
1
0
Fork 0
mirror of https://github.com/aliasvault/aliasvault.git synced 2026-03-22 00:23:53 -04:00
Code Issues Packages Projects Releases Wiki Activity

Update credential cards for all clients to show email if username is empty (#771)

Browse Source
This commit is contained in:
Leendert de Borst
2025-04-28 12:08:46 +02:00
parent 65d3b1d94f
commit 9f79c0cfeb
3 changed files with 63 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
browser-extension/src/entrypoints/popup/components/CredentialCard.tsx Normal file
View File

@@ -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;

24
browser-extension/src/entrypoints/popup/pages/CredentialsList.tsx
View File

@@ -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>
)}

19
mobile-app/components/CredentialCard.tsx
View File

@@ -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 '';
};