[PM-8976] Migrate two-factor-setup component

apps/browser/src/popup/scss/plugins.scss

@@ -21,11 +21,3 @@
     max-width: 100px;
   }
 }
-
-.recovery-code-img {
-  @include themify($themes) {
-    content: url("../images/two-factor/rc" + themed("mfaLogoSuffix"));
-    max-width: 100px;
-    max-height: 45px;
-  }
-}

apps/desktop/src/scss/plugins.scss

@@ -21,11 +21,3 @@
     max-width: 100px;
   }
 }
-
-.recovery-code-img {
-  @include themify($themes) {
-    content: url("../images/two-factor/rc" + themed("mfaLogoSuffix"));
-    max-width: 100px;
-    max-height: 45px;
-  }
-}

apps/web/src/app/admin-console/organizations/settings/organization-settings.module.ts

@@ -1,12 +1,12 @@
 import { NgModule } from "@angular/core";
 
+import { TwoFactorModule } from "../../../auth/settings/two-factor/two-factor.module";
 import { LooseComponentsModule, SharedModule } from "../../../shared";
 import { AccountFingerprintComponent } from "../../../shared/components/account-fingerprint/account-fingerprint.component";
 import { PoliciesModule } from "../../organizations/policies";
 
 import { AccountComponent } from "./account.component";
 import { OrganizationSettingsRoutingModule } from "./organization-settings-routing.module";
-import { TwoFactorSetupComponent } from "./two-factor-setup.component";
 
 @NgModule({
   imports: [
@@ -15,7 +15,8 @@ import { TwoFactorSetupComponent } from "./two-factor-setup.component";
     PoliciesModule,
     OrganizationSettingsRoutingModule,
     AccountFingerprintComponent,
+    TwoFactorModule,
   ],
-  declarations: [AccountComponent, TwoFactorSetupComponent],
+  declarations: [AccountComponent],
 })
 export class OrganizationSettingsModule {}

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

@@ -1,5 +1,3 @@
-// FIXME: Update this file to be type safe and remove this and next line
-// @ts-strict-ignore
 import { DialogRef } from "@angular/cdk/dialog";
 import { Component, OnInit } from "@angular/core";
 import { ActivatedRoute } from "@angular/router";
@@ -21,17 +19,22 @@ import { BillingAccountProfileStateService } from "@bitwarden/common/billing/abs
 import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
-import { DialogService } from "@bitwarden/components";
+import { DialogService, ItemModule } from "@bitwarden/components";
 
 import { TwoFactorSetupDuoComponent } from "../../../auth/settings/two-factor/two-factor-setup-duo.component";
 import { TwoFactorSetupComponent as BaseTwoFactorSetupComponent } from "../../../auth/settings/two-factor/two-factor-setup.component";
 import { TwoFactorVerifyComponent } from "../../../auth/settings/two-factor/two-factor-verify.component";
+import { TwoFactorModule } from "../../../auth/settings/two-factor/two-factor.module";
+import { HeaderModule } from "../../../layouts/header/header.module";
+import { SharedModule } from "../../../shared";
+import { LooseComponentsModule } from "../../../shared/loose-components.module";
 
 @Component({
   selector: "app-two-factor-setup",
   templateUrl: "../../../auth/settings/two-factor/two-factor-setup.component.html",
+  standalone: true,
+  imports: [SharedModule, TwoFactorModule, HeaderModule, ItemModule, LooseComponentsModule],
 })
