Select an image to display for credit cards based on the brand. (#537)
Co-authored-by: Hinton <oscar@oscarhinton.com>
@ -18,6 +18,21 @@ const IconMap: any = {
|
||||
"fa-apple": String.fromCharCode(0xf179),
|
||||
};
|
||||
|
||||
/**
|
||||
* Provides a mapping from supported card brands to
|
||||
* the filenames of icon that should be present in images/cards folder of clients.
|
||||
*/
|
||||
const cardIcons: Record<string, string> = {
|
||||
Visa: "card-visa",
|
||||
Mastercard: "card-mastercard",
|
||||
Amex: "card-amex",
|
||||
Discover: "card-discover",
|
||||
"Diners Club": "card-diners-club",
|
||||
JCB: "card-jcb",
|
||||
Maestro: "card-maestro",
|
||||
UnionPay: "card-union-pay",
|
||||
};
|
||||
|
||||
@Component({
|
||||
selector: "app-vault-icon",
|
||||
templateUrl: "icon.component.html",
|
||||
@ -59,6 +74,7 @@ export class IconComponent implements OnChanges {
|
||||
break;
|
||||
case CipherType.Card:
|
||||
this.icon = "fa-credit-card";
|
||||
this.setCardIcon();
|
||||
break;
|
||||
case CipherType.Identity:
|
||||
this.icon = "fa-id-card-o";
|
||||
@ -102,4 +118,11 @@ export class IconComponent implements OnChanges {
|
||||
this.image = null;
|
||||
}
|
||||
}
|
||||
|
||||
private setCardIcon() {
|
||||
const brand = this.cipher.card.brand;
|
||||
if (this.imageEnabled && brand in cardIcons) {
|
||||
this.icon = "credit-card-icon " + cardIcons[brand];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
BIN
angular/src/images/cards/amex-dark.png
Normal file
After Width: | Height: | Size: 773 B |
BIN
angular/src/images/cards/amex-light.png
Normal file
After Width: | Height: | Size: 773 B |
BIN
angular/src/images/cards/diners_club-dark.png
Normal file
After Width: | Height: | Size: 783 B |
BIN
angular/src/images/cards/diners_club-light.png
Normal file
After Width: | Height: | Size: 713 B |
BIN
angular/src/images/cards/discover-dark.png
Normal file
After Width: | Height: | Size: 808 B |
BIN
angular/src/images/cards/discover-light.png
Normal file
After Width: | Height: | Size: 830 B |
BIN
angular/src/images/cards/jcb-dark.png
Normal file
After Width: | Height: | Size: 836 B |
BIN
angular/src/images/cards/jcb-light.png
Normal file
After Width: | Height: | Size: 798 B |
BIN
angular/src/images/cards/maestro-dark.png
Normal file
After Width: | Height: | Size: 752 B |
BIN
angular/src/images/cards/maestro-light.png
Normal file
After Width: | Height: | Size: 820 B |
BIN
angular/src/images/cards/mastercard-dark.png
Normal file
After Width: | Height: | Size: 737 B |
BIN
angular/src/images/cards/mastercard-light.png
Normal file
After Width: | Height: | Size: 757 B |
BIN
angular/src/images/cards/union_pay-dark.png
Normal file
After Width: | Height: | Size: 1.2 KiB |
BIN
angular/src/images/cards/union_pay-light.png
Normal file
After Width: | Height: | Size: 1.2 KiB |
BIN
angular/src/images/cards/visa-dark.png
Normal file
After Width: | Height: | Size: 548 B |
BIN
angular/src/images/cards/visa-light.png
Normal file
After Width: | Height: | Size: 590 B |
44
angular/src/scss/icons.scss
Normal file
@ -0,0 +1,44 @@
|
||||
$card-icons-base: "~@bitwarden/jslib-angular/src/images/cards/";
|
||||
$card-icons: (
|
||||
"visa": $card-icons-base + "visa-light.png",
|
||||
"amex": $card-icons-base + "amex-light.png",
|
||||
"diners-club": $card-icons-base + "diners_club-light.png",
|
||||
"discover": $card-icons-base + "discover-light.png",
|
||||
"jcb": $card-icons-base + "jcb-light.png",
|
||||
"maestro": $card-icons-base + "maestro-light.png",
|
||||
"mastercard": $card-icons-base + "mastercard-light.png",
|
||||
"union-pay": $card-icons-base + "union_pay-light.png",
|
||||
);
|
||||
|
||||
$card-icons-dark: (
|
||||
"visa": $card-icons-base + "visa-dark.png",
|
||||
"amex": $card-icons-base + "amex-dark.png",
|
||||
"diners-club": $card-icons-base + "diners_club-dark.png",
|
||||
"discover": $card-icons-base + "discover-dark.png",
|
||||
"jcb": $card-icons-base + "jcb-dark.png",
|
||||
"maestro": $card-icons-base + "maestro-dark.png",
|
||||
"mastercard": $card-icons-base + "mastercard-dark.png",
|
||||
"union-pay": $card-icons-base + "union_pay-dark.png",
|
||||
);
|
||||
|
||||
.credit-card-icon {
|
||||
display: block; // Resolves the parent container being slighly to big
|
||||
height: 19px;
|
||||
width: 24px;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
@each $name, $url in $card-icons {
|
||||
.card-#{$name} {
|
||||
background-image: url("#{$url}");
|
||||
}
|
||||
}
|
||||
|
||||
@each $theme in $dark-icon-themes {
|
||||
@each $name, $url in $card-icons-dark {
|
||||
.#{$theme} .card-#{$name} {
|
||||
background-image: url("#{$url}");
|
||||
}
|
||||
}
|
||||
}
|