[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/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/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,
   ],

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";

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],
 })

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>

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() {
+  submit = async () => {
-    try {
     const request = new ProviderVerifyRecoverDeleteRequest(this.token);
-      this.formPromise = this.providerApiService.providerRecoverDeleteToken(
+    await this.providerApiService.providerRecoverDeleteToken(this.providerId, request);
-        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);
-    }
-  }
 }

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({