From f86bc9bf28af22dc39123316f4aa8921d90498b3 Mon Sep 17 00:00:00 2001
From: Brandon Treston <btreston@bitwarden.com>
Date: Mon, 28 Oct 2024 11:58:16 -0400
Subject: [PATCH] [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
---
 ...ify-recover-delete-provider.component.html | 34 -------------------
 apps/web/src/app/oss-routing.module.ts        |  7 ----
 .../src/app/shared/loose-components.module.ts |  6 ----
 .../providers/providers-routing.module.ts     |  2 +-
 .../providers/providers.component.html        |  0
 .../providers/providers.component.ts          |  0
 .../providers/providers.module.ts             |  4 +++
 ...ify-recover-delete-provider.component.html | 15 ++++++++
 ...erify-recover-delete-provider.component.ts | 33 ++++++------------
 .../bit-web/src/app/app-routing.module.ts     | 16 +++++++++
 10 files changed, 46 insertions(+), 71 deletions(-)
 delete mode 100644 apps/web/src/app/admin-console/providers/verify-recover-delete-provider.component.html
 rename {apps/web => bitwarden_license/bit-web}/src/app/admin-console/providers/providers.component.html (100%)
 rename {apps/web => bitwarden_license/bit-web}/src/app/admin-console/providers/providers.component.ts (100%)
 create mode 100644 bitwarden_license/bit-web/src/app/admin-console/providers/verify-recover-delete-provider.component.html
 rename {apps/web => bitwarden_license/bit-web}/src/app/admin-console/providers/verify-recover-delete-provider.component.ts (63%)

diff --git a/apps/web/src/app/admin-console/providers/verify-recover-delete-provider.component.html b/apps/web/src/app/admin-console/providers/verify-recover-delete-provider.component.html
deleted file mode 100644
index a287a537a4..0000000000
--- a/apps/web/src/app/admin-console/providers/verify-recover-delete-provider.component.html
+++ /dev/null
@@ -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>
diff --git a/apps/web/src/app/oss-routing.module.ts b/apps/web/src/app/oss-routing.module.ts
index b3a8db2002..71d26030b0 100644
--- a/apps/web/src/app/oss-routing.module.ts
+++ b/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,
diff --git a/apps/web/src/app/shared/loose-components.module.ts b/apps/web/src/app/shared/loose-components.module.ts
index 638a523cd4..a238f2110c 100644
--- a/apps/web/src/app/shared/loose-components.module.ts
+++ b/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,
   ],
diff --git a/bitwarden_license/bit-web/src/app/admin-console/providers/providers-routing.module.ts b/bitwarden_license/bit-web/src/app/admin-console/providers/providers-routing.module.ts
index 55c22ec4ce..00c944e69b 100644
--- a/bitwarden_license/bit-web/src/app/admin-console/providers/providers-routing.module.ts
+++ b/bitwarden_license/bit-web/src/app/admin-console/providers/providers-routing.module.ts
@@ -4,7 +4,6 @@ import { RouterModule, Routes } from "@angular/router";
 import { authGuard } from "@bitwarden/angular/auth/guards";
 import { AnonLayoutWrapperComponent } from "@bitwarden/auth/angular";
 import { Provider } from "@bitwarden/common/admin-console/models/domain/provider";
-import { ProvidersComponent } from "@bitwarden/web-vault/app/admin-console/providers/providers.component";
 import { FrontendLayoutComponent } from "@bitwarden/web-vault/app/layouts/frontend-layout.component";
 import { UserLayoutComponent } from "@bitwarden/web-vault/app/layouts/user-layout.component";
 
@@ -22,6 +21,7 @@ import { AcceptProviderComponent } from "./manage/accept-provider.component";
 import { EventsComponent } from "./manage/events.component";
 import { MembersComponent } from "./manage/members.component";
 import { ProvidersLayoutComponent } from "./providers-layout.component";
+import { ProvidersComponent } from "./providers.component";
 import { AccountComponent } from "./settings/account.component";
 import { SetupProviderComponent } from "./setup/setup-provider.component";
 import { SetupComponent } from "./setup/setup.component";
diff --git a/apps/web/src/app/admin-console/providers/providers.component.html b/bitwarden_license/bit-web/src/app/admin-console/providers/providers.component.html
similarity index 100%
rename from apps/web/src/app/admin-console/providers/providers.component.html
rename to bitwarden_license/bit-web/src/app/admin-console/providers/providers.component.html
diff --git a/apps/web/src/app/admin-console/providers/providers.component.ts b/bitwarden_license/bit-web/src/app/admin-console/providers/providers.component.ts
similarity index 100%
rename from apps/web/src/app/admin-console/providers/providers.component.ts
rename to bitwarden_license/bit-web/src/app/admin-console/providers/providers.component.ts
diff --git a/bitwarden_license/bit-web/src/app/admin-console/providers/providers.module.ts b/bitwarden_license/bit-web/src/app/admin-console/providers/providers.module.ts
index b6c7125c48..80108e66ed 100644
--- a/bitwarden_license/bit-web/src/app/admin-console/providers/providers.module.ts
+++ b/bitwarden_license/bit-web/src/app/admin-console/providers/providers.module.ts
@@ -32,10 +32,12 @@ import { MembersComponent } from "./manage/members.component";
 import { UserAddEditComponent } from "./manage/user-add-edit.component";
 import { ProvidersLayoutComponent } from "./providers-layout.component";
 import { ProvidersRoutingModule } from "./providers-routing.module";
+import { ProvidersComponent } from "./providers.component";
 import { WebProviderService } from "./services/web-provider.service";
 import { AccountComponent } from "./settings/account.component";
 import { SetupProviderComponent } from "./setup/setup-provider.component";
 import { SetupComponent } from "./setup/setup.component";
