refactor(auth): [PM-9179] remove deprecated TwoFactorComponents

Remove deprecated TwoFactorComponentsV1 and TwoFactorOptionsComponentV1 components, related functionality (unauthUiRefreshSwap) and orphaned styles/translation messages.

apps/desktop/src/app/app-routing.module.ts

@@ -6,7 +6,6 @@ import {
   DesktopDefaultOverlayPosition,
   EnvironmentSelectorComponent,
 } from "@bitwarden/angular/auth/components/environment-selector.component";
-import { unauthUiRefreshSwap } from "@bitwarden/angular/auth/functions/unauth-ui-refresh-route-swap";
 import {
   authGuard,
   lockGuard,
@@ -53,7 +52,6 @@ import { AccessibilityCookieComponent } from "../auth/accessibility-cookie.compo
 import { maxAccountsGuardFn } from "../auth/guards/max-accounts.guard";
 import { RemovePasswordComponent } from "../auth/remove-password.component";
 import { SetPasswordComponent } from "../auth/set-password.component";
-import { TwoFactorComponentV1 } from "../auth/two-factor-v1.component";
 import { UpdateTempPasswordComponent } from "../auth/update-temp-password.component";
 import { VaultComponent } from "../vault/app/vault/vault.component";
 
@@ -76,28 +74,6 @@ const routes: Routes = [
     children: [], // Children lets us have an empty component.
     canActivate: [redirectGuard({ loggedIn: "/vault", loggedOut: "/login", locked: "/lock" })],
   },
-  ...unauthUiRefreshSwap(
-    TwoFactorComponentV1,
-    AnonLayoutWrapperComponent,
-    {
-      path: "2fa",
-    },
-    {
-      path: "2fa",
-      canActivate: [unauthGuardFn(), TwoFactorAuthGuard],
-      children: [
-        {
-          path: "",
-          component: TwoFactorAuthComponent,
-        },
-      ],
-      data: {
-        pageTitle: {
-          key: "verifyYourIdentity",
-        },
-      } satisfies RouteDataProperties & AnonLayoutWrapperData,
-    },
-  ),
   {
     path: "authentication-timeout",
     component: AnonLayoutWrapperComponent,
@@ -360,6 +336,21 @@ const routes: Routes = [
           },
         } satisfies AnonLayoutWrapperData,
       },
+      {
+        path: "2fa",
+        canActivate: [unauthGuardFn(), TwoFactorAuthGuard],
+        children: [
+          {
+            path: "",
+            component: TwoFactorAuthComponent,
+          },
+        ],
+        data: {
+          pageTitle: {
+            key: "verifyYourIdentity",
+          },
+        } satisfies RouteDataProperties & AnonLayoutWrapperData,
+      },
     ],
   },
 ];

apps/desktop/src/app/app.module.ts

@@ -16,8 +16,6 @@ import { LoginModule } from "../auth/login/login.module";
 import { RemovePasswordComponent } from "../auth/remove-password.component";
 import { SetPasswordComponent } from "../auth/set-password.component";
 import { SsoComponentV1 } from "../auth/sso-v1.component";
-import { TwoFactorOptionsComponentV1 } from "../auth/two-factor-options-v1.component";
-import { TwoFactorComponentV1 } from "../auth/two-factor-v1.component";
 import { UpdateTempPasswordComponent } from "../auth/update-temp-password.component";
 import { SshAgentService } from "../autofill/services/ssh-agent.service";
 import { PremiumComponent } from "../billing/app/accounts/premium.component";
@@ -78,9 +76,7 @@ import { SharedModule } from "./shared/shared.module";
     SetPasswordComponent,
     SettingsComponent,
     ShareComponent,
-    TwoFactorComponentV1,
     SsoComponentV1,
-    TwoFactorOptionsComponentV1,
     UpdateTempPasswordComponent,
     VaultComponent,
     VaultTimeoutInputComponent,

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

