[AC-2411] migrate account component (#8854)

* migrate account component

* account component review comment addressed

* account component review comment addressed

---------

Co-authored-by: Thomas Rittson <31796059+eliykat@users.noreply.github.com>

apps/web/src/app/admin-console/organizations/settings/account.component.html

@@ -1,9 +1,8 @@
 <app-header></app-header>
-
 <bit-container>
   <div *ngIf="loading">
     <i
-      class="bwi bwi-spinner bwi-spin text-muted"
+      class="bwi bwi-spinner bwi-spin tw-text-muted"
       title="{{ 'loading' | i18n }}"
       aria-hidden="true"
     ></i>
@@ -37,9 +36,9 @@
   </form>
   <ng-container *ngIf="canUseApi">
     <h1 bitTypography="h1" class="tw-mt-16 tw-pb-2.5">{{ "apiKey" | i18n }}</h1>
-    <p>
+    <p bitTypography="body1">
       {{ "apiKeyDesc" | i18n }}
-      <a href="https://docs.bitwarden.com" target="_blank" rel="noreferrer">
+      <a bitLink href="https://docs.bitwarden.com" target="_blank" rel="noreferrer">
         {{ "learnMore" | i18n }}
       </a>
     </p>
@@ -56,7 +55,7 @@
     [formGroup]="collectionManagementFormGroup"
   >
     <h1 bitTypography="h1" class="tw-mt-16 tw-pb-2.5">{{ "collectionManagement" | i18n }}</h1>
-    <p>{{ "collectionManagementDesc" | i18n }}</p>
+    <p bitTypography="body1">{{ "collectionManagementDesc" | i18n }}</p>
     <bit-form-control *ngIf="flexibleCollectionsV1Enabled$ | async">
       <bit-label>{{ "allowAdminAccessToAllCollectionItemsDesc" | i18n }}</bit-label>
       <input type="checkbox" bitCheckbox formControlName="allowAdminAccessToAllCollectionItems" />

bitwarden_license/bit-web/src/app/admin-console/providers/settings/account.component.html

@@ -2,51 +2,35 @@
 <bit-container>
   <div *ngIf="loading">
     <i
-      class="bwi bwi-spinner bwi-spin text-muted"
+      class="bwi bwi-spinner bwi-spin tw-text-muted"
       title="{{ 'loading' | i18n }}"
       aria-hidden="true"
     ></i>
-    <span class="sr-only">{{ "loading" | i18n }}</span>
+    <span class="tw-sr-only">{{ "loading" | i18n }}</span>
   </div>
-  <form
-    *ngIf="provider && !loading"
-    #form
-    (ngSubmit)="submit()"
-    [appApiAction]="formPromise"
-    ngNativeValidate
-  >
-    <div class="row">
-      <div class="col-6">
-        <div class="form-group">
-          <label for="name">{{ "providerName" | i18n }}</label>
+  <form *ngIf="provider && !loading" [formGroup]="formGroup" [bitSubmit]="submit">
+    <div class="tw-grid tw-grid-cols-12 tw-gap-4">
+      <div class="tw-col-span-6">
+        <bit-form-field>
+          <bit-label>{{ "providerName" | i18n }}</bit-label>
+          <input bitInput type="text" formControlName="providerName" [disabled]="selfHosted" />
+        </bit-form-field>
+        <bit-form-field>
+          <bit-label>{{ "billingEmail" | i18n }}</bit-label>
           <input
-            id="name"
-            class="form-control"
+            bitInput
             type="text"
-            name="Name"
-            [(ngModel)]="provider.name"
+            formControlName="providerBillingEmail"
             [disabled]="selfHosted"
           />
-        </div>
-        <div class="form-group">
-          <label for="billingEmail">{{ "billingEmail" | i18n }}</label>
-          <input
-            id="billingEmail"
-            class="form-control"
-            type="text"
-            name="BillingEmail"
-            [(ngModel)]="provider.billingEmail"
-            [disabled]="selfHosted"
-          />
-        </div>
+        </bit-form-field>
       </div>
-      <div class="col-6">
+      <div class="tw-col-span-6">
         <bit-avatar [text]="provider.name" [id]="provider.id" size="large"></bit-avatar>
       </div>
     </div>
-    <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-      <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
-      <span>{{ "save" | i18n }}</span>
+    <button type="submit" bitFormButton bitButton buttonType="primary">
+      {{ "save" | i18n }}
     </button>
   </form>
 

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

@@ -1,5 +1,7 @@
-import { Component } from "@angular/core";
+import { Component, OnDestroy, OnInit } from "@angular/core";
+import { FormBuilder, Validators } from "@angular/forms";
 import { ActivatedRoute, Router } from "@angular/router";
+import { Subject, switchMap, takeUntil } from "rxjs";
 
 import { UserVerificationDialogComponent } from "@bitwarden/auth/angular";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
@@ -19,15 +21,18 @@ import { DialogService } from "@bitwarden/components";
   templateUrl: "account.component.html",
 })
 // eslint-disable-next-line rxjs-angular/prefer-takeuntil
