[PM-2411] Update billing-sync-api-key to use Dialog (#6537)

* Update billing-sync-api-key dialog

* Oscar's feedback

apps/web/src/app/billing/organizations/billing-sync-api-key.component.html

@@ -1,117 +1,75 @@
-<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="billingSyncApiKeyTitle">
-  <div class="modal-dialog modal-dialog-scrollable" role="document">
-    <form
-      class="modal-content"
-      #form
-      (ngSubmit)="submit()"
-      [appApiAction]="formPromise"
-      ngNativeValidate
-    >
-      <div class="modal-header">
-        <h1 class="modal-title" id="billingSyncApiKeyTitle">
-          {{ (hasBillingToken ? "viewBillingSyncToken" : "generateBillingSyncToken") | i18n }}
-        </h1>
-        <button
-          type="button"
-          class="close"
-          data-dismiss="modal"
-          appA11yTitle="{{ 'close' | i18n }}"
-        >
-          <span aria-hidden="true">&times;</span>
-        </button>
-      </div>
-      <div class="modal-body">
-        <app-user-verification
-          [(ngModel)]="masterPassword"
-          ngDefaultControl
-          name="secret"
-          *ngIf="!clientSecret"
-        >
-        </app-user-verification>
-        <ng-container *ngIf="clientSecret && showRotateScreen">
-          <p>{{ "rotateBillingSyncTokenTitle" | i18n }}</p>
-          <app-callout type="warning">
-            {{ "rotateBillingSyncTokenWarning" | i18n }}
-          </app-callout>
-        </ng-container>
+<form [formGroup]="formGroup" [bitSubmit]="submit">
+  <bit-dialog>
+    <h1 bitDialogTitle>
+      {{ (hasBillingToken ? "viewBillingSyncToken" : "generateBillingSyncToken") | i18n }}
+    </h1>
+    <div bitDialogContent>
+      <app-user-verification formControlName="verification" *ngIf="!clientSecret">
+      </app-user-verification>
 
-        <div *ngIf="clientSecret && !showRotateScreen">
-          <p>{{ "copyPasteBillingSync" | i18n }}</p>
-          <label for="clientSecret">{{ "billingSyncKey" | i18n }}</label>
-          <div class="input-group">
-            <input
-              id="clientSecret"
-              class="form-control text-monospace"
-              type="text"
-              [(ngModel)]="clientSecret"
-              name="clientSecret"
-              disabled
-            />
-            <div class="input-group-append">
-              <button
-                type="button"
-                class="btn btn-outline-secondary"
-                (click)="copy()"
-                [appA11yTitle]="'copy' | i18n"
-              >
-                <i class="bwi bwi-lg bwi-clone" aria-hidden="true"></i>
-              </button>
-            </div>
-          </div>
-          <div class="small text-muted mt-2" *ngIf="showLastSyncText">
-            <b class="font-weight-semibold">{{ "lastSync" | i18n }}:</b>
-            {{ lastSyncDate | date : "medium" }}
-          </div>
-          <div class="small text-danger mt-2" *ngIf="showAwaitingSyncText">
-            <i class="bwi bwi-error"></i>
-            {{
-              (daysBetween === 1 ? "awaitingSyncSingular" : "awaitingSyncPlural")
-                | i18n : daysBetween
-            }}
-          </div>
+      <ng-container *ngIf="clientSecret && showRotateScreen">
+        <p>{{ "rotateBillingSyncTokenTitle" | i18n }}</p>
+        <bit-callout type="warning">
+          {{ "rotateBillingSyncTokenWarning" | i18n }}
+        </bit-callout>
+      </ng-container>
+
+      <div *ngIf="clientSecret && !showRotateScreen">
+        <p>{{ "copyPasteBillingSync" | i18n }}</p>
+        <bit-form-field>
+          <bit-label>{{ "billingSyncKey" | i18n }}</bit-label>
+          <input
+            bitInput
+            id="clientSecret"
+            type="text"
+            [value]="clientSecret"
+            class="tw-font-mono"
+            disabled
+          />
+          <button
+            bitIconButton="bwi-clone"
+            bitSuffix
+            type="button"
+            [appCopyClick]="clientSecret"
+            [appA11yTitle]="'copyValue' | i18n"
+          ></button>
+        </bit-form-field>
+        <div class="tw-mt-2 tw-text-sm tw-text-muted" *ngIf="showLastSyncText">
+          <b class="tw-font-semibold">{{ "lastSync" | i18n }}:</b>
+          {{ lastSyncDate | date : "medium" }}
+        </div>
+        <div class="tw-mt-2 tw-text-sm tw-text-danger" *ngIf="showAwaitingSyncText">
+          <i class="bwi bwi-error"></i>
+          {{
+            (daysBetween === 1 ? "awaitingSyncSingular" : "awaitingSyncPlural") | i18n : daysBetween
+          }}
         </div>
       </div>
-      <div class="modal-footer">
-        <button
-          type="submit"
-          class="btn btn-primary btn-submit"
-          [disabled]="form.loading"
-          *ngIf="!clientSecret || showRotateScreen"
-        >
-          <i
-            class="bwi bwi-spinner bwi-spin"
-            title="{{ 'loading' | i18n }}"
-            *ngIf="form.loading"
-          ></i>
-          <span>
-            {{ submitButtonText }}
-          </span>
-        </button>
-        <button
-          type="button"
-          class="btn btn-outline-secondary"
-          data-dismiss="modal"
-          *ngIf="!showRotateScreen"
-        >
-          {{ "close" | i18n }}
-        </button>
-        <button
-          type="button"
-          class="btn btn-outline-secondary"
-          *ngIf="showRotateScreen"
-          (click)="cancelRotate()"
-        >
-          {{ "cancel" | i18n }}
-        </button>
-        <button
-          type="button"
-          class="btn btn-outline-secondary"
-          *ngIf="clientSecret && !showRotateScreen"
-          (click)="rotateToken()"
-        >
-          {{ "rotateToken" | i18n }}
-        </button>
-      </div>
-    </form>
-  </div>
-</div>
+    </div>
+    <ng-container bitDialogFooter>
+      <button
+        type="submit"
+        bitButton
+        bitFormButton
+        buttonType="primary"
+        *ngIf="!clientSecret || showRotateScreen"
+      >
+        {{ submitButtonText }}
+      </button>
+      <button bitButton bitDialogClose type="button" *ngIf="!showRotateScreen">
+        {{ "close" | i18n }}
+      </button>
+      <button bitButton type="button" *ngIf="showRotateScreen" (click)="cancelRotate()">
+        {{ "cancel" | i18n }}
+      </button>
+      <button
+        bitButton
+        type="button"
+        *ngIf="clientSecret && !showRotateScreen"
+        (click)="rotateToken()"
+      >
+        {{ "rotateToken" | i18n }}
+      </button>
+    </ng-container>
+  </bit-dialog>
+</form>

apps/web/src/app/billing/organizations/billing-sync-api-key.component.ts

@@ -1,6 +1,7 @@
-import { Component } from "@angular/core";
+import { DIALOG_DATA } from "@angular/cdk/dialog";
+import { Component, Inject } from "@angular/core";
+import { FormControl, FormGroup, Validators } from "@angular/forms";
 
-import { ModalConfig } from "@bitwarden/angular/services/modal.service";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { OrganizationApiServiceAbstraction } from "@bitwarden/common/admin-console/abstractions/organization/organization-api.service.abstraction";
 import { OrganizationApiKeyType } from "@bitwarden/common/admin-console/enums";
@@ -8,8 +9,10 @@ import { OrganizationApiKeyRequest } from "@bitwarden/common/admin-console/model
 import { UserVerificationService } from "@bitwarden/common/auth/abstractions/user-verification/user-verification.service.abstraction";
 import { ApiKeyResponse } from "@bitwarden/common/auth/models/response/api-key.response";
 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 { Verification } from "@bitwarden/common/types/verification";
+import { DialogService } from "@bitwarden/components";
 
 export interface BillingSyncApiModalData {
   organizationId: string;
@@ -20,59 +23,66 @@ export interface BillingSyncApiModalData {
   templateUrl: "billing-sync-api-key.component.html",
 })
 export class BillingSyncApiKeyComponent {
-  organizationId: string;
-  hasBillingToken: boolean;
+  protected organizationId: string;
+  protected hasBillingToken: boolean;
+
+  protected formGroup = new FormGroup({
+    verification: new FormControl<Verification>(null, Validators.required),
+  });
 
   showRotateScreen: boolean;
-  masterPassword: Verification;
-  formPromise: Promise<ApiKeyResponse>;
   clientSecret?: string;
   keyRevisionDate?: Date;
-  lastSyncDate?: Date = null;
+  lastSyncDate?: Date;
 
   constructor(
+    @Inject(DIALOG_DATA) protected data: BillingSyncApiModalData,
     private userVerificationService: UserVerificationService,
     private apiService: ApiService,
     private platformUtilsService: PlatformUtilsService,
     private i18nService: I18nService,
     private organizationApiService: OrganizationApiServiceAbstraction,
-    modalConfig: ModalConfig<BillingSyncApiModalData>
+    private logService: LogService
   ) {
-    this.organizationId = modalConfig.data.organizationId;
-    this.hasBillingToken = modalConfig.data.hasBillingToken;
+    this.organizationId = data.organizationId;
+    this.hasBillingToken = data.hasBillingToken;
   }
 
   copy() {
     this.platformUtilsService.copyToClipboard(this.clientSecret);
   }
 
-  async submit() {
-    if (this.showRotateScreen) {
-      this.formPromise = this.userVerificationService
-        .buildRequest(this.masterPassword, OrganizationApiKeyRequest)
+  submit = async () => {
+    try {
+      const request = this.userVerificationService
+        .buildRequest(this.formGroup.value.verification, OrganizationApiKeyRequest)
         .then((request) => {
           request.type = OrganizationApiKeyType.BillingSync;
+          return request;
+        });
+
+      if (this.showRotateScreen) {
+        const response = await request.then((request) => {
           return this.organizationApiService.rotateApiKey(this.organizationId, request);
         });
-      const response = await this.formPromise;
-      await this.load(response);
-      this.showRotateScreen = false;
-      this.platformUtilsService.showToast(
-        "success",
-        null,
-        this.i18nService.t("billingSyncApiKeyRotated")
-      );
-    } else {
-      this.formPromise = this.userVerificationService
-        .buildRequest(this.masterPassword, OrganizationApiKeyRequest)
-        .then((request) => {
-          request.type = OrganizationApiKeyType.BillingSync;
+        await this.load(response);
+        this.showRotateScreen = false;
+        this.platformUtilsService.showToast(
+          "success",
+          null,
+          this.i18nService.t("billingSyncApiKeyRotated")
+        );
+      } else {
+        const response = await request.then((request) => {
           return this.organizationApiService.getOrCreateApiKey(this.organizationId, request);
         });
-      const response = await this.formPromise;
-      await this.load(response);
+        await this.load(response);
+      }
+    } catch (e) {
+      this.logService.error(e);
+      throw e;
     }
-  }
+  };
 
   async load(response: ApiKeyResponse) {
     this.clientSecret = response.apiKey;
@@ -116,4 +126,8 @@ export class BillingSyncApiKeyComponent {
   get daysBetween(): number {
     return this.dayDiff(this.keyRevisionDate, new Date());
   }
+
+  static open(dialogService: DialogService, data: BillingSyncApiModalData) {
+    return dialogService.open(BillingSyncApiKeyComponent, { data });
+  }
 }

apps/web/src/app/billing/organizations/organization-subscription-cloud.component.ts

@@ -1,9 +1,8 @@
 import { DatePipe } from "@angular/common";
 import { Component, OnDestroy, OnInit } from "@angular/core";
 import { ActivatedRoute } from "@angular/router";
-import { concatMap, Subject, takeUntil } from "rxjs";
+import { concatMap, firstValueFrom, Subject, takeUntil } from "rxjs";
 
-import { ModalConfig, ModalService } from "@bitwarden/angular/services/modal.service";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { OrganizationApiServiceAbstraction } from "@bitwarden/common/admin-console/abstractions/organization/organization-api.service.abstraction";
 import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
@@ -18,10 +17,7 @@ import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/pl
 import { Utils } from "@bitwarden/common/platform/misc/utils";
 import { DialogService } from "@bitwarden/components";
 
-import {
-  BillingSyncApiKeyComponent,
-  BillingSyncApiModalData,
-} from "./billing-sync-api-key.component";
+import { BillingSyncApiKeyComponent } from "./billing-sync-api-key.component";
 import { SecretsManagerSubscriptionOptions } from "./sm-adjust-subscription.component";
 
 @Component({
@@ -54,7 +50,6 @@ export class OrganizationSubscriptionCloudComponent implements OnInit, OnDestroy
     private platformUtilsService: PlatformUtilsService,
     private i18nService: I18nService,
     private logService: LogService,
-    private modalService: ModalService,
     private organizationService: OrganizationService,
     private organizationApiService: OrganizationApiServiceAbstraction,
     private route: ActivatedRoute,
@@ -330,22 +325,13 @@ export class OrganizationSubscriptionCloudComponent implements OnInit, OnDestroy
   }
 
   async manageBillingSync() {
-    const modalConfig: ModalConfig<BillingSyncApiModalData> = {
-      data: {
-        organizationId: this.organizationId,
-        hasBillingToken: this.hasBillingSyncToken,
-      },
-    };
-    const modalRef = this.modalService.open(BillingSyncApiKeyComponent, modalConfig);
+    const dialogRef = BillingSyncApiKeyComponent.open(this.dialogService, {
+      organizationId: this.organizationId,
+      hasBillingToken: this.hasBillingSyncToken,
+    });
 
-    modalRef.onClosed
-      .pipe(
-        concatMap(async () => {
-          this.load();
-        }),
-        takeUntil(this.destroy$)
-      )
-      .subscribe();
+    await firstValueFrom(dialogRef.closed);
+    this.load();
   }
 
   closeDownloadLicense() {