@@ -1,33 +0,0 @@
-<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="twoStepTitle">
-  <div class="modal-dialog" role="document">
-    <div class="modal-content">
-      <div class="modal-body">
-        <div class="box">
-          <h1 class="box-header" id="twoStepTitle">
-            {{ "twoStepOptions" | i18n }}
-          </h1>
-          <div class="box-content">
-            <button
-              type="button"
-              appStopClick
-              *ngFor="let p of providers"
-              class="box-content-row"
-              (click)="choose(p)"
-            >
-              <img [src]="'images/two-factor/' + p.type + '.png'" alt="" class="img-right" />
-              <span class="text">{{ p.name }}</span>
-              <span class="detail">{{ p.description }}</span>
-            </button>
-            <button type="button" appStopClick class="box-content-row" (click)="recover()">
-              <span class="text">{{ "recoveryCodeTitle" | i18n }}</span>
-              <span class="detail">{{ "recoveryCodeDesc" | i18n }}</span>
-            </button>
-          </div>
-        </div>
-      </div>
-      <div class="modal-footer">
-        <button type="button" data-dismiss="modal">{{ "close" | i18n }}</button>
-      </div>
-    </div>
-  </div>
-</div>

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

@@ -1,24 +0,0 @@
-import { Component } from "@angular/core";
-import { Router } from "@angular/router";
-
-import { TwoFactorOptionsComponentV1 as BaseTwoFactorOptionsComponentV1 } from "@bitwarden/angular/auth/components/two-factor-options-v1.component";
-import { TwoFactorService } from "@bitwarden/common/auth/abstractions/two-factor.service";
-import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service";
-import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
-import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
-
-@Component({
-  selector: "app-two-factor-options",
-  templateUrl: "two-factor-options-v1.component.html",
-})
-export class TwoFactorOptionsComponentV1 extends BaseTwoFactorOptionsComponentV1 {
-  constructor(
-    twoFactorService: TwoFactorService,
-    router: Router,
-    i18nService: I18nService,
-    platformUtilsService: PlatformUtilsService,
-    environmentService: EnvironmentService,
-  ) {
-    super(twoFactorService, router, i18nService, platformUtilsService, window, environmentService);
-  }
-}

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

@@ -1,175 +0,0 @@
-<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">
-          <div>
-            <span *ngIf="selectedProviderType === providerType.OrganizationDuo" class="tw-mb-0">
-              {{ "duoRequiredByOrgForAccount" | i18n }}
-            </span>
-            {{ "launchDuoAndFollowStepsToFinishLoggingIn" | i18n }}
-          </div>
-        </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="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="selectedProviderType != null && isDuoProvider">
-          <button
-            (click)="launchDuoFrameless()"
-            type="button"
-            class="btn primary block"
-            [disabled]="form.loading"
-          >
-            <b> {{ "launchDuo" | i18n }} </b>
-          </button>
-        </div>
-        <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 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>
-  </form>
-</div>
-<ng-template #twoFactorOptions></ng-template>

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

