[PM-28809] Migrate last auth from LooseComponentsModule (#17650)

Migrates the last auth owned components from `LooseComponentsModule`.

apps/web/src/app/auth/recover-delete.component.ts

@@ -1,21 +1,37 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
 import { Component } from "@angular/core";
-import { FormControl, FormGroup, Validators } from "@angular/forms";
-import { Router } from "@angular/router";
+import { FormControl, FormGroup, ReactiveFormsModule, Validators } from "@angular/forms";
+import { Router, RouterLink } from "@angular/router";
 
+import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { DeleteRecoverRequest } from "@bitwarden/common/models/request/delete-recover.request";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
-import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
-import { ToastService } from "@bitwarden/components";
+import {
+  AsyncActionsModule,
+  ButtonModule,
+  FormFieldModule,
+  ToastService,
+  TypographyModule,
+} from "@bitwarden/components";
+import { I18nPipe } from "@bitwarden/ui-common";
 
 // FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
 // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
 @Component({
   selector: "app-recover-delete",
   templateUrl: "recover-delete.component.html",
-  standalone: false,
+  imports: [
+    ReactiveFormsModule,
+    RouterLink,
+    JslibModule,
+    AsyncActionsModule,
+    ButtonModule,
+    FormFieldModule,
+    I18nPipe,
+    TypographyModule,
+  ],
 })
 export class RecoverDeleteComponent {
   protected recoverDeleteForm = new FormGroup({
@@ -29,7 +45,6 @@ export class RecoverDeleteComponent {
   constructor(
     private router: Router,
     private apiService: ApiService,
-    private platformUtilsService: PlatformUtilsService,
     private i18nService: I18nService,
     private toastService: ToastService,
   ) {}

apps/web/src/app/auth/recover-two-factor.component.spec.ts

@@ -1,5 +1,5 @@
 import { ComponentFixture, TestBed } from "@angular/core/testing";
-import { Router } from "@angular/router";
+import { Router, provideRouter } from "@angular/router";
 import { mock, MockProxy } from "jest-mock-extended";
 
 import {
@@ -7,69 +7,49 @@ import {
   LoginSuccessHandlerService,
   PasswordLoginCredentials,
 } from "@bitwarden/auth/common";
-import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { AuthResult } from "@bitwarden/common/auth/models/domain/auth-result";
 import { ErrorResponse } from "@bitwarden/common/models/response/error.response";
-import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.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 { ValidationService } from "@bitwarden/common/platform/abstractions/validation.service";
 import { ToastService } from "@bitwarden/components";
-import { KeyService } from "@bitwarden/key-management";
-import { I18nPipe } from "@bitwarden/ui-common";
 
 import { RecoverTwoFactorComponent } from "./recover-two-factor.component";
 
 describe("RecoverTwoFactorComponent", () => {
   let component: RecoverTwoFactorComponent;
   let fixture: ComponentFixture<RecoverTwoFactorComponent>;
-
-  // Mock Services
   let mockRouter: MockProxy<Router>;
-  let mockApiService: MockProxy<ApiService>;
-  let mockPlatformUtilsService: MockProxy<PlatformUtilsService>;
   let mockI18nService: MockProxy<I18nService>;
-  let mockKeyService: MockProxy<KeyService>;
   let mockLoginStrategyService: MockProxy<LoginStrategyServiceAbstraction>;
   let mockToastService: MockProxy<ToastService>;
-  let mockConfigService: MockProxy<ConfigService>;
   let mockLoginSuccessHandlerService: MockProxy<LoginSuccessHandlerService>;
   let mockLogService: MockProxy<LogService>;
   let mockValidationService: MockProxy<ValidationService>;
 
-  beforeEach(() => {
-    mockRouter = mock<Router>();
-    mockApiService = mock<ApiService>();
-    mockPlatformUtilsService = mock<PlatformUtilsService>();
+  beforeEach(async () => {
     mockI18nService = mock<I18nService>();
-    mockKeyService = mock<KeyService>();
     mockLoginStrategyService = mock<LoginStrategyServiceAbstraction>();
     mockToastService = mock<ToastService>();
-    mockConfigService = mock<ConfigService>();
     mockLoginSuccessHandlerService = mock<LoginSuccessHandlerService>();
     mockLogService = mock<LogService>();
     mockValidationService = mock<ValidationService>();
 
-    TestBed.configureTestingModule({
-      declarations: [RecoverTwoFactorComponent],
+    await TestBed.configureTestingModule({
+      imports: [RecoverTwoFactorComponent],
       providers: [
-        { provide: Router, useValue: mockRouter },
-        { provide: ApiService, useValue: mockApiService },
-        { provide: PlatformUtilsService, mockPlatformUtilsService },
+        provideRouter([]),
         { provide: I18nService, useValue: mockI18nService },
-        { provide: KeyService, useValue: mockKeyService },
         { provide: LoginStrategyServiceAbstraction, useValue: mockLoginStrategyService },
         { provide: ToastService, useValue: mockToastService },
-        { provide: ConfigService, useValue: mockConfigService },
         { provide: LoginSuccessHandlerService, useValue: mockLoginSuccessHandlerService },
         { provide: LogService, useValue: mockLogService },
         { provide: ValidationService, useValue: mockValidationService },
       ],
-      imports: [I18nPipe],
-      // FIXME(PM-18598): Replace unknownElements and unknownProperties with actual imports
-      errorOnUnknownElements: false,
-    });
+    }).compileComponents();
+
+    mockRouter = TestBed.inject(Router) as MockProxy<Router>;
+    jest.spyOn(mockRouter, "navigate");
 
     fixture = TestBed.createComponent(RecoverTwoFactorComponent);
     component = fixture.componentInstance;

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

@@ -1,8 +1,9 @@
 import { Component, DestroyRef, OnInit } from "@angular/core";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
-import { FormControl, FormGroup, Validators } from "@angular/forms";
-import { Router } from "@angular/router";
+import { FormControl, FormGroup, ReactiveFormsModule, Validators } from "@angular/forms";
+import { Router, RouterLink } from "@angular/router";
 
+import { JslibModule } from "@bitwarden/angular/jslib.module";
 import {
   LoginStrategyServiceAbstraction,
   PasswordLoginCredentials,
@@ -14,14 +15,32 @@ import { ErrorResponse } from "@bitwarden/common/models/response/error.response"
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
 import { ValidationService } from "@bitwarden/common/platform/abstractions/validation.service";
-import { ToastService } from "@bitwarden/components";
+import {
+  AsyncActionsModule,
+  ButtonModule,
+  FormFieldModule,
+  LinkModule,
+  ToastService,
+  TypographyModule,
+} from "@bitwarden/components";
+import { I18nPipe } from "@bitwarden/ui-common";
 
 // FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
 // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
 @Component({
   selector: "app-recover-two-factor",
   templateUrl: "recover-two-factor.component.html",
-  standalone: false,
+  imports: [
+    ReactiveFormsModule,
+    RouterLink,
+    JslibModule,
+    AsyncActionsModule,
+    ButtonModule,
+    FormFieldModule,
+    I18nPipe,
+    LinkModule,
+    TypographyModule,
+  ],
 })
 export class RecoverTwoFactorComponent implements OnInit {
   formGroup = new FormGroup({

apps/web/src/app/auth/verify-email-token.component.ts

@@ -10,7 +10,6 @@ import { TokenService } from "@bitwarden/common/auth/abstractions/token.service"
 import { VerifyEmailRequest } from "@bitwarden/common/models/request/verify-email.request";
 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 { ToastService } from "@bitwarden/components";
 
 // FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
@@ -18,12 +17,10 @@ import { ToastService } from "@bitwarden/components";
 @Component({
   selector: "app-verify-email-token",
   templateUrl: "verify-email-token.component.html",
-  standalone: false,
 })
 export class VerifyEmailTokenComponent implements OnInit {
   constructor(
     private router: Router,
-    private platformUtilsService: PlatformUtilsService,
     private i18nService: I18nService,
     private route: ActivatedRoute,
     private apiService: ApiService,

apps/web/src/app/auth/verify-recover-delete.component.ts

@@ -1,22 +1,36 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
 import { Component, OnInit } from "@angular/core";
-import { FormGroup } from "@angular/forms";
-import { ActivatedRoute, Router } from "@angular/router";
+import { FormGroup, ReactiveFormsModule } from "@angular/forms";
+import { ActivatedRoute, Router, RouterLink } from "@angular/router";
 import { first } from "rxjs/operators";
 
+import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { VerifyDeleteRecoverRequest } from "@bitwarden/common/models/request/verify-delete-recover.request";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
-import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
-import { ToastService } from "@bitwarden/components";
+import {
+  AsyncActionsModule,
+  ButtonModule,
+  CalloutComponent,
+  ToastService,
+  TypographyModule,
+} from "@bitwarden/components";
 
 // FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
 // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
 @Component({
   selector: "app-verify-recover-delete",
   templateUrl: "verify-recover-delete.component.html",
-  standalone: false,
+  imports: [
+    ReactiveFormsModule,
+    RouterLink,
+    JslibModule,
+    AsyncActionsModule,
+    ButtonModule,
+    CalloutComponent,
+    TypographyModule,
+  ],
 })
 export class VerifyRecoverDeleteComponent implements OnInit {
   email: string;
@@ -28,7 +42,6 @@ export class VerifyRecoverDeleteComponent implements OnInit {
   constructor(
     private router: Router,
     private apiService: ApiService,
-    private platformUtilsService: PlatformUtilsService,
     private i18nService: I18nService,
     private route: ActivatedRoute,
     private toastService: ToastService,

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

@@ -1,9 +1,5 @@
 import { NgModule } from "@angular/core";
 
-import { RecoverDeleteComponent } from "../auth/recover-delete.component";
-import { RecoverTwoFactorComponent } from "../auth/recover-two-factor.component";
-import { VerifyEmailTokenComponent } from "../auth/verify-email-token.component";
-import { VerifyRecoverDeleteComponent } from "../auth/verify-recover-delete.component";
 import { FreeBitwardenFamiliesComponent } from "../billing/members/free-bitwarden-families.component";
 import { SponsoredFamiliesComponent } from "../billing/settings/sponsored-families.component";
 import { SponsoringOrgRowComponent } from "../billing/settings/sponsoring-org-row.component";
@@ -18,20 +14,10 @@ import { SharedModule } from "./shared.module";
 @NgModule({
   imports: [SharedModule, HeaderModule, OrganizationBadgeModule, PipesModule],
   declarations: [
-    RecoverDeleteComponent,
-    RecoverTwoFactorComponent,
     SponsoredFamiliesComponent,
     FreeBitwardenFamiliesComponent,
     SponsoringOrgRowComponent,
-    VerifyEmailTokenComponent,
-    VerifyRecoverDeleteComponent,
-  ],
-  exports: [
-    RecoverDeleteComponent,
-    RecoverTwoFactorComponent,
-    SponsoredFamiliesComponent,
-    VerifyEmailTokenComponent,
-    VerifyRecoverDeleteComponent,
   ],
+  exports: [SponsoredFamiliesComponent],
 })
 export class LooseComponentsModule {}