[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

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.component.html

@@ -0,0 +1,30 @@
+<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>

bitwarden_license/bit-web/src/app/admin-console/providers/providers.component.ts

@@ -0,0 +1,33 @@
+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;
+  }
+}

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

@@ -0,0 +1,50 @@
+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 { 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;
+
+  private providerId: string;
+  private token: string;
+
+  constructor(
+    private router: Router,
+    private providerApiService: ProviderApiServiceAbstraction,
+    private i18nService: I18nService,
+    private route: ActivatedRoute,
+    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(["/"]);
+    }
+  }
+
+  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(["/"]);
+  };
+}

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