aliasvault/apps/server/AliasVault.Client/Main/Components/Credentials/CredentialCard.razor

@inject NavigationManager NavigationManager

<div @onclick="ShowDetails" class="credential-card p-4 space-y-2 bg-white border border-gray-200 rounded-lg shadow-sm dark:border-gray-700
 dark:bg-gray-800 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200">
    <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">@GetDisplayText()</div>
    </div>
</div>

@code {
    /// <summary>
    /// Gets or sets the credentials object to show.
    /// </summary>
    [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>
    private void ShowDetails()
    {
        // Redirect to view page instead for now.
        NavigationManager.NavigateTo($"/credentials/{Obj.Id}");
    }
}