Merge branch 'master' of github.com:bitwarden/jslib into feature/workspaces

angular/src/components/change-password.component.ts

@@ -40,7 +40,7 @@ export class ChangePasswordComponent implements OnInit {
 
   async ngOnInit() {
     this.email = await this.stateService.getEmail();
-    this.enforcedPolicyOptions = await this.policyService.getMasterPasswordPolicyOptions();
+    this.enforcedPolicyOptions ??= await this.policyService.getMasterPasswordPolicyOptions();
   }
 
   async submit() {

angular/src/components/export.component.ts

@@ -20,7 +20,7 @@ export class ExportComponent implements OnInit {
   formPromise: Promise<string>;
   disabledByPolicy: boolean = false;
 
-  exportForm = this.fb.group({
+  exportForm = this.formBuilder.group({
     format: ["json"],
     secret: [""],
   });
@@ -41,7 +41,7 @@ export class ExportComponent implements OnInit {
     protected win: Window,
     private logService: LogService,
     private userVerificationService: UserVerificationService,
-    private fb: FormBuilder
+    private formBuilder: FormBuilder
   ) {}
 
   async ngOnInit() {

angular/src/components/icon.component.ts

@@ -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];
+    }
+  }
 }

angular/src/components/set-password.component.ts

@@ -79,6 +79,8 @@ export class SetPasswordComponent extends BaseChangePasswordComponent {
         const response = await this.apiService.getOrganizationAutoEnrollStatus(this.identifier);
         this.orgId = response.id;
         this.resetPasswordAutoEnroll = response.resetPasswordEnabled;
+        this.enforcedPolicyOptions =
+          await this.policyService.getMasterPasswordPoliciesForInvitedUsers(this.orgId);
       } catch {
         this.platformUtilsService.showToast("error", null, this.i18nService.t("errorOccurred"));
       }

angular/src/components/settings/vault-timeout-input.component.ts

@@ -21,9 +21,9 @@ export class VaultTimeoutInputComponent implements ControlValueAccessor, Validat
 
   static CUSTOM_VALUE = -100;
 
-  form = this.fb.group({
+  form = this.formBuilder.group({
     vaultTimeout: [null],
-    custom: this.fb.group({
+    custom: this.formBuilder.group({
       hours: [null],
       minutes: [null],
     }),
@@ -38,7 +38,7 @@ export class VaultTimeoutInputComponent implements ControlValueAccessor, Validat
   private validatorChange: () => void;
 
   constructor(
-    private fb: FormBuilder,
+    private formBuilder: FormBuilder,
     private policyService: PolicyService,
     private i18nService: I18nService
   ) {}

angular/src/scss/icons.scss

@@ -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}");
+    }
+  }
+}