From 9eddbfc6e7f577bf02587b7c99a6ca07bcc6e67d Mon Sep 17 00:00:00 2001
From: Bernd Schoolmann <mail@quexten.com>
Date: Thu, 11 Jul 2024 16:28:55 +0200
Subject: [PATCH] [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
---
 .../auth/popup/two-factor-auth.component.ts   |  2 +
 .../src/auth/two-factor-auth.component.ts     |  2 +
 .../src/app/auth/two-factor-auth.component.ts |  2 +
 .../two-factor-auth-yubikey.component.html    | 18 +++++++++
 .../two-factor-auth-yubikey.component.ts      | 37 +++++++++++++++++++
 .../two-factor-auth.component.html            |  4 ++
 .../two-factor-auth.component.ts              |  2 +
 7 files changed, 67 insertions(+)
 create mode 100644 libs/angular/src/auth/components/two-factor-auth/two-factor-auth-yubikey.component.html
 create mode 100644 libs/angular/src/auth/components/two-factor-auth/two-factor-auth-yubikey.component.ts

diff --git a/apps/browser/src/auth/popup/two-factor-auth.component.ts b/apps/browser/src/auth/popup/two-factor-auth.component.ts
index 8fe735bd16d..67ff0fd2857 100644
--- a/apps/browser/src/auth/popup/two-factor-auth.component.ts
+++ b/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],
 })
diff --git a/apps/desktop/src/auth/two-factor-auth.component.ts b/apps/desktop/src/auth/two-factor-auth.component.ts
index 3f259876655..191a88e621a 100644
--- a/apps/desktop/src/auth/two-factor-auth.component.ts
+++ b/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],
 })
diff --git a/apps/web/src/app/auth/two-factor-auth.component.ts b/apps/web/src/app/auth/two-factor-auth.component.ts
index 8860303596a..8bdd458ea99 100644
--- a/apps/web/src/app/auth/two-factor-auth.component.ts
+++ b/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],
 })
diff --git a/libs/angular/src/auth/components/two-factor-auth/two-factor-auth-yubikey.component.html b/libs/angular/src/auth/components/two-factor-auth/two-factor-auth-yubikey.component.html
new file mode 100644
index 00000000000..ea0c98cece9
--- /dev/null
+++ b/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>
diff --git a/libs/angular/src/auth/components/two-factor-auth/two-factor-auth-yubikey.component.ts b/libs/angular/src/auth/components/two-factor-auth/two-factor-auth-yubikey.component.ts
new file mode 100644
index 00000000000..71e8508f8ce
--- /dev/null
+++ b/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>();
+}
diff --git a/libs/angular/src/auth/components/two-factor-auth/two-factor-auth.component.html b/libs/angular/src/auth/components/two-factor-auth/two-factor-auth.component.html
index af34164c2c3..1de1561a344 100644
--- a/libs/angular/src/auth/components/two-factor-auth/two-factor-auth.component.html
+++ b/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" />
diff --git a/libs/angular/src/auth/components/two-factor-auth/two-factor-auth.component.ts b/libs/angular/src/auth/components/two-factor-auth/two-factor-auth.component.ts
index 4c8e90348a4..7b60268b57d 100644
--- a/libs/angular/src/auth/components/two-factor-auth/two-factor-auth.component.ts
+++ b/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],
 })