[PM-7084]: 3/6 Introduce shared yubikey two-factor component (#9769)

* Add shared two-factor-options component

* Add new refactored two-factor-auth component and totp auth componnet behind feature flag

* Add yubico yubikey otp shared two-fa component

apps/browser/src/auth/popup/two-factor-auth.component.ts

@@ -4,6 +4,7 @@ import { FormBuilder, ReactiveFormsModule } from "@angular/forms";
 import { ActivatedRoute, Router, RouterLink } from "@angular/router";
 
 import { TwoFactorAuthAuthenticatorComponent } from "@bitwarden/angular/auth/components/two-factor-auth/two-factor-auth-authenticator.component";
+import { TwoFactorAuthYubikeyComponent } from "@bitwarden/angular/auth/components/two-factor-auth/two-factor-auth-yubikey.component";
 import { TwoFactorAuthComponent as BaseTwoFactorAuthComponent } from "@bitwarden/angular/auth/components/two-factor-auth/two-factor-auth.component";
 import { TwoFactorOptionsComponent } from "@bitwarden/angular/auth/components/two-factor-auth/two-factor-options.component";
 import { JslibModule } from "@bitwarden/angular/jslib.module";
@@ -59,6 +60,7 @@ import BrowserPopupUtils from "../../platform/popup/browser-popup-utils";
     CheckboxModule,
     TwoFactorOptionsComponent,
     TwoFactorAuthAuthenticatorComponent,
+    TwoFactorAuthYubikeyComponent,
   ],
   providers: [I18nPipe],
 })

apps/desktop/src/auth/two-factor-auth.component.ts

@@ -5,6 +5,7 @@ import { ReactiveFormsModule } from "@angular/forms";
 import { RouterLink } from "@angular/router";
 
 import { TwoFactorAuthAuthenticatorComponent } from "../../../../libs/angular/src/auth/components/two-factor-auth/two-factor-auth-authenticator.component";
+import { TwoFactorAuthYubikeyComponent } from "../../../../libs/angular/src/auth/components/two-factor-auth/two-factor-auth-yubikey.component";
 import { TwoFactorAuthComponent as BaseTwoFactorAuthComponent } from "../../../../libs/angular/src/auth/components/two-factor-auth/two-factor-auth.component";
 import { TwoFactorOptionsComponent } from "../../../../libs/angular/src/auth/components/two-factor-auth/two-factor-options.component";
 import { JslibModule } from "../../../../libs/angular/src/jslib.module";
@@ -35,6 +36,7 @@ import { TypographyModule } from "../../../../libs/components/src/typography";
     CheckboxModule,
     TwoFactorOptionsComponent,
     TwoFactorAuthAuthenticatorComponent,
+    TwoFactorAuthYubikeyComponent,
   ],
   providers: [I18nPipe],
 })

apps/web/src/app/auth/two-factor-auth.component.ts

@@ -20,6 +20,7 @@ import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/pl
 import { LinkModule, TypographyModule, CheckboxModule, DialogService } from "@bitwarden/components";
 
 import { TwoFactorAuthAuthenticatorComponent } from "../../../../../libs/angular/src/auth/components/two-factor-auth/two-factor-auth-authenticator.component";
+import { TwoFactorAuthYubikeyComponent } from "../../../../../libs/angular/src/auth/components/two-factor-auth/two-factor-auth-yubikey.component";
 import { TwoFactorAuthComponent as BaseTwoFactorAuthComponent } from "../../../../../libs/angular/src/auth/components/two-factor-auth/two-factor-auth.component";
 import { TwoFactorOptionsComponent } from "../../../../../libs/angular/src/auth/components/two-factor-auth/two-factor-options.component";
 import {
@@ -50,6 +51,7 @@ import { FormFieldModule } from "../../../../../libs/components/src/form-field";
     CheckboxModule,
     TwoFactorOptionsComponent,
     TwoFactorAuthAuthenticatorComponent,
+    TwoFactorAuthYubikeyComponent,
   ],
   providers: [I18nPipe],
 })

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

@@ -0,0 +1,18 @@
+<p bitTypography="body1" class="tw-text-center">{{ "insertYubiKey" | i18n }}</p>
+<picture>
+  <source srcset="../../images/yubikey.avif" type="image/avif" />
+  <source srcset="../../images/yubikey.webp" type="image/webp" />
+  <img src="../../images/yubikey.jpg" class="tw-rounded img-fluid tw-mb-3" alt="" />
+</picture>
+<bit-form-field>
+  <bit-label class="tw-sr-only">{{ "verificationCode" | i18n }}</bit-label>
+  <input
+    type="password"
+    bitInput
+    appAutofocus
+    appInputVerbatim
+    autocomplete="new-password"
+    [(ngModel)]="tokenValue"
+    (input)="token.emit(tokenValue)"
+  />
+</bit-form-field>

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

@@ -0,0 +1,37 @@
+import { DialogModule } from "@angular/cdk/dialog";
+import { CommonModule } from "@angular/common";
+import { Component, EventEmitter, Output } from "@angular/core";
+import { ReactiveFormsModule, FormsModule } from "@angular/forms";
+
+import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { I18nPipe } from "@bitwarden/angular/platform/pipes/i18n.pipe";
+import {
+  ButtonModule,
+  LinkModule,
+  TypographyModule,
+  FormFieldModule,
+  AsyncActionsModule,
+} from "@bitwarden/components";
+
+@Component({
+  standalone: true,
+  selector: "app-two-factor-auth-yubikey",
+  templateUrl: "two-factor-auth-yubikey.component.html",
+  imports: [
+    CommonModule,
+    JslibModule,
+    DialogModule,
+    ButtonModule,
+    LinkModule,
+    TypographyModule,
+    ReactiveFormsModule,
+    FormFieldModule,
+    AsyncActionsModule,
+    FormsModule,
+  ],
+  providers: [I18nPipe],
+})
+export class TwoFactorAuthYubikeyComponent {
+  tokenValue: string = "";
+  @Output() token = new EventEmitter<string>();
+}

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

@@ -4,6 +4,10 @@
       (token)="token = $event"
       *ngIf="selectedProviderType === providerType.Authenticator"
     />
+    <app-two-factor-auth-yubikey
+      (token)="token = $event"
+      *ngIf="selectedProviderType === providerType.Yubikey"
+    />
     <bit-form-control *ngIf="selectedProviderType != null">
       <bit-label>{{ "rememberMe" | i18n }}</bit-label>
       <input type="checkbox" bitCheckbox formControlName="remember" />

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

@@ -39,6 +39,7 @@ import {
 import { CaptchaProtectedComponent } from "../captcha-protected.component";
 
 import { TwoFactorAuthAuthenticatorComponent } from "./two-factor-auth-authenticator.component";
+import { TwoFactorAuthYubikeyComponent } from "./two-factor-auth-yubikey.component";
 import {
   TwoFactorOptionsDialogResult,
   TwoFactorOptionsComponent,
@@ -59,6 +60,7 @@ import {
     ButtonModule,
     TwoFactorOptionsComponent,
     TwoFactorAuthAuthenticatorComponent,
+    TwoFactorAuthYubikeyComponent,
   ],
   providers: [I18nPipe],
 })