[PM-13651] migrate verify recover delete provider component (#11586)

* Refactor VerifyRevocerDeleteProvider component to use component library

* Remove components form loose-components.module

* Refactor submit function definition into expression

* Move module out of oss, implement AnonLayoutComponentWrapper route

* Add type to button

* Remove try/catch with error logging

* remove logger service, remove formPromise field

apps/web/src/app/admin-console/providers/providers.component.html

@@ -1,30 +0,0 @@
-<app-header></app-header>
-
-<bit-container>
-  <p *ngIf="!loaded" class="text-muted">
-    <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
-    <span class="tw-sr-only">{{ "loading" | i18n }}</span>
-  </p>
-  <ng-container *ngIf="loaded">
-    <table class="table table-hover table-list" *ngIf="providers && providers.length">
-      <tbody>
-        <tr *ngFor="let p of providers">
-          <td width="30">
-            <bit-avatar [text]="p.name" [id]="p.id" size="small"></bit-avatar>
-          </td>
-          <td>
-            <a href="#" [routerLink]="['/providers', p.id]">{{ p.name }}</a>
-            <ng-container *ngIf="!p.enabled">
-              <i
-                class="bwi bwi-exclamation-triangle text-danger"
-                title="{{ 'providerIsDisabled' | i18n }}"
-                aria-hidden="true"
-              ></i>
-              <span class="tw-sr-only">{{ "providerIsDisabled" | i18n }}</span>
-            </ng-container>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </ng-container>
-</bit-container>

apps/web/src/app/admin-console/providers/providers.component.ts

@@ -1,33 +0,0 @@
-import { Component, OnInit } from "@angular/core";
-
-import { ProviderService } from "@bitwarden/common/admin-console/abstractions/provider.service";
-import { Provider } from "@bitwarden/common/admin-console/models/domain/provider";
-import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
-import { Utils } from "@bitwarden/common/platform/misc/utils";
-
-@Component({
-  selector: "app-providers",
-  templateUrl: "providers.component.html",
-})
-export class ProvidersComponent implements OnInit {
-  providers: Provider[];
-  loaded = false;
-  actionPromise: Promise<any>;
-
-  constructor(
-    private providerService: ProviderService,
-    private i18nService: I18nService,
-  ) {}
-
-  async ngOnInit() {
-    document.body.classList.remove("layout_frontend");
-    await this.load();
-  }
-
-  async load() {
-    const providers = await this.providerService.getAll();
-    providers.sort(Utils.getSortFunction(this.i18nService, "name"));
-    this.providers = providers;
-    this.loaded = true;
-  }
-}

apps/web/src/app/admin-console/providers/verify-recover-delete-provider.component.html

@@ -1,34 +0,0 @@
-<form #form (ngSubmit)="submit()" [appApiAction]="formPromise" class="container" ngNativeValidate>
-  <div class="row justify-content-md-center mt-5">
-    <div class="col-5">
-      <p class="lead text-center mb-4">{{ "deleteProvider" | i18n }}</p>
-      <div class="card">
-        <div class="card-body">
-          <app-callout type="warning">{{ "deleteProviderWarning" | i18n }}</app-callout>
-          <p class="text-center">
-            <strong>{{ name }}</strong>
-          </p>
-          <p>{{ "deleteProviderRecoverConfirmDesc" | i18n }}</p>
-          <hr />
-          <div class="d-flex">
-            <button
-              type="submit"
-              class="btn btn-danger btn-block btn-submit"
-              [disabled]="form.loading"
-            >
-              <span>{{ "deleteProvider" | i18n }}</span>
-              <i
-                class="bwi bwi-spinner bwi-spin"
-                title="{{ 'loading' | i18n }}"
-                aria-hidden="true"
-              ></i>
-            </button>
-            <a routerLink="/login" class="btn btn-outline-secondary btn-block ml-2 mt-0">
-              {{ "cancel" | i18n }}
-            </a>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</form>

apps/web/src/app/admin-console/providers/verify-recover-delete-provider.component.ts

@@ -1,63 +0,0 @@
-import { Component, OnInit } from "@angular/core";
-import { ActivatedRoute, Router } from "@angular/router";
-import { firstValueFrom } from "rxjs";
-
-import { ProviderApiServiceAbstraction } from "@bitwarden/common/admin-console/abstractions/provider/provider-api.service.abstraction";
-import { ProviderVerifyRecoverDeleteRequest } from "@bitwarden/common/admin-console/models/request/provider/provider-verify-recover-delete.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";
-
-@Component({
-  selector: "app-verify-recover-delete-provider",
-  templateUrl: "verify-recover-delete-provider.component.html",
-})
-// eslint-disable-next-line rxjs-angular/prefer-takeuntil
-export class VerifyRecoverDeleteProviderComponent implements OnInit {
-  name: string;
-  formPromise: Promise<any>;
-
-  private providerId: string;
-  private token: string;
-
-  constructor(
-    private router: Router,
-    private providerApiService: ProviderApiServiceAbstraction,
-    private platformUtilsService: PlatformUtilsService,
-    private i18nService: I18nService,
-    private route: ActivatedRoute,
-    private logService: LogService,
-    private toastService: ToastService,
-  ) {}
-
-  async ngOnInit() {
-    const qParams = await firstValueFrom(this.route.queryParams);
-    if (qParams.providerId != null && qParams.token != null && qParams.name != null) {
-      this.providerId = qParams.providerId;
-      this.token = qParams.token;
-      this.name = qParams.name;
-    } else {
-      await this.router.navigate(["/"]);
-    }
-  }
-
-  async submit() {
-    try {
-      const request = new ProviderVerifyRecoverDeleteRequest(this.token);
-      this.formPromise = this.providerApiService.providerRecoverDeleteToken(
-        this.providerId,
-        request,
-      );
-      await this.formPromise;
-      this.toastService.showToast({
-        variant: "success",
-        title: this.i18nService.t("providerDeleted"),
-        message: this.i18nService.t("providerDeletedDesc"),
-      });
-      await this.router.navigate(["/"]);
-    } catch (e) {
-      this.logService.error(e);
-    }
-  }
-}

apps/web/src/app/oss-routing.module.ts

@@ -40,7 +40,6 @@ import { flagEnabled, Flags } from "../utils/flags";
 import { VerifyRecoverDeleteOrgComponent } from "./admin-console/organizations/manage/verify-recover-delete-org.component";
 import { AcceptFamilySponsorshipComponent } from "./admin-console/organizations/sponsorships/accept-family-sponsorship.component";
 import { FamiliesForEnterpriseSetupComponent } from "./admin-console/organizations/sponsorships/families-for-enterprise-setup.component";
-import { VerifyRecoverDeleteProviderComponent } from "./admin-console/providers/verify-recover-delete-provider.component";
 import { CreateOrganizationComponent } from "./admin-console/settings/create-organization.component";
 import { deepLinkGuard } from "./auth/guards/deep-link.guard";
 import { HintComponent } from "./auth/hint.component";
@@ -156,12 +155,6 @@ const routes: Routes = [
         canActivate: [unauthGuardFn()],
         data: { titleId: "deleteOrganization" },
       },
-      {
-        path: "verify-recover-delete-provider",
-        component: VerifyRecoverDeleteProviderComponent,
-        canActivate: [unauthGuardFn()],
-        data: { titleId: "deleteAccount" } satisfies RouteDataProperties,
-      },
       {
         path: "update-temp-password",
         component: UpdateTempPasswordComponent,

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

@@ -17,8 +17,6 @@ import { InactiveTwoFactorReportComponent as OrgInactiveTwoFactorReportComponent
 import { ReusedPasswordsReportComponent as OrgReusedPasswordsReportComponent } from "../admin-console/organizations/tools/reused-passwords-report.component";
 import { UnsecuredWebsitesReportComponent as OrgUnsecuredWebsitesReportComponent } from "../admin-console/organizations/tools/unsecured-websites-report.component";
 import { WeakPasswordsReportComponent as OrgWeakPasswordsReportComponent } from "../admin-console/organizations/tools/weak-passwords-report.component";
-import { ProvidersComponent } from "../admin-console/providers/providers.component";
-import { VerifyRecoverDeleteProviderComponent } from "../admin-console/providers/verify-recover-delete-provider.component";
 import { HintComponent } from "../auth/hint.component";
 import { RecoverDeleteComponent } from "../auth/recover-delete.component";
 import { RecoverTwoFactorComponent } from "../auth/recover-two-factor.component";
@@ -149,7 +147,6 @@ import { SharedModule } from "./shared.module";
     PremiumBadgeComponent,
     ProfileComponent,
     ChangeAvatarDialogComponent,
-    ProvidersComponent,
     PurgeVaultComponent,
     RecoverDeleteComponent,
     RecoverTwoFactorComponent,
@@ -176,7 +173,6 @@ import { SharedModule } from "./shared.module";
     UpdateTempPasswordComponent,
     VerifyEmailTokenComponent,
     VerifyRecoverDeleteComponent,
-    VerifyRecoverDeleteProviderComponent,
   ],
   exports: [
     UserVerificationModule,
@@ -218,7 +214,6 @@ import { SharedModule } from "./shared.module";
     PremiumBadgeComponent,
     ProfileComponent,
     ChangeAvatarDialogComponent,
-    ProvidersComponent,
     PurgeVaultComponent,
     RecoverDeleteComponent,
     RecoverTwoFactorComponent,
@@ -246,7 +241,6 @@ import { SharedModule } from "./shared.module";
     UserLayoutComponent,
     VerifyEmailTokenComponent,
     VerifyRecoverDeleteComponent,
-    VerifyRecoverDeleteProviderComponent,
     HeaderModule,
     DangerZoneComponent,
   ],