[PM-4612] [PM-6218] [PM-6219] Enable Duo redirect on Desktop Client (#7798)

* enable duo for desktop

* added missing return path in main.ts

* updated logic in component

* removed switch added await; updated logic in main.

* addressed subscription concerns in main; updated formatting in 2fa component

* Update Duo case in locales

apps/browser/src/_locales/en/messages.json

@@ -2696,10 +2696,10 @@
     }
   },
   "launchDuoAndFollowStepsToFinishLoggingIn": {
-    "message": "Launch DUO and follow the steps to finish logging in."
+    "message": "Launch Duo and follow the steps to finish logging in."
   },
   "duoRequiredByOrgForAccount": {
-    "message": "DUO two-step login is required for your account."
+    "message": "Duo two-step login is required for your account."
   },
   "openExtensionInNewWindowToCompleteLogin": {
     "message": "Open the extension in a new window to complete login"
@@ -2708,7 +2708,7 @@
     "message": "Popout extension"
   },
   "launchDuo": {
-    "message": "Launch DUO"
+    "message": "Launch Duo"
   },
   "importFormatError": {
     "message": "Data is not formatted correctly. Please check your import file and try again."

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

@@ -1,157 +1,186 @@
-<form
-  id="two-factor-page"
-  #form
-  (ngSubmit)="submit()"
-  [appApiAction]="formPromise"
-  attr.aria-hidden="{{ showingModal }}"
->
-  <div id="content" class="content">
-    <h1>{{ title }}</h1>
-    <p *ngIf="selectedProviderType === providerType.Authenticator">
-      {{ "enterVerificationCodeApp" | i18n }}
-    </p>
-    <p *ngIf="selectedProviderType === providerType.Email">
-      {{ "enterVerificationCodeEmail" | i18n: twoFactorEmail }}
-    </p>
-    <div
-      class="box last"
-      *ngIf="
-        selectedProviderType === providerType.Email ||
-        selectedProviderType === providerType.Authenticator
-      "
-    >
-      <div class="box-content">
-        <div class="box-content-row" appBoxRow>
-          <label for="code">{{ "verificationCode" | i18n }}</label>
+<div class="page-top-padding">
+  <form
+    #form
+    (ngSubmit)="submit()"
+    [appApiAction]="formPromise"
+    class="container"
+    autocomplete="off"
+    id="two-factor-page"
+    attr.aria-hidden="{{ showingModal }}"
+  >
+    <div id="content" class="content tw-mt-5">
+      <img class="logo-image" alt="Bitwarden" />
+      <p class="lead text-center mb-4">{{ title }}</p>
+      <!-- Providers -->
+      <div class="box last">
+        <!-- Authenticator / Email TOTP -->
+        <ng-container
+          *ngIf="
+            selectedProviderType === providerType.Email ||
+            selectedProviderType === providerType.Authenticator
+          "
+        >
+          <p *ngIf="selectedProviderType === providerType.Authenticator">
+            {{ "enterVerificationCodeApp" | i18n }}
+          </p>
+          <p *ngIf="selectedProviderType === providerType.Email">
+            {{ "enterVerificationCodeEmail" | i18n: twoFactorEmail }}
+          </p>
+          <div class="box-content">
+            <div class="box-content-row" appBoxRow>
+              <label for="code">{{ "verificationCode" | i18n }}</label>
+              <input
+                id="code"
+                type="text"
+                name="Code"
+                [(ngModel)]="token"
+                required
+                appAutofocus
+                appInputVerbatim
+              />
+            </div>
+          </div>
+          <small class="form-text" *ngIf="selectedProviderType === providerType.Email">
+            <a
+              href="#"
+              appStopClick
+              (click)="sendEmail(true)"
+              [appApiAction]="emailPromise"
+              *ngIf="selectedProviderType === providerType.Email"
+            >
+              {{ "sendVerificationCodeEmailAgain" | i18n }}
+            </a>
+          </small>
+        </ng-container>
+
+        <!-- Yubikey -->
+        <ng-container *ngIf="selectedProviderType === providerType.Yubikey">
+          <p>{{ "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="rounded img-fluid mb-3" alt="" />
+          </picture>
+          <div class="box last">
+            <div class="box-content">
+              <div class="box-content-row" appBoxRow>
+                <label for="code" class="sr-only">{{ "verificationCode" | i18n }}</label>
+                <input
+                  id="code"
+                  type="password"
+                  name="Code"
+                  [(ngModel)]="token"
+                  required
+                  appAutofocus
+                  appInputVerbatim
+                />
+              </div>
+            </div>
+          </div>
+        </ng-container>
+
+        <!-- WebAuthn -->
+        <ng-container *ngIf="selectedProviderType === providerType.WebAuthn">
+          <div class="tw-flex tw-justify-center">
+            <div id="web-authn-frame">
+              <iframe id="webauthn_iframe" sandbox="allow-scripts allow-same-origin"></iframe>
+            </div>
+          </div>
+        </ng-container>
+
+        <!-- Duo -->
+        <ng-container *ngIf="isDuoProvider">
+          <ng-container *ngIf="duoFrameless">
+            <div>
+              <span *ngIf="selectedProviderType === providerType.OrganizationDuo" class="tw-mb-0">
+                {{ "duoRequiredByOrgForAccount" | i18n }}
+              </span>
+              {{ "launchDuoAndFollowStepsToFinishLoggingIn" | i18n }}
+            </div>
+          </ng-container>
+          <ng-container id="duo-frame" *ngIf="!duoFrameless">
+            <iframe
+              id="duo_iframe"
+              sandbox="allow-scripts allow-forms allow-same-origin allow-popups allow-popups-to-escape-sandbox"
+            ></iframe>
+          </ng-container>
+        </ng-container>
+      </div>
+
+      <div class="box last" *ngIf="selectedProviderType == null">
+        <div class="box-content">
+          <div class="box-content-row">
+            <p>{{ "noTwoStepProviders" | i18n }}</p>
+            <p>{{ "noTwoStepProviders2" | i18n }}</p>
+          </div>
+        </div>
+      </div>
+
+      <div class="box last" [hidden]="!showCaptcha()">
+        <div class="box-content">
+          <div class="box-content-row">
+            <iframe
+              id="hcaptcha_iframe"
+              height="80"
+              sandbox="allow-scripts allow-same-origin"
+            ></iframe>
+            <button class="btn block" type="button" routerLink="/accessibility-cookie">
+              <i class="bwi bwi-universal-access" aria-hidden="true"></i>
+              {{ "loadAccessibilityCookie" | i18n }}
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- Remember me -->
+      <div class="checkbox tw-mb-2">
+        <label for="remember" class="flex align-items-center flex-fill">
           <input
-            id="code"
-            type="text"
-            name="Code"
-            [(ngModel)]="token"
-            required
-            appAutofocus
-            appInputVerbatim
+            id="remember"
+            type="checkbox"
+            name="Remember"
+            class="tw-mr-2"
+            [(ngModel)]="remember"
           />
+          {{ "rememberMe" | i18n }}
+        </label>
+      </div>
+
+      <!-- Submit Buttons -->
+      <div class="buttons with-rows">
+        <div
+          class="buttons-row"
+          *ngIf="duoFrameless && selectedProviderType != null && isDuoProvider"
+        >
+          <button
+            (click)="launchDuoFrameless()"
+            type="button"
+            class="btn primary block"
+            [disabled]="form.loading"
+          >
+            <b> {{ "launchDuo" | i18n }} </b>
+          </button>
         </div>
-        <div class="box-content-row box-content-row-checkbox" appBoxRow>
-          <label for="remember">{{ "rememberMe" | i18n }}</label>
-          <input id="remember" type="checkbox" name="Remember" [(ngModel)]="remember" />
+        <div class="buttons-row" *ngIf="selectedProviderType != null && !isDuoProvider">
+          <button type="submit" class="btn primary block" [disabled]="form.loading">
+            <span [hidden]="form.loading"
+              ><i class="bwi bwi-sign-in" aria-hidden="true"></i> {{ "continue" | i18n }}</span
+            >
+            <i class="bwi bwi-spinner bwi-spin" [hidden]="!form.loading" aria-hidden="true"></i>
+          </button>
         </div>
-      </div>
-    </div>
-    <ng-container *ngIf="selectedProviderType === providerType.Yubikey">
-      <p>{{ "insertYubiKey" | i18n }}</p>
-      <img src="../../images/yubikey.jpg" alt="" />
-      <div class="box last">
-        <div class="box-content">
-          <div class="box-content-row" appBoxRow>
-            <label for="code" class="sr-only">{{ "verificationCode" | i18n }}</label>
-            <input
-              id="code"
-              type="password"
-              name="Code"
-              [(ngModel)]="token"
-              required
-              appAutofocus
-              appInputVerbatim
-            />
-          </div>
-          <div class="box-content-row box-content-row-checkbox" appBoxRow>
-            <label for="remember">{{ "rememberMe" | i18n }}</label>
-            <input id="remember" type="checkbox" name="Remember" [(ngModel)]="remember" />
-          </div>
-        </div>
-      </div>
-    </ng-container>
-    <ng-container *ngIf="selectedProviderType === providerType.WebAuthn">
-      <div id="web-authn-frame">
-        <iframe id="webauthn_iframe" sandbox="allow-scripts allow-same-origin"></iframe>
-      </div>
-      <div class="box first">
-        <div class="box-content">
-          <div class="box-content-row box-content-row-checkbox" appBoxRow>
-            <label for="remember">{{ "rememberMe" | i18n }}</label>
-            <input id="remember" type="checkbox" name="Remember" [(ngModel)]="remember" />
-          </div>
-        </div>
-      </div>
-    </ng-container>
-    <ng-container
-      *ngIf="
-        selectedProviderType === providerType.Duo ||
-        selectedProviderType === providerType.OrganizationDuo
-      "
-    >
-      <div id="duo-frame">
-        <iframe
-          id="duo_iframe"
-          sandbox="allow-scripts allow-forms allow-same-origin allow-popups allow-popups-to-escape-sandbox"
-        ></iframe>
-      </div>
-      <div class="box last">
-        <div class="box-content">
-          <div class="box-content-row box-content-row-checkbox" appBoxRow>
-            <label for="remember">{{ "rememberMe" | i18n }}</label>
-            <input id="remember" type="checkbox" name="Remember" [(ngModel)]="remember" />
-          </div>
-        </div>
-      </div>
-    </ng-container>
-    <div class="box last" *ngIf="selectedProviderType == null">
-      <div class="box-content">
-        <div class="box-content-row">
-          <p>{{ "noTwoStepProviders" | i18n }}</p>
-          <p>{{ "noTwoStepProviders2" | i18n }}</p>
-        </div>
-      </div>
-    </div>
-    <div class="box last" [hidden]="!showCaptcha()">
-      <div class="box-content">
-        <div class="box-content-row">
-          <iframe
-            id="hcaptcha_iframe"
-            height="80"
-            sandbox="allow-scripts allow-same-origin"
-          ></iframe>
-          <button class="btn block" type="button" routerLink="/accessibility-cookie">
-            <i class="bwi bwi-universal-access" aria-hidden="true"></i>
-            {{ "loadAccessibilityCookie" | i18n }}
+        <div class="buttons-row">
+          <button type="button" routerLink="/login" class="btn block">
+            {{ "cancel" | i18n }}
           </button>
         </div>
       </div>
+      <div class="sub-options">
+        <button type="button" class="text text-primary" appStopClick (click)="anotherMethod()">
+          <b>{{ "useAnotherTwoStepMethod" | i18n }}</b>
+        </button>
+      </div>
     </div>
-    <div class="buttons">
-      <button
-        type="submit"
-        class="btn primary block"
-        [disabled]="form.loading"
-        *ngIf="
-          selectedProviderType != null &&
-          selectedProviderType !== providerType.Duo &&
-          selectedProviderType !== providerType.OrganizationDuo
-        "
-      >
-        <span [hidden]="form.loading"
-          ><i class="bwi bwi-sign-in" aria-hidden="true"></i> {{ "continue" | i18n }}</span
-        >
-        <i class="bwi bwi-spinner bwi-spin" [hidden]="!form.loading" aria-hidden="true"></i>
-      </button>
-      <button type="button" routerLink="/login" class="btn block">{{ "cancel" | i18n }}</button>
-    </div>
-    <div class="sub-options">
-      <button type="button" appStopClick (click)="anotherMethod()">
-        {{ "useAnotherTwoStepMethod" | i18n }}
-      </button>
-      <button
-        type="button"
-        appStopClick
-        (click)="sendEmail(true)"
-        [appApiAction]="emailPromise"
-        *ngIf="selectedProviderType === providerType.Email"
-      >
-        {{ "sendVerificationCodeEmailAgain" | i18n }}
-      </button>
-    </div>
-  </div>
-</form>
+  </form>
+</div>
 <ng-template #twoFactorOptions></ng-template>

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

@@ -1,4 +1,4 @@
-import { Component, Inject, ViewChild, ViewContainerRef } from "@angular/core";
+import { Component, Inject, NgZone, ViewChild, ViewContainerRef } from "@angular/core";
 import { ActivatedRoute, Router } from "@angular/router";
 
 import { TwoFactorComponent as BaseTwoFactorComponent } from "@bitwarden/angular/auth/components/two-factor.component";
@@ -11,6 +11,7 @@ import { SsoLoginServiceAbstraction } from "@bitwarden/common/auth/abstractions/
 import { TwoFactorService } from "@bitwarden/common/auth/abstractions/two-factor.service";
 import { TwoFactorProviderType } from "@bitwarden/common/auth/enums/two-factor-provider-type";
 import { AppIdService } from "@bitwarden/common/platform/abstractions/app-id.service";
+import { BroadcasterService } from "@bitwarden/common/platform/abstractions/broadcaster.service";
 import { ConfigServiceAbstraction } from "@bitwarden/common/platform/abstractions/config/config.service.abstraction";
 import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
@@ -21,6 +22,8 @@ import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.serv
 
 import { TwoFactorOptionsComponent } from "./two-factor-options.component";
 
+const BroadcasterSubscriptionId = "TwoFactorComponent";
+
 @Component({
   selector: "app-two-factor",
   templateUrl: "two-factor.component.html",
@@ -31,6 +34,7 @@ export class TwoFactorComponent extends BaseTwoFactorComponent {
   twoFactorOptionsModal: ViewContainerRef;
 
   showingModal = false;
+  duoCallbackSubscriptionEnabled: boolean = false;
 
   constructor(
     loginStrategyService: LoginStrategyServiceAbstraction,
@@ -40,8 +44,10 @@ export class TwoFactorComponent extends BaseTwoFactorComponent {
     platformUtilsService: PlatformUtilsService,
     syncService: SyncService,
     environmentService: EnvironmentService,
+    private broadcasterService: BroadcasterService,
     private modalService: ModalService,
     stateService: StateService,
+    private ngZone: NgZone,
     route: ActivatedRoute,
     logService: LogService,
     twoFactorService: TwoFactorService,
@@ -115,4 +121,25 @@ export class TwoFactorComponent extends BaseTwoFactorComponent {
       content.setAttribute("style", "width:335px");
     }
   }
+
+  protected override setupDuoResultListener() {
+    if (!this.duoCallbackSubscriptionEnabled) {
+      this.broadcasterService.subscribe(BroadcasterSubscriptionId, async (message: any) => {
+        await this.ngZone.run(async () => {
+          if (message.command === "duoCallback") {
+            this.token = message.code;
+            await this.submit();
+          }
+        });
+      });
+      this.duoCallbackSubscriptionEnabled = true;
+    }
+  }
+
+  ngOnDestroy(): void {
+    if (this.duoCallbackSubscriptionEnabled) {
+      this.broadcasterService.unsubscribe(BroadcasterSubscriptionId);
+      this.duoCallbackSubscriptionEnabled = false;
+    }
+  }
 }

apps/desktop/src/locales/en/messages.json

@@ -2525,6 +2525,15 @@
       }
     }
   },
+  "launchDuoAndFollowStepsToFinishLoggingIn": {
+    "message": "Launch Duo and follow the steps to finish logging in."
+  },
+  "duoRequiredByOrgForAccount": {
+    "message": "Duo two-step login is required for your account."
+  },
+  "launchDuo": {
+    "message": "Launch Duo in Browser"
+  },
   "importFormatError": {
     "message": "Data is not formatted correctly. Please check your import file and try again."
   },

apps/desktop/src/main.ts

@@ -277,15 +277,24 @@ export class Main {
         const url = new URL(s);
         const code = url.searchParams.get("code");
         const receivedState = url.searchParams.get("state");
+        let message = "";
 
-        if (code == null || receivedState == null) {
+        if (code === null) {
           return;
         }
 
-        const message =
-          s.indexOf("bitwarden://import-callback-lp") === 0
-            ? "importCallbackLastPass"
-            : "ssoCallback";
+        if (s.indexOf("bitwarden://duo-callback") === 0) {
+          message = "duoCallback";
+        } else if (receivedState === null) {
+          return;
+        }
+
+        if (s.indexOf("bitwarden://import-callback-lp") === 0) {
+          message = "importCallbackLastPass";
+        } else if (s.indexOf("bitwarden://sso-callback") === 0) {
+          message = "ssoCallback";
+        }
+
         this.messagingService.send(message, { code: code, state: receivedState });
       });
   }

apps/web/src/locales/en/messages.json

@@ -5928,13 +5928,13 @@
     }
   },
   "launchDuoAndFollowStepsToFinishLoggingIn": {
-    "message": "Launch DUO and follow the steps to finish logging in."
+    "message": "Launch Duo and follow the steps to finish logging in."
   },
   "duoRequiredByOrgForAccount": {
-    "message": "DUO two-step login is required for your account."
+    "message": "Duo two-step login is required for your account."
   },
   "launchDuo": {
-    "message": "Launch DUO"
+    "message": "Launch Duo"
   },
   "turnOn": {
     "message": "Turn on"