@@ -1,190 +0,0 @@
-// FIXME: Update this file to be type safe and remove this and next line
-// @ts-strict-ignore
-import { Component, Inject, NgZone, OnDestroy, ViewChild, ViewContainerRef } from "@angular/core";
-import { ActivatedRoute, Router } from "@angular/router";
-import { firstValueFrom } from "rxjs";
-
-import { TwoFactorComponentV1 as BaseTwoFactorComponent } from "@bitwarden/angular/auth/components/two-factor-v1.component";
-import { WINDOW } from "@bitwarden/angular/services/injection-tokens";
-import { ModalService } from "@bitwarden/angular/services/modal.service";
-import {
-  LoginStrategyServiceAbstraction,
-  LoginEmailServiceAbstraction,
-  UserDecryptionOptionsServiceAbstraction,
-} from "@bitwarden/auth/common";
-import { ApiService } from "@bitwarden/common/abstractions/api.service";
-import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
-import { SsoLoginServiceAbstraction } from "@bitwarden/common/auth/abstractions/sso-login.service.abstraction";
-import { TwoFactorService } from "@bitwarden/common/auth/abstractions/two-factor.service";
-import { TwoFactorProviderType } from "@bitwarden/common/auth/enums/two-factor-provider-type";
-import { InternalMasterPasswordServiceAbstraction } from "@bitwarden/common/key-management/master-password/abstractions/master-password.service.abstraction";
-import { AppIdService } from "@bitwarden/common/platform/abstractions/app-id.service";
-import { BroadcasterService } from "@bitwarden/common/platform/abstractions/broadcaster.service";
-import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
-import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service";
-import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
-import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
-import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
-import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
-import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction";
-import { ToastService } from "@bitwarden/components";
-
-import { TwoFactorOptionsComponentV1 } from "./two-factor-options-v1.component";
-
-const BroadcasterSubscriptionId = "TwoFactorComponent";
-
-@Component({
-  selector: "app-two-factor",
-  templateUrl: "two-factor-v1.component.html",
-})
-export class TwoFactorComponentV1 extends BaseTwoFactorComponent implements OnDestroy {
-  @ViewChild("twoFactorOptions", { read: ViewContainerRef, static: true })
-  twoFactorOptionsModal: ViewContainerRef;
-
-  showingModal = false;
-  duoCallbackSubscriptionEnabled: boolean = false;
-
-  constructor(
-    loginStrategyService: LoginStrategyServiceAbstraction,
-    router: Router,
-    i18nService: I18nService,
-    apiService: ApiService,
-    platformUtilsService: PlatformUtilsService,
-    syncService: SyncService,
-    environmentService: EnvironmentService,
-    private broadcasterService: BroadcasterService,
-    private modalService: ModalService,
-    stateService: StateService,
-    private ngZone: NgZone,
-    route: ActivatedRoute,
-    logService: LogService,
-    twoFactorService: TwoFactorService,
-    appIdService: AppIdService,
-    loginEmailService: LoginEmailServiceAbstraction,
-    userDecryptionOptionsService: UserDecryptionOptionsServiceAbstraction,
-    ssoLoginService: SsoLoginServiceAbstraction,
-    configService: ConfigService,
-    masterPasswordService: InternalMasterPasswordServiceAbstraction,
-    accountService: AccountService,
-    toastService: ToastService,
-    @Inject(WINDOW) protected win: Window,
-  ) {
-    super(
-      loginStrategyService,
-      router,
-      i18nService,
-      apiService,
-      platformUtilsService,
-      win,
-      environmentService,
-      stateService,
-      route,
-      logService,
-      twoFactorService,
-      appIdService,
-      loginEmailService,
-      userDecryptionOptionsService,
-      ssoLoginService,
-      configService,
-      masterPasswordService,
-      accountService,
-      toastService,
-    );
-    this.onSuccessfulLogin = async () => {
-      // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
-      // eslint-disable-next-line @typescript-eslint/no-floating-promises
-      syncService.fullSync(true);
-    };
-
-    this.onSuccessfulLoginTde = async () => {
-      // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
-      // eslint-disable-next-line @typescript-eslint/no-floating-promises
-      syncService.fullSync(true);
-    };
-  }
-
-  async anotherMethod() {
-    const [modal, childComponent] = await this.modalService.openViewRef(
-      TwoFactorOptionsComponentV1,
-      this.twoFactorOptionsModal,
-    );
-
-    // eslint-disable-next-line rxjs-angular/prefer-takeuntil
-    modal.onShown.subscribe(() => {
-      this.showingModal = true;
-    });
-    // eslint-disable-next-line rxjs-angular/prefer-takeuntil
-    modal.onClosed.subscribe(() => {
-      this.showingModal = false;
-    });
-
-    // eslint-disable-next-line rxjs-angular/prefer-takeuntil, rxjs/no-async-subscribe
-    childComponent.onProviderSelected.subscribe(async (provider: TwoFactorProviderType) => {
-      modal.close();
-      this.selectedProviderType = provider;
-      await this.init();
-    });
-    // eslint-disable-next-line rxjs-angular/prefer-takeuntil
-    childComponent.onRecoverSelected.subscribe(() => {
-      modal.close();
-    });
-  }
-
-  async submit() {
-    await super.submit();
-    if (this.captchaSiteKey) {
-      const content = document.getElementById("content") as HTMLDivElement;
-      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 + "|" + message.state;
-            await this.submit();
-          }
-        });
-      });
-      this.duoCallbackSubscriptionEnabled = true;
-    }
-  }
-
-  override async launchDuoFrameless() {
-    if (this.duoFramelessUrl === null) {
-      this.toastService.showToast({
-        variant: "error",
-        title: null,
-        message: this.i18nService.t("duoHealthCheckResultsInNullAuthUrlError"),
-      });
-      return;
-    }
-
-    const duoHandOffMessage = {
-      title: this.i18nService.t("youSuccessfullyLoggedIn"),
-      message: this.i18nService.t("youMayCloseThisWindow"),
-      isCountdown: false,
-    };
-
-    // we're using the connector here as a way to set a cookie with translations
-    // before continuing to the duo frameless url
-    const env = await firstValueFrom(this.environmentService.environment$);
-    const launchUrl =
-      env.getWebVaultUrl() +
-      "/duo-redirect-connector.html" +
-      "?duoFramelessUrl=" +
-      encodeURIComponent(this.duoFramelessUrl) +
-      "&handOffMessage=" +
-      encodeURIComponent(JSON.stringify(duoHandOffMessage));
-    this.platformUtilsService.launchUri(launchUrl);
-  }
-
-  ngOnDestroy(): void {
-    if (this.duoCallbackSubscriptionEnabled) {
-      this.broadcasterService.unsubscribe(BroadcasterSubscriptionId);
-      this.duoCallbackSubscriptionEnabled = false;
-    }
-  }
-}

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