-export class AccountComponent {
+export class AccountComponent implements OnDestroy, OnInit {
   selfHosted = false;
   loading = true;
   provider: ProviderResponse;
-  formPromise: Promise<any>;
   taxFormPromise: Promise<any>;
 
+  private destroy$ = new Subject<void>();
   private providerId: string;
-
+  protected formGroup = this.formBuilder.group({
+    providerName: ["" as ProviderResponse["name"]],
+    providerBillingEmail: ["" as ProviderResponse["billingEmail"], Validators.email],
+  });
   protected enableDeleteProvider$ = this.configService.getFeatureFlag$(
     FeatureFlag.EnableDeleteProvider,
   );
@@ -42,39 +47,47 @@ export class AccountComponent {
     private dialogService: DialogService,
     private configService: ConfigService,
     private providerApiService: ProviderApiServiceAbstraction,
+    private formBuilder: FormBuilder,
     private router: Router,
   ) {}
 
   async ngOnInit() {
     this.selfHosted = this.platformUtilsService.isSelfHost();
-    // eslint-disable-next-line rxjs-angular/prefer-takeuntil, rxjs/no-async-subscribe
-    this.route.parent.parent.params.subscribe(async (params) => {
-      this.providerId = params.providerId;
-      try {
-        this.provider = await this.providerApiService.getProvider(this.providerId);
-      } catch (e) {
-        this.logService.error(`Handled exception: ${e}`);
-      }
-    });
-    this.loading = false;
+    this.route.parent.parent.params
+      .pipe(
+        switchMap(async (params) => {
+          this.providerId = params.providerId;
+          try {
+            this.provider = await this.providerApiService.getProvider(this.providerId);
+            this.formGroup.patchValue({
+              providerName: this.provider.name,
+              providerBillingEmail: this.provider.billingEmail,
+            });
+          } catch (e) {
+            this.logService.error(`Handled exception: ${e}`);
+          } finally {
+            this.loading = false;
+          }
+        }),
+        takeUntil(this.destroy$),
+      )
+      .subscribe();
   }
-
-  async submit() {
-    try {
-      const request = new ProviderUpdateRequest();
-      request.name = this.provider.name;
-      request.businessName = this.provider.businessName;
-      request.billingEmail = this.provider.billingEmail;
-
-      this.formPromise = this.providerApiService.putProvider(this.providerId, request).then(() => {
-        return this.syncService.fullSync(true);
-      });
-      await this.formPromise;
-      this.platformUtilsService.showToast("success", null, this.i18nService.t("providerUpdated"));
-    } catch (e) {
-      this.logService.error(`Handled exception: ${e}`);
-    }
+  ngOnDestroy() {
+    this.destroy$.next();
+    this.destroy$.complete();
   }
+  submit = async () => {
+    const request = new ProviderUpdateRequest();
+    request.name = this.formGroup.value.providerName;
+    request.businessName = this.formGroup.value.providerName;
+    request.billingEmail = this.formGroup.value.providerBillingEmail;
+
+    await this.providerApiService.putProvider(this.providerId, request);
+    await this.syncService.fullSync(true);
+    this.provider = await this.providerApiService.getProvider(this.providerId);
+    this.platformUtilsService.showToast("success", null, this.i18nService.t("providerUpdated"));
+  };
 
   async deleteProvider() {
     const providerClients = await this.apiService.getProviderClients(this.providerId);
@@ -105,7 +118,6 @@ export class AccountComponent {
     } catch (e) {
       this.logService.error(e);
     }
-
     await this.router.navigate(["/"]);
   }