+import { VerifyRecoverDeleteProviderComponent } from "./verify-recover-delete-provider.component";
 
 @NgModule({
   imports: [
@@ -73,6 +75,8 @@ import { SetupComponent } from "./setup/setup.component";
     ProviderBillingHistoryComponent,
     ProviderSubscriptionComponent,
     ProviderSubscriptionStatusComponent,
+    ProvidersComponent,
+    VerifyRecoverDeleteProviderComponent,
   ],
   providers: [WebProviderService],
 })
diff --git a/bitwarden_license/bit-web/src/app/admin-console/providers/verify-recover-delete-provider.component.html b/bitwarden_license/bit-web/src/app/admin-console/providers/verify-recover-delete-provider.component.html
new file mode 100644
index 0000000000..116e1660d7
--- /dev/null
+++ b/bitwarden_license/bit-web/src/app/admin-console/providers/verify-recover-delete-provider.component.html
@@ -0,0 +1,15 @@
+<p class="lead tw-text-center tw-mb-4">{{ "deleteProvider" | i18n }}</p>
+<app-callout type="warning">{{ "deleteProviderWarning" | i18n }}</app-callout>
+<p class="tw-text-center">
+  <strong>{{ name }}</strong>
+</p>
+<p>{{ "deleteProviderRecoverConfirmDesc" | i18n }}</p>
+<hr />
+<div class="tw-flex">
+  <button bitButton [bitAction]="submit" buttonType="danger" type="button" [block]="true">
+    <span>{{ "deleteProvider" | i18n }}</span>
+  </button>
+  <a routerLink="/login" bitButton buttonType="secondary" [block]="true" class="tw-ml-2 tw-mt-0">
+    {{ "cancel" | i18n }}
+  </a>
+</div>
diff --git a/apps/web/src/app/admin-console/providers/verify-recover-delete-provider.component.ts b/bitwarden_license/bit-web/src/app/admin-console/providers/verify-recover-delete-provider.component.ts
similarity index 63%
rename from apps/web/src/app/admin-console/providers/verify-recover-delete-provider.component.ts
rename to bitwarden_license/bit-web/src/app/admin-console/providers/verify-recover-delete-provider.component.ts
index dc6fa09961..a4461b3e11 100644
--- a/apps/web/src/app/admin-console/providers/verify-recover-delete-provider.component.ts
+++ b/bitwarden_license/bit-web/src/app/admin-console/providers/verify-recover-delete-provider.component.ts
@@ -5,8 +5,6 @@ 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({
@@ -16,7 +14,6 @@ import { ToastService } from "@bitwarden/components";
 // eslint-disable-next-line rxjs-angular/prefer-takeuntil
 export class VerifyRecoverDeleteProviderComponent implements OnInit {
   name: string;
-  formPromise: Promise<any>;
 
   private providerId: string;
   private token: string;
@@ -24,10 +21,8 @@ export class VerifyRecoverDeleteProviderComponent implements OnInit {
   constructor(
     private router: Router,
     private providerApiService: ProviderApiServiceAbstraction,
-    private platformUtilsService: PlatformUtilsService,
     private i18nService: I18nService,
     private route: ActivatedRoute,
-    private logService: LogService,
     private toastService: ToastService,
   ) {}
 
@@ -42,22 +37,14 @@ export class VerifyRecoverDeleteProviderComponent implements OnInit {
     }
   }
 
-  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);
-    }
-  }
+  submit = async () => {
+    const request = new ProviderVerifyRecoverDeleteRequest(this.token);
+    await this.providerApiService.providerRecoverDeleteToken(this.providerId, request);
+    this.toastService.showToast({
+      variant: "success",
+      title: this.i18nService.t("providerDeleted"),
+      message: this.i18nService.t("providerDeletedDesc"),
+    });
+    await this.router.navigate(["/"]);
+  };
 }
diff --git a/bitwarden_license/bit-web/src/app/app-routing.module.ts b/bitwarden_license/bit-web/src/app/app-routing.module.ts
index f3f3c15870..6aed12511c 100644
--- a/bitwarden_license/bit-web/src/app/app-routing.module.ts
+++ b/bitwarden_license/bit-web/src/app/app-routing.module.ts
@@ -1,9 +1,13 @@
 import { NgModule } from "@angular/core";
 import { RouterModule, Routes } from "@angular/router";
 
+import { unauthGuardFn } from "@bitwarden/angular/auth/guards";
+import { AnonLayoutWrapperComponent } from "@bitwarden/auth/angular";
 import { deepLinkGuard } from "@bitwarden/web-vault/app/auth/guards/deep-link.guard";
+import { RouteDataProperties } from "@bitwarden/web-vault/app/core";
 
 import { ProvidersModule } from "./admin-console/providers/providers.module";
+import { VerifyRecoverDeleteProviderComponent } from "./admin-console/providers/verify-recover-delete-provider.component";
 
 const routes: Routes = [
   {
@@ -17,6 +21,18 @@ const routes: Routes = [
     loadChildren: async () =>
       (await import("./secrets-manager/secrets-manager.module")).SecretsManagerModule,
   },
+  {
+    path: "verify-recover-delete-provider",
+    component: AnonLayoutWrapperComponent,
+    canActivate: [unauthGuardFn()],
+    children: [
+      {
+        path: "",
+        component: VerifyRecoverDeleteProviderComponent,
+        data: { titleId: "deleteAccount" } satisfies RouteDataProperties,
+      },
+    ],
+  },
 ];
 
 @NgModule({