@@ -833,18 +833,6 @@
   "continue": {
     "message": "Continue"
   },
-  "enterVerificationCodeApp": {
-    "message": "Enter the 6 digit verification code from your authenticator app."
-  },
-  "enterVerificationCodeEmail": {
-    "message": "Enter the 6 digit verification code that was emailed to $EMAIL$.",
-    "placeholders": {
-      "email": {
-        "content": "$1",
-        "example": "example@gmail.com"
-      }
-    }
-  },
   "verificationCodeEmailSent": {
     "message": "Verification email sent to $EMAIL$.",
     "placeholders": {
@@ -854,18 +842,9 @@
       }
     }
   },
-  "rememberMe": {
-    "message": "Remember me"
-  },
   "dontAskAgainOnThisDeviceFor30Days": {
     "message": "Don't ask again on this device for 30 days"
   },
-  "sendVerificationCodeEmailAgain": {
-    "message": "Send verification code email again"
-  },
-  "useAnotherTwoStepMethod": {
-    "message": "Use another two-step login method"
-  },
   "selectAnotherMethod": {
     "message": "Select another method",
     "description": "Select another two-step login method"
@@ -873,9 +852,6 @@
   "useYourRecoveryCode": {
     "message": "Use your recovery code"
   },
-  "insertYubiKey": {
-    "message": "Insert your YubiKey into your computer's USB port, then touch its button."
-  },
   "insertU2f": {
     "message": "Insert your security key into your computer's USB port. If it has a button, touch it."
   },
@@ -3224,9 +3200,6 @@
   "duoHealthCheckResultsInNullAuthUrlError": {
     "message": "Error connecting with the Duo service. Use a different two-step login method or contact Duo for assistance."
   },
-  "launchDuoAndFollowStepsToFinishLoggingIn": {
-    "message": "Launch Duo and follow the steps to finish logging in."
-  },
   "duoRequiredByOrgForAccount": {
     "message": "Duo two-step login is required for your account."
   },

apps/desktop/src/scss/pages.scss

@@ -27,7 +27,6 @@
 #accessibility-cookie-page,
 #register-page,
 #hint-page,
-#two-factor-page,
 #update-temp-password-page,
 #remove-password-page {
   padding-top: 20px;
@@ -48,7 +47,6 @@
 #accessibility-cookie-page,
 #register-page,
 #hint-page,
-#two-factor-page,
 #lock-page,
 #update-temp-password-page {
   .content {