[PM-7084] 2/6: Add shared two-factor-auth orchestrator component, and TOTP two-factor component (#9768)

* Add shared two-factor-options component

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

* Fix default value for twofactorcomponentrefactor featureflag

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

@@ -19,6 +19,7 @@ import {
 } from "@bitwarden/auth/angular";
 import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
 
+import { twofactorRefactorSwap } from "../../../../libs/angular/src/utils/two-factor-component-refactor-route-swap";
 import { AccessibilityCookieComponent } from "../auth/accessibility-cookie.component";
 import { maxAccountsGuardFn } from "../auth/guards/max-accounts.guard";
 import { HintComponent } from "../auth/hint.component";
@@ -30,6 +31,7 @@ import { RegisterComponent } from "../auth/register.component";
 import { RemovePasswordComponent } from "../auth/remove-password.component";
 import { SetPasswordComponent } from "../auth/set-password.component";
 import { SsoComponent } from "../auth/sso.component";
+import { TwoFactorAuthComponent } from "../auth/two-factor-auth.component";
 import { TwoFactorComponent } from "../auth/two-factor.component";
 import { UpdateTempPasswordComponent } from "../auth/update-temp-password.component";
 import { VaultComponent } from "../vault/app/vault/vault.component";
@@ -61,7 +63,24 @@ const routes: Routes = [
     path: "admin-approval-requested",
     component: LoginViaAuthRequestComponent,
   },
-  { path: "2fa", component: TwoFactorComponent },
+  ...twofactorRefactorSwap(
+    TwoFactorComponent,
+    AnonLayoutWrapperComponent,
+    {
+      path: "2fa",
+    },
+    {
+      path: "2fa",
+      component: AnonLayoutWrapperComponent,
+      children: [
+        {
+          path: "",
+          component: TwoFactorAuthComponent,
+          canActivate: [unauthGuardFn()],
+        },
+      ],
+    },
+  ),
   {
     path: "login-initiated",
     component: LoginDecryptionOptionsComponent,

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

@@ -0,0 +1,41 @@
+import { DialogModule } from "@angular/cdk/dialog";
+import { CommonModule } from "@angular/common";
+import { Component } from "@angular/core";
+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 { 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";
+import { AsyncActionsModule } from "../../../../libs/components/src/async-actions";
+import { ButtonModule } from "../../../../libs/components/src/button";
+import { CheckboxModule } from "../../../../libs/components/src/checkbox";
+import { FormFieldModule } from "../../../../libs/components/src/form-field";
+import { LinkModule } from "../../../../libs/components/src/link";
+import { I18nPipe } from "../../../../libs/components/src/shared/i18n.pipe";
+import { TypographyModule } from "../../../../libs/components/src/typography";
+
+@Component({
+  standalone: true,
+  templateUrl:
+    "../../../../libs/angular/src/auth/components/two-factor-auth/two-factor-auth.component.html",
+  selector: "app-two-factor-auth",
+  imports: [
+    CommonModule,
+    JslibModule,
+    DialogModule,
+    ButtonModule,
+    LinkModule,
+    TypographyModule,
+    ReactiveFormsModule,
+    FormFieldModule,
+    AsyncActionsModule,
+    RouterLink,
+    CheckboxModule,
+    TwoFactorOptionsComponent,
+    TwoFactorAuthAuthenticatorComponent,
+  ],
+  providers: [I18nPipe],
+})
+export class TwoFactorAuthComponent extends BaseTwoFactorAuthComponent {}