[PM-1802] Update 2fa provider icons and description (#9568)

* Update yubikey to yubico

* Update icons and descriptions

* Change order of 2fa providers

* Refactor 2fa providers into separate component

* Update i18n messages for 2fa providers

* Update design

* Fix link

* Remove unused SVGs

* Undo changes to scss

* Add speedbumps to links

* Fix missing i18n string

* Add a11y tags

* Fix incorrect filepath

* Remove unused i18n strings

* Delete accidentally committed file

* Fix premium and enabled checkmark being in new line

* Rename two-factor-icon selector

* Update authenticator names in two-factor-authenticator setup component

* Update text according to figma design

* Update keys to notify crowdin translators of changed content

* Move svg icons to separate file

* Fix incorrect i18n key

libs/angular/src/auth/components/two-factor-icon.component.html

@@ -0,0 +1,16 @@
+<ng-container>
+  <!-- TOTP Authenticator -->
+  <bit-icon [icon]="Icons.TOTPIcon" *ngIf="provider == 0"></bit-icon>
+  <!-- Email -->
+  <bit-icon [icon]="Icons.EmailIcon" *ngIf="provider == 1"></bit-icon>
+  <!-- Webauthn -->
+  <bit-icon [icon]="Icons.WebAuthnIcon" *ngIf="provider == 7"></bit-icon>
+  <!-- Recovery Code -->
+  <bit-icon [icon]="Icons.RecoveryCodeIcon" *ngIf="provider == 'rc'"></bit-icon>
+  <!-- Other 2FA Types (Duo, Yubico, U2F as PNG) -->
+  <img
+    [class]="'mfaType' + provider"
+    [alt]="name"
+    *ngIf="provider == 2 || provider == 3 || provider == 4 || provider == 5 || provider == 6"
+  />
+</ng-container>

libs/angular/src/auth/components/two-factor-icon.component.ts

@@ -0,0 +1,24 @@
+import { Component, Input } from "@angular/core";
+
+import { EmailIcon } from "../icons/email.icon";
+import { RecoveryCodeIcon } from "../icons/recovery.icon";
+import { TOTPIcon } from "../icons/totp.icon";
+import { WebAuthnIcon } from "../icons/webauthn.icon";
+
+@Component({
+  selector: "auth-two-factor-icon",
+  templateUrl: "./two-factor-icon.component.html",
+})
+export class TwoFactorIconComponent {
+  @Input() provider: any;
+  @Input() name: string;
+
+  protected readonly Icons = {
+    TOTPIcon,
+    EmailIcon,
+    WebAuthnIcon,
+    RecoveryCodeIcon,
+  };
+
+  constructor() {}
+}