[PM-7084] 6/6: Introduce shared duo two-factor component (#9772)

* Add shared duo component * Fix duo import * Fix wrong i18n service DI in duo desktop component * Remove duo v2 * Add override to functions * Remove web duo implementation * Update apps/browser/src/auth/popup/two-factor-auth-duo.component.ts Co-authored-by: Ike <137194738+ike-kottlowski@users.noreply.github.com> * Update apps/desktop/src/auth/two-factor-auth-duo.component.ts Co-authored-by: Ike <137194738+ike-kottlowski@users.noreply.github.com> * Update libs/angular/src/auth/components/two-factor-auth/two-factor-auth-duo.component.ts Co-authored-by: Ike <137194738+ike-kottlowski@users.noreply.github.com> * Fix missing service on duo components * Fix missing service on base duo auth component * Fix constructor super calls in duo auth component * Fix duo auth components incorrectly extending base class --------- Co-authored-by: Ike <137194738+ike-kottlowski@users.noreply.github.com>
2026-02-22 12:24:01 +00:00 · 2024-07-19 16:29:24 +02:00
parent bc1ee0a169
commit 05e8b45edb
10 changed files with 406 additions and 2 deletions
--- a/libs/angular/src/auth/components/two-factor-auth/two-factor-auth-duo.component.ts
+++ b/libs/angular/src/auth/components/two-factor-auth/two-factor-auth-duo.component.ts
@@ -0,0 +1,79 @@
+import { DialogModule } from "@angular/cdk/dialog";
+import { CommonModule } from "@angular/common";
+import { Component, EventEmitter, Input, 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 { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
+import {
+  ButtonModule,
+  LinkModule,
+  TypographyModule,
+  FormFieldModule,
+  AsyncActionsModule,
+  ToastService,
+} from "@bitwarden/components";
+
+@Component({
+  standalone: true,
+  selector: "app-two-factor-auth-duo",
+  templateUrl: "two-factor-auth-duo.component.html",
+  imports: [
+    CommonModule,
+    JslibModule,
+    DialogModule,
+    ButtonModule,
+    LinkModule,
+    TypographyModule,
+    ReactiveFormsModule,
+    FormFieldModule,
+    AsyncActionsModule,
+    FormsModule,
+  ],
+  providers: [I18nPipe],
+})
+export class TwoFactorAuthDuoComponent {
+  @Output() token = new EventEmitter<string>();
+  @Input() providerData: any;
+
+  duoFramelessUrl: string = null;
+  duoResultListenerInitialized = false;
+
+  constructor(
+    protected i18nService: I18nService,
+    protected platformUtilsService: PlatformUtilsService,
+    protected toastService: ToastService,
+  ) {}
+
+  async ngOnInit(): Promise<void> {
+    await this.init();
+  }
+
+  async init() {
+    // Setup listener for duo-redirect.ts connector to send back the code
+    if (!this.duoResultListenerInitialized) {
+      // setup client specific duo result listener
+      this.setupDuoResultListener();
+      this.duoResultListenerInitialized = true;
+    }
+
+    // flow must be launched by user so they can choose to remember the device or not.
+    this.duoFramelessUrl = this.providerData.AuthUrl;
+  }
+
+  // Each client will have own implementation
+  protected setupDuoResultListener(): void {}
+  async launchDuoFrameless(): Promise<void> {
+    if (this.duoFramelessUrl === null) {
+      this.toastService.showToast({
+        variant: "error",
+        title: null,
+        message: this.i18nService.t("duoHealthCheckResultsInNullAuthUrlError"),
+      });
+      return;
+    }
+    this.platformUtilsService.launchUri(this.duoFramelessUrl);
+  }
+}