mirror/aliasvault
1
0
Fork 0
mirror of https://github.com/aliasvault/aliasvault.git synced 2026-05-18 13:28:12 -04:00
Code Issues Packages Projects Releases Wiki Activity

Update AliasVault.Client to use generic item type icons (#1465)

Browse Source
This commit is contained in:
Leendert de Borst
2026-01-20 21:25:40 +01:00
committed by Leendert de Borst
parent 2dab52c1b4
commit ddcd982225
2 changed files with 55 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
apps/server/AliasVault.Client/Main/Components/Items/ItemIcon.razor
View File

@@ -4,69 +4,20 @@
@using ItemTypeClass = AliasClientDb.Models.ItemType
@* ItemIcon component - displays contextually appropriate icons based on item type *@
@* Uses centralized ItemTypeIcons for SVG definitions (auto-generated from core/models) *@
@* For Login/Alias: Uses the Logo field if available, falls back to key placeholder *@
@* For CreditCard: Shows card brand icons (Visa, MC, Amex, Discover) based on card number *@
@* For Note: Shows a document/note icon *@
@if (ItemType == ItemTypeClass.Note)
{
@* Note icon - document style *@
<svg class="@SizeClass flex-shrink-0" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8 4C6.9 4 6 4.9 6 6V26C6 27.1 6.9 28 8 28H24C25.1 28 26 27.1 26 26V11L19 4H8Z" fill="#f49541"/>
<path d="M19 4V11H26L19 4Z" fill="#d68338"/>
<rect x="10" y="14" width="12" height="1.5" rx="0.75" fill="#ffe096"/>
<rect x="10" y="18" width="10" height="1.5" rx="0.75" fill="#ffe096"/>
<rect x="10" y="22" width="8" height="1.5" rx="0.75" fill="#ffe096"/>
</svg>
@* Note icon - using centralized definition *@
<span class="@SizeClass flex-shrink-0 inline-block [&>svg]:w-full [&>svg]:h-full">@((MarkupString)ItemTypeIcons.Note)</span>
}
else if (ItemType == ItemTypeClass.CreditCard)
{
@* Credit card icon - detect brand and show appropriate icon *@
@switch (CardBrandDetector.Detect(CardNumber))
{
case CardBrandDetector.CardBrand.Visa:
@* Visa card icon *@
<svg class="@SizeClass flex-shrink-0" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="2" y="6" width="28" height="20" rx="3" fill="#f49541"/>
<path d="M13.5 13L11.5 19H10L8.5 14.5C8.5 14.5 8.35 14 8 14C7.65 14 7 13.8 7 13.8L7.05 13.5H9.5C9.85 13.5 10.15 13.75 10.2 14.1L10.8 17L12.5 13.5H13.5V13ZM15 19H14L15 13H16L15 19ZM20 13.5C20 13.5 19.4 13.3 18.7 13.3C17.35 13.3 16.4 14 16.4 15C16.4 15.8 17.1 16.2 17.65 16.5C18.2 16.8 18.4 17 18.4 17.2C18.4 17.5 18.05 17.7 17.6 17.7C17 17.7 16.5 17.5 16.5 17.5L16.3 18.7C16.3 18.7 16.9 19 17.7 19C19.2 19 20.1 18.2 20.1 17.1C20.1 15.7 18.4 15.6 18.4 15C18.4 14.7 18.7 14.5 19.15 14.5C19.6 14.5 20.1 14.7 20.1 14.7L20.3 13.5H20V13.5ZM24 19L23.1 13.5H22C21.7 13.5 21.45 13.7 21.35 13.95L19 19H20.5L20.8 18H22.7L22.9 19H24ZM21.2 17L22 14.5L22.45 17H21.2Z" fill="#ffe096"/>
</svg>
break;
case CardBrandDetector.CardBrand.Mastercard:
@* Mastercard icon *@
<svg class="@SizeClass flex-shrink-0" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="2" y="6" width="28" height="20" rx="3" fill="#f49541"/>
<circle cx="13" cy="16" r="5" fill="#d68338"/>
<circle cx="19" cy="16" r="5" fill="#ffe096"/>
<path d="M16 12.5C17.1 13.4 17.8 14.6 17.8 16C17.8 17.4 17.1 18.6 16 19.5C14.9 18.6 14.2 17.4 14.2 16C14.2 14.6 14.9 13.4 16 12.5Z" fill="#fbcb74"/>
</svg>
break;
case CardBrandDetector.CardBrand.Amex:
@* Amex card icon *@
<svg class="@SizeClass flex-shrink-0" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="2" y="6" width="28" height="20" rx="3" fill="#f49541"/>
<text x="16" y="18" text-anchor="middle" fill="#ffe096" font-size="8" font-weight="bold" font-family="Arial, sans-serif">AMEX</text>
</svg>
break;
case CardBrandDetector.CardBrand.Discover:
@* Discover card icon *@
<svg class="@SizeClass flex-shrink-0" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="2" y="6" width="28" height="20" rx="3" fill="#f49541"/>
<circle cx="20" cy="16" r="4" fill="#ffe096"/>
<path d="M7 14H8.5C9.3 14 10 14.7 10 15.5C10 16.3 9.3 17 8.5 17H7V14Z" fill="#ffe096"/>
<rect x="11" y="14" width="1.5" height="3" fill="#ffe096"/>
<path d="M14 15C14 14.4 14.4 14 15 14C15.3 14 15.5 14.1 15.7 14.3L16.5 13.5C16.1 13.2 15.6 13 15 13C13.9 13 13 13.9 13 15C13 16.1 13.9 17 15 17C15.6 17 16.1 16.8 16.5 16.5L15.7 15.7C15.5 15.9 15.3 16 15 16C14.4 16 14 15.6 14 15Z" fill="#ffe096"/>
</svg>
break;
default:
@* Generic credit card icon *@
<svg class="@SizeClass flex-shrink-0" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="2" y="6" width="28" height="20" rx="3" fill="#f49541"/>
<rect x="2" y="11" width="28" height="4" fill="#d68338"/>
<rect x="5" y="18" width="8" height="2" rx="1" fill="#ffe096"/>
<rect x="5" y="22" width="5" height="1.5" rx="0.75" fill="#fbcb74"/>
</svg>
break;
}
@* Credit card icon - detect brand and show appropriate icon from centralized definitions *@
<span class="@SizeClass flex-shrink-0 inline-block [&>svg]:w-full [&>svg]:h-full">@((MarkupString)GetCardIconSvg())</span>
}
else if (Logo != null && Logo.Length > 0)
{
@@ -76,17 +27,7 @@ else if (Logo != null && Logo.Length > 0)
else
{
@* Default placeholder - key icon for Login/Alias without logo *@
<svg class="@SizeClass flex-shrink-0" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
@* Key bow (circular head) - positioned top-left *@
<circle cx="10" cy="10" r="6.5" stroke="#f49541" stroke-width="2.5"/>
@* Key hole in bow *@
<circle cx="10" cy="10" r="2.5" stroke="#f49541" stroke-width="2"/>
@* Key shaft - diagonal *@
<path d="M15 15L27 27" stroke="#f49541" stroke-width="2.5" stroke-linecap="round"/>
@* Key teeth - perpendicular to shaft *@
<path d="M19 19L23 15" stroke="#f49541" stroke-width="2.5" stroke-linecap="round"/>
<path d="M24 24L28 20" stroke="#f49541" stroke-width="2.5" stroke-linecap="round"/>
</svg>
<span class="@SizeClass flex-shrink-0 inline-block [&>svg]:w-full [&>svg]:h-full">@((MarkupString)ItemTypeIcons.Placeholder)</span>
}
@code {
@@ -147,4 +88,20 @@ else
ShowPlaceholder = true;
StateHasChanged();
}
/// <summary>
/// Gets the appropriate card icon SVG based on the card brand.
/// Uses centralized ItemTypeIcons definitions.
/// </summary>
private string GetCardIconSvg()
{
return CardBrandDetector.Detect(CardNumber) switch
{
CardBrandDetector.CardBrand.Visa => ItemTypeIcons.Visa,
CardBrandDetector.CardBrand.Mastercard => ItemTypeIcons.Mastercard,
CardBrandDetector.CardBrand.Amex => ItemTypeIcons.Amex,
CardBrandDetector.CardBrand.Discover => ItemTypeIcons.Discover,
_ => ItemTypeIcons.CreditCard,
};
}
}

33
apps/server/Databases/AliasClientDb/Models/ItemTypeIcons.cs Normal file
View File

@@ -0,0 +1,33 @@
// <auto-generated />
// This file is auto-generated from core/models/src/icons/ItemTypeIcons.ts
// Do not edit this file directly. Run 'npm run generate:models' to regenerate.
namespace AliasClientDb.Models;
/// <summary>
/// Centralized SVG icon definitions for item types.
/// Single source of truth for all item type icons across platforms.
/// </summary>
public static class ItemTypeIcons
{
/// <summary>Placeholder icon SVG.</summary>
public const string Placeholder = "<svg viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"10\" cy=\"10\" r=\"6.5\" stroke=\"#f49541\" stroke-width=\"2.5\"/>\n <circle cx=\"10\" cy=\"10\" r=\"2.5\" stroke=\"#ff0000\" stroke-width=\"2\"/>\n <path d=\"M15 15L27 27\" stroke=\"#f49541\" stroke-width=\"2.5\" stroke-linecap=\"round\"/>\n <path d=\"M19 19L23 15\" stroke=\"#f49541\" stroke-width=\"2.5\" stroke-linecap=\"round\"/>\n <path d=\"M24 24L28 20\" stroke=\"#f49541\" stroke-width=\"2.5\" stroke-linecap=\"round\"/>\n</svg>";
/// <summary>Note icon SVG.</summary>
public const string Note = "<svg viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8 4C6.9 4 6 4.9 6 6V26C6 27.1 6.9 28 8 28H24C25.1 28 26 27.1 26 26V11L19 4H8Z\" fill=\"#f49541\"/>\n <path d=\"M19 4V11H26L19 4Z\" fill=\"#d68338\"/>\n <rect x=\"10\" y=\"14\" width=\"12\" height=\"1.5\" rx=\"0.75\" fill=\"#ffe096\"/>\n <rect x=\"10\" y=\"18\" width=\"10\" height=\"1.5\" rx=\"0.75\" fill=\"#ffe096\"/>\n <rect x=\"10\" y=\"22\" width=\"8\" height=\"1.5\" rx=\"0.75\" fill=\"#ffe096\"/>\n</svg>";
/// <summary>CreditCard icon SVG.</summary>
public const string CreditCard = "<svg viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"2\" y=\"6\" width=\"28\" height=\"20\" rx=\"3\" fill=\"#f49541\"/>\n <rect x=\"2\" y=\"11\" width=\"28\" height=\"4\" fill=\"#d68338\"/>\n <rect x=\"5\" y=\"18\" width=\"8\" height=\"2\" rx=\"1\" fill=\"#ffe096\"/>\n <rect x=\"5\" y=\"22\" width=\"5\" height=\"1.5\" rx=\"0.75\" fill=\"#fbcb74\"/>\n</svg>";
/// <summary>Visa icon SVG.</summary>
public const string Visa = "<svg viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"2\" y=\"6\" width=\"28\" height=\"20\" rx=\"3\" fill=\"#f49541\"/>\n <path d=\"M13.5 13L11.5 19H10L8.5 14.5C8.5 14.5 8.35 14 8 14C7.65 14 7 13.8 7 13.8L7.05 13.5H9.5C9.85 13.5 10.15 13.75 10.2 14.1L10.8 17L12.5 13.5H13.5V13ZM15 19H14L15 13H16L15 19ZM20 13.5C20 13.5 19.4 13.3 18.7 13.3C17.35 13.3 16.4 14 16.4 15C16.4 15.8 17.1 16.2 17.65 16.5C18.2 16.8 18.4 17 18.4 17.2C18.4 17.5 18.05 17.7 17.6 17.7C17 17.7 16.5 17.5 16.5 17.5L16.3 18.7C16.3 18.7 16.9 19 17.7 19C19.2 19 20.1 18.2 20.1 17.1C20.1 15.7 18.4 15.6 18.4 15C18.4 14.7 18.7 14.5 19.15 14.5C19.6 14.5 20.1 14.7 20.1 14.7L20.3 13.5H20V13.5ZM24 19L23.1 13.5H22C21.7 13.5 21.45 13.7 21.35 13.95L19 19H20.5L20.8 18H22.7L22.9 19H24ZM21.2 17L22 14.5L22.45 17H21.2Z\" fill=\"#ffe096\"/>\n</svg>";
/// <summary>Mastercard icon SVG.</summary>
public const string Mastercard = "<svg viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"2\" y=\"6\" width=\"28\" height=\"20\" rx=\"3\" fill=\"#f49541\"/>\n <circle cx=\"13\" cy=\"16\" r=\"5\" fill=\"#d68338\"/>\n <circle cx=\"19\" cy=\"16\" r=\"5\" fill=\"#ffe096\"/>\n <path d=\"M16 12.5C17.1 13.4 17.8 14.6 17.8 16C17.8 17.4 17.1 18.6 16 19.5C14.9 18.6 14.2 17.4 14.2 16C14.2 14.6 14.9 13.4 16 12.5Z\" fill=\"#fbcb74\"/>\n</svg>";
/// <summary>Amex icon SVG.</summary>
public const string Amex = "<svg viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"2\" y=\"6\" width=\"28\" height=\"20\" rx=\"3\" fill=\"#f49541\"/>\n <text x=\"16\" y=\"18\" text-anchor=\"middle\" fill=\"#ffe096\" font-size=\"8\" font-weight=\"bold\" font-family=\"Arial, sans-serif\">AMEX</text>\n</svg>";
/// <summary>Discover icon SVG.</summary>
public const string Discover = "<svg viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"2\" y=\"6\" width=\"28\" height=\"20\" rx=\"3\" fill=\"#f49541\"/>\n <circle cx=\"20\" cy=\"16\" r=\"4\" fill=\"#ffe096\"/>\n <path d=\"M7 14H8.5C9.3 14 10 14.7 10 15.5C10 16.3 9.3 17 8.5 17H7V14Z\" fill=\"#ffe096\"/>\n <rect x=\"11\" y=\"14\" width=\"1.5\" height=\"3\" fill=\"#ffe096\"/>\n <path d=\"M14 15C14 14.4 14.4 14 15 14C15.3 14 15.5 14.1 15.7 14.3L16.5 13.5C16.1 13.2 15.6 13 15 13C13.9 13 13 13.9 13 15C13 16.1 13.9 17 15 17C15.6 17 16.1 16.8 16.5 16.5L15.7 15.7C15.5 15.9 15.3 16 15 16C14.4 16 14 15.6 14 15Z\" fill=\"#ffe096\"/>\n</svg>";
}