-// eslint-disable-next-line rxjs-angular/prefer-takeuntil
 export class TwoFactorSetupComponent extends BaseTwoFactorSetupComponent implements OnInit {
   tabbedHeader = false;
   constructor(
@@ -120,7 +123,9 @@ export class TwoFactorSetupComponent extends BaseTwoFactorSetupComponent impleme
     return this.apiService.getTwoFactorOrganizationProviders(this.organizationId);
   }
 
-  protected filterProvider(type: TwoFactorProviderType) {
+  protected filterProvider(
+    type: TwoFactorProviderType,
+  ): type is TwoFactorProviderType.OrganizationDuo {
     return type !== TwoFactorProviderType.OrganizationDuo;
   }
 }

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

@@ -41,7 +41,7 @@
           {{ "twoStepAuthenticatorInstructionSuffix" | i18n }}
         </p>
 
-        <p class="text-center">
+        <p class="tw-text-center">
           <a
             href="https://apps.apple.com/ca/app/bitwarden-authenticator/id6497335175"
             target="_blank"

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

@@ -9,15 +9,15 @@
         <app-callout type="success" title="{{ 'enabled' | i18n }}" icon="bwi bwi-check-circle">
           {{ "twoStepLoginProviderEnabled" | i18n }}
         </app-callout>
-        <img class="tw-float-right tw-ml-3 mfaType2" alt="Duo logo" />
+        <img class="tw-float-right tw-ml-3" alt="Duo logo" />
         <strong>{{ "twoFactorDuoClientId" | i18n }}:</strong> {{ clientId }}
         <br />
         <strong>{{ "twoFactorDuoClientSecret" | i18n }}:</strong> {{ clientSecret }}
         <br />
         <strong>{{ "twoFactorDuoApiHostname" | i18n }}:</strong> {{ host }}
       </ng-container>
       <ng-container *ngIf="!enabled">
-        <img class="tw-float-right tw-ml-3 mfaType2" alt="Duo logo" />
+        <img class="tw-float-right tw-ml-3" alt="Duo logo" />
         <p bitTypography="body1">{{ "twoFactorDuoDesc" | i18n }}</p>
         <bit-form-field>
           <bit-label>{{ "twoFactorDuoClientId" | i18n }}</bit-label>

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

@@ -14,7 +14,7 @@
       <ng-container *ngIf="!enabled">
         <p class="tw-flex">
           <span class="tw-mr-3">{{ "twoFactorEmailDesc" | i18n }}</span>
-          <img class="tw-float-right tw-ml-auto mfaType1" alt="Email logo" />
+          <img class="tw-float-right tw-ml-auto" alt="Email logo" />
         </p>
         <bit-form-field>
           <bit-label>1. {{ "twoFactorEmailEnterEmail" | i18n }}</bit-label>

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

@@ -16,7 +16,7 @@
       <app-callout type="warning">
         <p bitTypography="body1">{{ "twoFactorWebAuthnWarning1" | i18n }}</p>
       </app-callout>
-      <img class="tw-float-right tw-ml-5 mfaType7" alt="FIDO2 WebAuthn logo" />
+      <img class="tw-float-right tw-ml-5" alt="FIDO2 WebAuthn logo" />
       <ul class="bwi-ul">
         <li *ngFor="let k of keys; let i = index" #removeKeyBtn [appApiAction]="k.removePromise">
           <i class="bwi bwi-li bwi-key"></i>

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

@@ -20,7 +20,7 @@
           <li>{{ "twoFactorYubikeySupportMobile" | i18n }}</li>
         </ul>
       </app-callout>
-      <img class="tw-float-right mfaType3" alt="YubiKey OTP security key logo" />
+      <img class="tw-float-right" alt="YubiKey OTP security key logo" />
       <p bitTypography="body1">{{ "twoFactorYubikeyAdd" | i18n }}:</p>
       <ol bitTypography="body1">
         <li>{{ "twoFactorYubikeyPlugIn" | i18n }}</li>

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

@@ -1,7 +1,7 @@
 <app-header *ngIf="organizationId != null"></app-header>
 
 <bit-container>
-  <div class="tabbed-header" *ngIf="organizationId == null">
+  <div class="tw-mt-6 tw-mb-2 tw-pb-2.5" *ngIf="organizationId == null">
     <h1 *ngIf="!organizationId || !isEnterpriseOrg">{{ "twoStepLogin" | i18n }}</h1>
     <h1 *ngIf="organizationId && isEnterpriseOrg">{{ "twoStepLoginEnforcement" | i18n }}</h1>
   </div>
@@ -35,7 +35,7 @@ <h2 [ngClass]="{ 'mt-5': !organizationId }">
     {{ "providers" | i18n }}
     <small *ngIf="loading">
       <i
-        class="bwi bwi-spinner bwi-spin bwi-fw text-muted"
+        class="bwi bwi-spinner bwi-spin bwi-fw tw-text-muted"
         title="{{ 'loading' | i18n }}"
         aria-hidden="true"
       ></i>
@@ -45,32 +45,32 @@ <h2 [ngClass]="{ 'mt-5': !organizationId }">
   <bit-callout type="warning" *ngIf="showPolicyWarning">
     {{ "twoStepLoginPolicyUserWarning" | i18n }}
   </bit-callout>
-  <ul class="list-group list-group-2fa">
-    <li *ngFor="let p of providers" class="list-group-item d-flex align-items-center">
-      <div class="logo-2fa d-flex justify-content-center">
-        <auth-two-factor-icon [provider]="p.type" [name]="p.name" />
+  <bit-item-group [attr.aria-label]="'providers' | i18n">
+    <bit-item *ngFor="let p of providers" class="tw-py-4">
+      <div slot="start" class="tw-min-w-[120px] tw-flex tw-justify-center">
+        <auth-two-factor-icon class="tw-flex tw-items-center" [provider]="p.type" [name]="p.name" />
       </div>
-      <div class="mx-4">
-        <h3 class="mb-0">
+      <div bit-item-content class="tw-px-4">
+        <h3 class="tw-mb-0">
           <div
-            class="font-weight-semibold tw-text-base"
+            class="tw-font-semibold tw-text-base"
             [style]="p.enabled || p.premium ? 'display:inline-block' : ''"
           >
             {{ p.name }}
           </div>
           <ng-container *ngIf="p.enabled">
             <i
-              class="bwi bwi-check text-success bwi-fw"
+              class="bwi bwi-check tw-text-success-600 bwi-fw tw-ml-2"
               title="{{ 'enabled' | i18n }}"
               aria-hidden="true"
             ></i>
             <span class="tw-sr-only">{{ "enabled" | i18n }}</span>
           </ng-container>
-          <app-premium-badge *ngIf="p.premium"></app-premium-badge>
+          <app-premium-badge class="tw-ml-2" *ngIf="p.premium"></app-premium-badge>
         </h3>
-        {{ p.description }}
+        <div class="tw-mt-2">{{ p.description }}</div>
       </div>
-      <div class="ml-auto">
+      <bit-item-action slot="end">
         <button
           type="button"
           bitButton
@@ -80,9 +80,9 @@ <h3 class="mb-0">
         >
           {{ "manage" | i18n }}
         </button>
-      </div>
-    </li>
-  </ul>
+      </bit-item-action>
+    </bit-item>
+  </bit-item-group>
 </bit-container>
 
 <ng-template #duoTemplate></ng-template>

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

@@ -1,7 +1,9 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
 import { DialogRef } from "@angular/cdk/dialog";
+import { CommonModule } from "@angular/common";
 import { Component, OnDestroy, OnInit, ViewChild, ViewContainerRef } from "@angular/core";
+import { RouterModule } from "@angular/router";
 import {
   first,
   firstValueFrom,
@@ -14,6 +16,7 @@ import {
 } from "rxjs";
 
 import { ModalRef } from "@bitwarden/angular/components/modal/modal.ref";
+import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { PolicyService } from "@bitwarden/common/admin-console/abstractions/policy/policy.service.abstraction";
 import { PolicyType } from "@bitwarden/common/admin-console/enums";
@@ -33,7 +36,18 @@ import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
 import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
-import { DialogService } from "@bitwarden/components";
+import {
+  ButtonModule,
+  CalloutModule,
+  DialogService,
+  ItemModule,
+  LinkModule,
+  ContainerComponent,
+} from "@bitwarden/components";
+
+import { HeaderModule } from "../../../layouts/header/header.module";
+import { LooseComponentsModule } from "../../../shared/loose-components.module";
+import { SharedModule } from "../../../shared/shared.module";
 
 import { TwoFactorRecoveryComponent } from "./two-factor-recovery.component";
 import { TwoFactorSetupAuthenticatorComponent } from "./two-factor-setup-authenticator.component";
@@ -46,6 +60,20 @@ import { TwoFactorVerifyComponent } from "./two-factor-verify.component";
 @Component({
   selector: "app-two-factor-setup",
   templateUrl: "two-factor-setup.component.html",
+  standalone: true,
+  imports: [
+    CommonModule,
+    SharedModule,
+    RouterModule,
+    ItemModule,
+    CalloutModule,
+    ButtonModule,
+    HeaderModule,
+    JslibModule,
+    LinkModule,
+    LooseComponentsModule,
+    ContainerComponent,
+  ],
 })
 export class TwoFactorSetupComponent implements OnInit, OnDestroy {
   @ViewChild("yubikeyTemplate", { read: ViewContainerRef, static: true })

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

@@ -1,9 +1,12 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
 import { DIALOG_DATA, DialogConfig, DialogRef } from "@angular/cdk/dialog";
+import { CommonModule } from "@angular/common";
 import { Component, EventEmitter, Inject, Output } from "@angular/core";
-import { FormControl, FormGroup } from "@angular/forms";
+import { FormControl, FormGroup, ReactiveFormsModule } from "@angular/forms";
 
+import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { UserVerificationFormInputComponent } from "@bitwarden/auth/angular";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { UserVerificationService } from "@bitwarden/common/auth/abstractions/user-verification/user-verification.service.abstraction";
 import { TwoFactorProviderType } from "@bitwarden/common/auth/enums/two-factor-provider-type";
@@ -14,7 +17,15 @@ import { TwoFactorResponse } from "@bitwarden/common/auth/types/two-factor-respo
 import { Verification } from "@bitwarden/common/auth/types/verification";
 import { ErrorResponse } from "@bitwarden/common/models/response/error.response";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
-import { DialogService } from "@bitwarden/components";
+import {
+  DialogService,
+  DialogModule,
+  FormFieldModule,
+  ButtonModule,
+  AsyncActionsModule,
+} from "@bitwarden/components";
+
+import { UserVerificationModule } from "../../shared/components/user-verification";
 
 type TwoFactorVerifyDialogData = {
   type: TwoFactorProviderType;
@@ -24,6 +35,18 @@ type TwoFactorVerifyDialogData = {
 @Component({
   selector: "app-two-factor-verify",
   templateUrl: "two-factor-verify.component.html",
+  standalone: true,
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    JslibModule,
+    UserVerificationModule,
+    DialogModule,
+    FormFieldModule,
+    ButtonModule,
+    AsyncActionsModule,
+    UserVerificationFormInputComponent,
+  ],
 })
 export class TwoFactorVerifyComponent {
   type: TwoFactorProviderType;

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

@@ -0,0 +1,51 @@
+import { CommonModule } from "@angular/common";
+import { NgModule } from "@angular/core";
+import { RouterModule } from "@angular/router";
+
+import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { ButtonModule, CalloutModule, ItemModule, LinkModule } from "@bitwarden/components";
+
+import { HeaderModule } from "../../../layouts/header/header.module";
+import { LooseComponentsModule } from "../../../shared/loose-components.module";
+import { SharedModule } from "../../../shared/shared.module";
+import { UserVerificationModule } from "../../shared/components/user-verification";
+
+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";
+
+@NgModule({
+  imports: [
+    CommonModule,
+    SharedModule,
+    RouterModule,
+    ItemModule,
+    CalloutModule,
+    ButtonModule,
+    HeaderModule,
+    UserVerificationModule,
+    JslibModule,
+    LinkModule,
+    LooseComponentsModule,
+  ],
+  declarations: [
+    TwoFactorRecoveryComponent,
+    TwoFactorSetupAuthenticatorComponent,
+    TwoFactorSetupDuoComponent,
+    TwoFactorSetupEmailComponent,
+    TwoFactorSetupWebAuthnComponent,
+    TwoFactorSetupYubiKeyComponent,
+  ],
+  exports: [
+    TwoFactorRecoveryComponent,
+    TwoFactorSetupAuthenticatorComponent,
+    TwoFactorSetupDuoComponent,
+    TwoFactorSetupEmailComponent,
+    TwoFactorSetupWebAuthnComponent,
+    TwoFactorSetupYubiKeyComponent,
+  ],
+})
+export class TwoFactorModule {}