Add shared two-factor-options component (#9767)

apps/browser/src/popup/scss/plugins.scss

@@ -0,0 +1,31 @@
+@import "variables.scss";
+
+@each $mfaType in $mfaTypes {
+  .mfaType#{$mfaType} {
+    content: url("../images/two-factor/" + $mfaType + ".png");
+    max-width: 100px;
+  }
+}
+
+.mfaType1 {
+  @include themify($themes) {
+    content: url("../images/two-factor/1" + themed("mfaLogoSuffix"));
+    max-width: 100px;
+    max-height: 45px;
+  }
+}
+
+.mfaType7 {
+  @include themify($themes) {
+    content: url("../images/two-factor/7" + themed("mfaLogoSuffix"));
+    max-width: 100px;
+  }
+}
+
+.recovery-code-img {
+  @include themify($themes) {
+    content: url("../images/two-factor/rc" + themed("mfaLogoSuffix"));
+    max-width: 100px;
+    max-height: 45px;
+  }
+}

apps/browser/src/popup/scss/popup.scss

@@ -10,5 +10,6 @@
 @import "modal.scss";
 @import "environment.scss";
 @import "pages.scss";
+@import "plugins.scss";
 @import "@angular/cdk/overlay-prebuilt.css";
 @import "../../../../../libs/components/src/multi-select/scss/bw.theme";

apps/browser/src/popup/scss/variables.scss

@@ -19,6 +19,8 @@ $border-radius: 6px;
 $line-height-base: 1.42857143;
 $icon-hover-color: lighten($text-color, 50%);
 
+$mfaTypes: 0, 2, 3, 4, 6;
+
 $gray: #555;
 $gray-light: #777;
 $text-muted: $gray-light;
@@ -111,6 +113,7 @@ $themes: (
     infoColor: $brand-info,
     warningColor: $brand-warning,
     logoSuffix: "dark",
+    mfaLogoSuffix: ".png",
     passwordNumberColor: #007fde,
     passwordSpecialColor: #c40800,
     passwordCountText: #212529,
@@ -174,6 +177,7 @@ $themes: (
     infoColor: #a4b0c6,
     warningColor: #ffeb66,
     logoSuffix: "white",
+    mfaLogoSuffix: "-w.png",
     passwordNumberColor: #6f9df1,
     passwordSpecialColor: #ff8d85,
     passwordCountText: #ffffff,
@@ -236,6 +240,7 @@ $themes: (
     infoColor: $nord9,
     warningColor: $nord12,
     logoSuffix: "white",
+    mfaLogoSuffix: "-w.png",
     passwordNumberColor: $nord8,
     passwordSpecialColor: $nord12,
     passwordCountText: $nord5,
@@ -298,6 +303,7 @@ $themes: (
     infoColor: $solarizedDarkGreen,
     warningColor: $solarizedDarkYellow,
     logoSuffix: "white",
+    mfaLogoSuffix: "-w.png",
     passwordNumberColor: $solarizedDarkCyan,
     passwordSpecialColor: $solarizedDarkYellow,
     passwordCountText: $solarizedDarkBase2,

apps/desktop/src/scss/plugins.scss

@@ -0,0 +1,31 @@
+@import "variables.scss";
+
+@each $mfaType in $mfaTypes {
+  .mfaType#{$mfaType} {
+    content: url("../images/two-factor/" + $mfaType + ".png");
+    max-width: 100px;
+  }
+}
+
+.mfaType1 {
+  @include themify($themes) {
+    content: url("../images/two-factor/1" + themed("mfaLogoSuffix"));
+    max-width: 100px;
+    max-height: 45px;
+  }
+}
+
+.mfaType7 {
+  @include themify($themes) {
+    content: url("../images/two-factor/7" + themed("mfaLogoSuffix"));
+    max-width: 100px;
+  }
+}
+
+.recovery-code-img {
+  @include themify($themes) {
+    content: url("../images/two-factor/rc" + themed("mfaLogoSuffix"));
+    max-width: 100px;
+    max-height: 45px;
+  }
+}

apps/desktop/src/scss/styles.scss

@@ -15,5 +15,6 @@
 @import "header.scss";
 @import "left-nav.scss";
 @import "loading.scss";
+@import "plugins.scss";
 @import "../../../../libs/angular/src/scss/icons.scss";
 @import "../../../../libs/components/src/multi-select/scss/bw.theme";

apps/desktop/src/scss/variables.scss

@@ -15,6 +15,8 @@ $list-icon-color: #c7c7cd;
 $border-radius: 3px;
 $line-height-base: 1.42857143;
 
+$mfaTypes: 0, 2, 3, 4, 6;
+
 $gray: #555;
 $gray-light: #777;
 $text-muted: $gray-light;
@@ -92,6 +94,7 @@ $themes: (
     infoColor: $brand-info,
     warningColor: $brand-warning,
     logoSuffix: "dark",
+    mfaLogoSuffix: ".png",
     passwordNumberColor: #007fde,
     passwordSpecialColor: #c40800,
     passwordCountText: #212529,
@@ -150,6 +153,7 @@ $themes: (
     infoColor: #a4b0c6,
     warningColor: #ffeb66,
     logoSuffix: "white",
+    mfaLogoSuffix: "-w.png",
     passwordNumberColor: #6f9df1,
     passwordSpecialColor: #ff8d85,
     passwordCountText: #ffffff,
@@ -208,6 +212,7 @@ $themes: (
     infoColor: $nord9,
     warningColor: $nord12,
     logoSuffix: "white",
+    mfaLogoSuffix: "-w.png",
     passwordNumberColor: $nord8,
     passwordSpecialColor: $nord12,
     passwordCountText: $nord5,