Auth/PM-15155 - 2FA Component Renames (#12092)

* PM-15155 - Move 2FA setup components into own folder

* PM-15155 - Two-factor-authenticator --> Two-factor-setup-authenticator

* PM-15155 - TwoFactorEmail --> TwoFactorSetupEmail

* PM-15155 - TwoFactorBaseComponent --> TwoFactorSetupMethodBaseComponent

* PM-15155 - Rename two-factor-setup folder to just two-factor as it is a management screen not just a setup screen

* PM-15155 - TwoFactorWebauthn --> TwoFactorSetupWebauthn

* PM-15155 - TwoFactorDuo --> TwoFactorSetupDuo

* PM-15155 - TwoFactorYubikey --> TwoFactorSetupYubikey

apps/web/src/app/admin-console/organizations/settings/two-factor-setup.component.ts

@@ -15,13 +15,13 @@ import { BillingAccountProfileStateService } from "@bitwarden/common/billing/abs
 import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
 import { DialogService } from "@bitwarden/components";
 
-import { TwoFactorDuoComponent } from "../../../auth/settings/two-factor-duo.component";
+import { TwoFactorSetupDuoComponent } from "../../../auth/settings/two-factor/two-factor-setup-duo.component";
-import { TwoFactorSetupComponent as BaseTwoFactorSetupComponent } from "../../../auth/settings/two-factor-setup.component";
+import { TwoFactorSetupComponent as BaseTwoFactorSetupComponent } from "../../../auth/settings/two-factor/two-factor-setup.component";
-import { TwoFactorVerifyComponent } from "../../../auth/settings/two-factor-verify.component";
+import { TwoFactorVerifyComponent } from "../../../auth/settings/two-factor/two-factor-verify.component";
 
 @Component({
   selector: "app-two-factor-setup",
-  templateUrl: "../../../auth/settings/two-factor-setup.component.html",
+  templateUrl: "../../../auth/settings/two-factor/two-factor-setup.component.html",
 })
 // eslint-disable-next-line rxjs-angular/prefer-takeuntil
 export class TwoFactorSetupComponent extends BaseTwoFactorSetupComponent implements OnInit {
@@ -79,12 +79,15 @@ export class TwoFactorSetupComponent extends BaseTwoFactorSetupComponent impleme
         if (!result) {
           return;
         }
-        const duoComp: DialogRef<boolean, any> = TwoFactorDuoComponent.open(this.dialogService, {
+        const duoComp: DialogRef<boolean, any> = TwoFactorSetupDuoComponent.open(
-          data: {
+          this.dialogService,
-            authResponse: result,
+          {
-            organizationId: this.organizationId,
+            data: {
+              authResponse: result,
+              organizationId: this.organizationId,
+            },
           },
-        });
+        );
         this.twoFactorSetupSubscription = duoComp.componentInstance.onChangeStatus
           .pipe(first(), takeUntil(this.destroy$))
           .subscribe((enabled: boolean) => {

apps/web/src/app/auth/settings/security/security-routing.module.ts

@@ -2,7 +2,7 @@ import { NgModule } from "@angular/core";
 import { RouterModule, Routes } from "@angular/router";
 
 import { ChangePasswordComponent } from "../change-password.component";
-import { TwoFactorSetupComponent } from "../two-factor-setup.component";
+import { TwoFactorSetupComponent } from "../two-factor/two-factor-setup.component";
 
 import { SecurityKeysComponent } from "./security-keys.component";
 import { SecurityComponent } from "./security.component";

apps/web/src/app/auth/settings/two-factor/two-factor-setup-authenticator.component.ts

@@ -18,7 +18,7 @@ import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/pl
 import { Utils } from "@bitwarden/common/platform/misc/utils";
 import { DialogService, ToastService } from "@bitwarden/components";
 
-import { TwoFactorBaseComponent } from "./two-factor-base.component";
+import { TwoFactorSetupMethodBaseComponent } from "./two-factor-setup-method-base.component";
 
 // NOTE: There are additional options available but these are just the ones we are current using.
 // See: https://github.com/neocotic/qrious#examples
@@ -35,11 +35,11 @@ declare global {
 }
 
 @Component({
-  selector: "app-two-factor-authenticator",
+  selector: "app-two-factor-setup-authenticator",
-  templateUrl: "two-factor-authenticator.component.html",
+  templateUrl: "two-factor-setup-authenticator.component.html",
 })
-export class TwoFactorAuthenticatorComponent
+export class TwoFactorSetupAuthenticatorComponent
-  extends TwoFactorBaseComponent
+  extends TwoFactorSetupMethodBaseComponent
   implements OnInit, OnDestroy
 {
   @Output() onChangeStatus = new EventEmitter<boolean>();
@@ -200,7 +200,7 @@ export class TwoFactorAuthenticatorComponent
     dialogService: DialogService,
     config: DialogConfig<AuthResponse<TwoFactorAuthenticatorResponse>>,
   ) {
-    return dialogService.open<boolean>(TwoFactorAuthenticatorComponent, config);
+    return dialogService.open<boolean>(TwoFactorSetupAuthenticatorComponent, config);
   }
 
   async launchExternalUrl(url: string) {

apps/web/src/app/auth/settings/two-factor/two-factor-setup-duo.component.ts

@@ -13,13 +13,16 @@ import { LogService } from "@bitwarden/common/platform/abstractions/log.service"
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { DialogService, ToastService } from "@bitwarden/components";
 
-import { TwoFactorBaseComponent } from "./two-factor-base.component";
+import { TwoFactorSetupMethodBaseComponent } from "./two-factor-setup-method-base.component";
 
 @Component({
-  selector: "app-two-factor-duo",
+  selector: "app-two-factor-setup-duo",
-  templateUrl: "two-factor-duo.component.html",
+  templateUrl: "two-factor-setup-duo.component.html",
 })
-export class TwoFactorDuoComponent extends TwoFactorBaseComponent implements OnInit {
+export class TwoFactorSetupDuoComponent
+  extends TwoFactorSetupMethodBaseComponent
+  implements OnInit
+{
   @Output() onChangeStatus: EventEmitter<boolean> = new EventEmitter();
 
   type = TwoFactorProviderType.Duo;
@@ -137,7 +140,7 @@ export class TwoFactorDuoComponent extends TwoFactorBaseComponent implements OnI
     dialogService: DialogService,
     config: DialogConfig<TwoFactorDuoComponentConfig>,
   ) => {
-    return dialogService.open<boolean>(TwoFactorDuoComponent, config);
+    return dialogService.open<boolean>(TwoFactorSetupDuoComponent, config);
   };
 }
 

apps/web/src/app/auth/settings/two-factor/two-factor-setup-email.component.ts

@@ -16,14 +16,17 @@ import { LogService } from "@bitwarden/common/platform/abstractions/log.service"
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { DialogService, ToastService } from "@bitwarden/components";
 
-import { TwoFactorBaseComponent } from "./two-factor-base.component";
+import { TwoFactorSetupMethodBaseComponent } from "./two-factor-setup-method-base.component";
 
 @Component({
-  selector: "app-two-factor-email",
+  selector: "app-two-factor-setup-email",
-  templateUrl: "two-factor-email.component.html",
+  templateUrl: "two-factor-setup-email.component.html",
   outputs: ["onUpdated"],
 })
-export class TwoFactorEmailComponent extends TwoFactorBaseComponent implements OnInit {
+export class TwoFactorSetupEmailComponent
+  extends TwoFactorSetupMethodBaseComponent
+  implements OnInit
+{
   @Output() onChangeStatus: EventEmitter<boolean> = new EventEmitter();
   type = TwoFactorProviderType.Email;
   sentEmail: string;
@@ -139,6 +142,6 @@ export class TwoFactorEmailComponent extends TwoFactorBaseComponent implements O
     dialogService: DialogService,
     config: DialogConfig<AuthResponse<TwoFactorEmailResponse>>,
   ) {
-    return dialogService.open<boolean>(TwoFactorEmailComponent, config);
+    return dialogService.open<boolean>(TwoFactorSetupEmailComponent, config);
   }
 }

apps/web/src/app/auth/settings/two-factor/two-factor-setup-method-base.component.ts

@@ -12,8 +12,11 @@ import { LogService } from "@bitwarden/common/platform/abstractions/log.service"
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { DialogService, ToastService } from "@bitwarden/components";
 
+/**
+ * Base class for two-factor setup components (ex: email, yubikey, webauthn, duo).
+ */
 @Directive()
-export abstract class TwoFactorBaseComponent {
+export abstract class TwoFactorSetupMethodBaseComponent {
   @Output() onUpdated = new EventEmitter<boolean>();
 
   type: TwoFactorProviderType;

apps/web/src/app/auth/settings/two-factor/two-factor-setup-webauthn.component.ts

@@ -18,7 +18,7 @@ import { LogService } from "@bitwarden/common/platform/abstractions/log.service"
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { DialogService, ToastService } from "@bitwarden/components";
 
-import { TwoFactorBaseComponent } from "./two-factor-base.component";
+import { TwoFactorSetupMethodBaseComponent } from "./two-factor-setup-method-base.component";
 
 interface Key {
   id: number;
@@ -29,10 +29,10 @@ interface Key {
 }
 
 @Component({
-  selector: "app-two-factor-webauthn",
+  selector: "app-two-factor-setup-webauthn",
-  templateUrl: "two-factor-webauthn.component.html",
+  templateUrl: "two-factor-setup-webauthn.component.html",
 })
-export class TwoFactorWebAuthnComponent extends TwoFactorBaseComponent {
+export class TwoFactorSetupWebAuthnComponent extends TwoFactorSetupMethodBaseComponent {
   type = TwoFactorProviderType.WebAuthn;
   name: string;
   keys: Key[];
@@ -213,6 +213,6 @@ export class TwoFactorWebAuthnComponent extends TwoFactorBaseComponent {
     dialogService: DialogService,
     config: DialogConfig<AuthResponse<TwoFactorWebAuthnResponse>>,
   ) {
-    return dialogService.open<boolean>(TwoFactorWebAuthnComponent, config);
+    return dialogService.open<boolean>(TwoFactorSetupWebAuthnComponent, config);
   }
 }

apps/web/src/app/auth/settings/two-factor/two-factor-setup-yubikey.component.ts

@@ -13,7 +13,7 @@ import { LogService } from "@bitwarden/common/platform/abstractions/log.service"
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { DialogService, ToastService } from "@bitwarden/components";
 
-import { TwoFactorBaseComponent } from "./two-factor-base.component";
+import { TwoFactorSetupMethodBaseComponent } from "./two-factor-setup-method-base.component";
 
 interface Key {
   key: string;
@@ -21,10 +21,13 @@ interface Key {
 }
 
 @Component({
-  selector: "app-two-factor-yubikey",
+  selector: "app-two-factor-setup-yubikey",
-  templateUrl: "two-factor-yubikey.component.html",
+  templateUrl: "two-factor-setup-yubikey.component.html",
 })
-export class TwoFactorYubiKeyComponent extends TwoFactorBaseComponent implements OnInit {
+export class TwoFactorSetupYubiKeyComponent
+  extends TwoFactorSetupMethodBaseComponent
+  implements OnInit
+{
   type = TwoFactorProviderType.Yubikey;
   keys: Key[];
   anyKeyHasNfc = false;
@@ -169,6 +172,6 @@ export class TwoFactorYubiKeyComponent extends TwoFactorBaseComponent implements
     dialogService: DialogService,
     config: DialogConfig<AuthResponse<TwoFactorYubiKeyResponse>>,
   ) {
-    return dialogService.open<boolean>(TwoFactorYubiKeyComponent, config);
+    return dialogService.open<boolean>(TwoFactorSetupYubiKeyComponent, config);
   }
 }

apps/web/src/app/auth/settings/two-factor/two-factor-setup.component.ts

@@ -29,13 +29,13 @@ import { ProductTierType } from "@bitwarden/common/billing/enums";
 import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
 import { DialogService } from "@bitwarden/components";
 
-import { TwoFactorAuthenticatorComponent } from "./two-factor-authenticator.component";
-import { TwoFactorDuoComponent } from "./two-factor-duo.component";
-import { TwoFactorEmailComponent } from "./two-factor-email.component";
 import { TwoFactorRecoveryComponent } from "./two-factor-recovery.component";
+import { TwoFactorSetupAuthenticatorComponent } from "./two-factor-setup-authenticator.component";
+import { TwoFactorSetupDuoComponent } from "./two-factor-setup-duo.component";
+import { TwoFactorSetupEmailComponent } from "./two-factor-setup-email.component";
+import { TwoFactorSetupWebAuthnComponent } from "./two-factor-setup-webauthn.component";
+import { TwoFactorSetupYubiKeyComponent } from "./two-factor-setup-yubikey.component";
 import { TwoFactorVerifyComponent } from "./two-factor-verify.component";
-import { TwoFactorWebAuthnComponent } from "./two-factor-webauthn.component";
-import { TwoFactorYubiKeyComponent } from "./two-factor-yubikey.component";
 
 @Component({
   selector: "app-two-factor-setup",
@@ -142,7 +142,7 @@ export class TwoFactorSetupComponent implements OnInit, OnDestroy {
         if (!result) {
           return;
         }
-        const authComp: DialogRef<boolean, any> = TwoFactorAuthenticatorComponent.open(
+        const authComp: DialogRef<boolean, any> = TwoFactorSetupAuthenticatorComponent.open(
           this.dialogService,
           { data: result },
         );
@@ -160,7 +160,7 @@ export class TwoFactorSetupComponent implements OnInit, OnDestroy {
         if (!result) {
           return;
         }
-        const yubiComp: DialogRef<boolean, any> = TwoFactorYubiKeyComponent.open(
+        const yubiComp: DialogRef<boolean, any> = TwoFactorSetupYubiKeyComponent.open(
           this.dialogService,
           { data: result },
         );
@@ -177,11 +177,14 @@ export class TwoFactorSetupComponent implements OnInit, OnDestroy {
         if (!result) {
           return;
         }
-        const duoComp: DialogRef<boolean, any> = TwoFactorDuoComponent.open(this.dialogService, {
+        const duoComp: DialogRef<boolean, any> = TwoFactorSetupDuoComponent.open(
-          data: {
+          this.dialogService,
-            authResponse: result,
+          {
+            data: {
+              authResponse: result,
+            },
           },
-        });
+        );
         this.twoFactorSetupSubscription = duoComp.componentInstance.onChangeStatus
           .pipe(first(), takeUntil(this.destroy$))
           .subscribe((enabled: boolean) => {
@@ -196,7 +199,7 @@ export class TwoFactorSetupComponent implements OnInit, OnDestroy {
         if (!result) {
           return;
         }
-        const emailComp: DialogRef<boolean, any> = TwoFactorEmailComponent.open(
+        const emailComp: DialogRef<boolean, any> = TwoFactorSetupEmailComponent.open(
           this.dialogService,
           {
             data: result,
@@ -216,7 +219,7 @@ export class TwoFactorSetupComponent implements OnInit, OnDestroy {
         if (!result) {
           return;
         }
-        const webAuthnComp: DialogRef<boolean, any> = TwoFactorWebAuthnComponent.open(
+        const webAuthnComp: DialogRef<boolean, any> = TwoFactorSetupWebAuthnComponent.open(
           this.dialogService,
           { data: result },
         );

apps/web/src/app/shared/loose-components.module.ts

@@ -41,14 +41,14 @@ import { ApiKeyComponent } from "../auth/settings/security/api-key.component";
 import { ChangeKdfModule } from "../auth/settings/security/change-kdf/change-kdf.module";
 import { SecurityKeysComponent } from "../auth/settings/security/security-keys.component";
 import { SecurityComponent } from "../auth/settings/security/security.component";
-import { TwoFactorAuthenticatorComponent } from "../auth/settings/two-factor-authenticator.component";
+import { TwoFactorRecoveryComponent } from "../auth/settings/two-factor/two-factor-recovery.component";
-import { TwoFactorDuoComponent } from "../auth/settings/two-factor-duo.component";
+import { TwoFactorSetupAuthenticatorComponent } from "../auth/settings/two-factor/two-factor-setup-authenticator.component";
-import { TwoFactorEmailComponent } from "../auth/settings/two-factor-email.component";
+import { TwoFactorSetupDuoComponent } from "../auth/settings/two-factor/two-factor-setup-duo.component";
-import { TwoFactorRecoveryComponent } from "../auth/settings/two-factor-recovery.component";
+import { TwoFactorSetupEmailComponent } from "../auth/settings/two-factor/two-factor-setup-email.component";
-import { TwoFactorSetupComponent } from "../auth/settings/two-factor-setup.component";
+import { TwoFactorSetupWebAuthnComponent } from "../auth/settings/two-factor/two-factor-setup-webauthn.component";
-import { TwoFactorVerifyComponent } from "../auth/settings/two-factor-verify.component";
+import { TwoFactorSetupYubiKeyComponent } from "../auth/settings/two-factor/two-factor-setup-yubikey.component";
-import { TwoFactorWebAuthnComponent } from "../auth/settings/two-factor-webauthn.component";
+import { TwoFactorSetupComponent } from "../auth/settings/two-factor/two-factor-setup.component";
-import { TwoFactorYubiKeyComponent } from "../auth/settings/two-factor-yubikey.component";
+import { TwoFactorVerifyComponent } from "../auth/settings/two-factor/two-factor-verify.component";
 import { UserVerificationModule } from "../auth/shared/components/user-verification";
 import { SsoComponent } from "../auth/sso.component";
 import { TwoFactorOptionsComponent } from "../auth/two-factor-options.component";
@@ -159,16 +159,16 @@ import { SharedModule } from "./shared.module";
     SponsoredFamiliesComponent,
     SponsoringOrgRowComponent,
     SsoComponent,
-    TwoFactorAuthenticatorComponent,
+    TwoFactorSetupAuthenticatorComponent,
     TwoFactorComponent,
-    TwoFactorDuoComponent,
+    TwoFactorSetupDuoComponent,
-    TwoFactorEmailComponent,
+    TwoFactorSetupEmailComponent,
     TwoFactorOptionsComponent,
     TwoFactorRecoveryComponent,
     TwoFactorSetupComponent,
     TwoFactorVerifyComponent,
-    TwoFactorWebAuthnComponent,
+    TwoFactorSetupWebAuthnComponent,
-    TwoFactorYubiKeyComponent,
+    TwoFactorSetupYubiKeyComponent,
     UpdatePasswordComponent,
     UpdateTempPasswordComponent,
     VerifyEmailTokenComponent,
@@ -226,16 +226,16 @@ import { SharedModule } from "./shared.module";
     SponsoredFamiliesComponent,
     SponsoringOrgRowComponent,
     SsoComponent,
-    TwoFactorAuthenticatorComponent,
+    TwoFactorSetupAuthenticatorComponent,
     TwoFactorComponent,
-    TwoFactorDuoComponent,
+    TwoFactorSetupDuoComponent,
-    TwoFactorEmailComponent,
+    TwoFactorSetupEmailComponent,
     TwoFactorOptionsComponent,
     TwoFactorRecoveryComponent,
     TwoFactorSetupComponent,
     TwoFactorVerifyComponent,
-    TwoFactorWebAuthnComponent,
+    TwoFactorSetupWebAuthnComponent,
-    TwoFactorYubiKeyComponent,
+    TwoFactorSetupYubiKeyComponent,
     UpdatePasswordComponent,
     UpdateTempPasswordComponent,
     UserLayoutComponent,