migrating domain rules component (#8745)

apps/web/src/app/settings/domain-rules.component.html

@@ -1,109 +1,89 @@
 <app-header></app-header>
 
 <bit-container>
-  <p>{{ "domainRulesDesc" | i18n }}</p>
-  <form #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
-    <h2>{{ "customEqDomains" | i18n }}</h2>
-    <p *ngIf="loading">
+  <p bitTypography="body1">{{ "domainRulesDesc" | i18n }}</p>
+  <form [formGroup]="formGroup" [bitSubmit]="submit">
+    <h2 bitTypography="h2">{{ "customEqDomains" | i18n }}</h2>
+    <p bitTypography="body1" *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>
     </p>
-    <ng-container *ngIf="!loading">
-      <div class="form-group d-flex" *ngFor="let d of custom; let i = index; trackBy: indexTrackBy">
-        <div class="flex-fill">
-          <label for="customDomain_{{ i }}" class="sr-only">{{
-            "customDomainX" | i18n: i + 1
-          }}</label>
+    <ng-container formArrayName="customDomain" *ngIf="!loading">
+      <div
+        class="tw-flex tw-items-center tw-gap-2 tw-mb-6"
+        *ngFor="let d of custom; let i = index; trackBy: indexTrackBy"
+      >
+        <bit-form-field class="tw-flex-1 !tw-mb-0" formGroupName="{{ i }}">
+          <bit-label class="tw-sr-only">{{ "customDomainX" | i18n: i + 1 }} </bit-label>
           <textarea
-            class="form-control"
-            name="CustomDomain[{{ i }}]"
-            id="customDomain_{{ i }}"
-            [(ngModel)]="custom[i]"
+            rows="2"
+            bitInput
+            [value]="d"
+            formControlName="domain"
             placeholder="{{ 'ex' | i18n }} google.com, gmail.com"
-            required
           ></textarea>
-        </div>
+        </bit-form-field>
         <button
+          bitIconButton="bwi-minus-circle"
           type="button"
-          class="btn btn-link text-danger ml-2"
+          buttonType="danger"
           (click)="remove(i)"
           appA11yTitle="{{ 'remove' | i18n }}"
-        >
-          <i class="bwi bwi-minus-circle bwi-lg" aria-hidden="true"></i>
-        </button>
+        ></button>
       </div>
-      <button type="button" (click)="add()" class="btn btn-outline-secondary btn-sm mb-2">
+      <button bitButton type="button" (click)="add()" buttonType="secondary" class="tw-mb-2">
         <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i> {{ "newCustomDomain" | i18n }}
       </button>
-      <small class="text-muted d-block mb-3">{{ "newCustomDomainDesc" | i18n }}</small>
+      <small class="tw-text-muted tw-block tw-mb-3">{{ "newCustomDomainDesc" | i18n }}</small>
     </ng-container>
-    <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" bitButton bitFormButton buttonType="primary">
+      {{ "save" | i18n }}
     </button>
-    <h2 class="spaced-header">{{ "globalEqDomains" | i18n }}</h2>
-    <p *ngIf="loading">
+    <h2 bitTypography="h2" class="spaced-header">{{ "globalEqDomains" | i18n }}</h2>
+    <p bitTypography="body1" *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>
     </p>
-    <table class="table table-hover table-list" *ngIf="!loading && global.length > 0">
-      <tbody>
-        <tr *ngFor="let d of global">
-          <td [ngClass]="{ 'table-list-strike': d.excluded }">{{ d.domains }}</td>
-          <td class="table-list-options">
-            <div class="dropdown" appListDropdown>
-              <button
-                class="btn btn-outline-secondary dropdown-toggle"
-                type="button"
-                data-toggle="dropdown"
-                aria-haspopup="true"
-                aria-expanded="false"
-                appA11yTitle="{{ 'options' | i18n }}"
-              >
-                <i class="bwi bwi-cog bwi-lg" aria-hidden="true"></i>
-              </button>
-              <div class="dropdown-menu dropdown-menu-right">
-                <a
-                  class="dropdown-item"
-                  href="#"
-                  appStopClick
-                  (click)="toggleExcluded(d)"
-                  *ngIf="!d.excluded"
-                >
-                  <i class="bwi bwi-fw bwi-close" aria-hidden="true"></i>
-                  {{ "exclude" | i18n }}
-                </a>
-                <a
-                  class="dropdown-item"
-                  href="#"
-                  appStopClick
-                  (click)="toggleExcluded(d)"
-                  *ngIf="d.excluded"
-                >
-                  <i class="bwi bwi-fw bwi-plus" aria-hidden="true"></i>
-                  {{ "include" | i18n }}
-                </a>
-                <a class="dropdown-item" href="#" appStopClick (click)="customize(d)">
-                  <i class="bwi bwi-fw bwi-cut" aria-hidden="true"></i>
-                  {{ "customize" | i18n }}
-                </a>
-              </div>
-            </div>
+    <bit-table *ngIf="!loading && global.length > 0">
+      <ng-template body>
+        <tr bitRow *ngFor="let d of global" class="tw-group">
+          <td bitCell [ngClass]="{ 'table-list-strike': d.excluded }">{{ d.domains }}</td>
+          <td bitCell>
+            <button
+              type="button"
+              bitIconButton="bwi-cog"
+              buttonType="secondary"
+              [bitMenuTriggerFor]="appListDropdown"
+              class="tw-border-0 tw-bg-transparent tw-p-0"
+            ></button>
+            <bit-menu #appListDropdown>
+              <a href="#" bitMenuItem appStopClick (click)="toggleExcluded(d)" *ngIf="!d.excluded">
+                <i class="bwi bwi-fw bwi-close" aria-hidden="true"></i>
+                {{ "exclude" | i18n }}
+              </a>
+              <a href="#" bitMenuItem appStopClick (click)="toggleExcluded(d)" *ngIf="d.excluded">
+                <i class="bwi bwi-fw bwi-plus" aria-hidden="true"></i>
+                {{ "include" | i18n }}
+              </a>
+              <a href="#" bitMenuItem appStopClick (click)="customize(d)">
+                <i class="bwi bwi-fw bwi-cut" aria-hidden="true"></i>
+                {{ "customize" | i18n }}
+              </a>
+            </bit-menu>
           </td>
         </tr>
-      </tbody>
-    </table>
-    <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>
+      </ng-template>
+    </bit-table>
+    <button type="submit" bitButton buttonType="primary">
+      {{ "save" | i18n }}
     </button>
   </form>
 </bit-container>

apps/web/src/app/settings/domain-rules.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from "@angular/core";
+import { FormArray, FormBuilder, FormControl, FormGroup } from "@angular/forms";
 
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { UpdateDomainsRequest } from "@bitwarden/common/models/request/update-domains.request";
@@ -15,12 +16,15 @@ export class DomainRulesComponent implements OnInit {
   custom: string[] = [];
   global: any[] = [];
   formPromise: Promise<any>;
-
+  formGroup: FormGroup<{ customDomain: FormArray<FormControl<any>> }> = this.formBuilder.group({
+    customDomain: this.formBuilder.array([]),
+  });
   constructor(
     private apiService: ApiService,
     private i18nService: I18nService,
     private platformUtilsService: PlatformUtilsService,
     private logService: LogService,
+    private formBuilder: FormBuilder,
   ) {}
 
   async ngOnInit() {
@@ -38,8 +42,21 @@ export class DomainRulesComponent implements OnInit {
         };
       });
     }
+    this.patch();
+  }
+  patch() {
+    const control = <FormArray>this.formGroup.get("customDomain");
+    control.clear();
+    this.custom.forEach((val, index) => {
+      control.insert(index, this.patchValues(val));
+    });
+    this.formGroup.updateValueAndValidity();
+  }
+  patchValues(customDomain: string) {
+    return this.formBuilder.group({
+      domain: [customDomain],
+    });
   }
-
   toggleExcluded(globalDomain: any) {
     globalDomain.excluded = !globalDomain.excluded;
   }
@@ -47,17 +64,22 @@ export class DomainRulesComponent implements OnInit {
   customize(globalDomain: any) {
     globalDomain.excluded = true;
     this.custom.push(globalDomain.domains);
+    this.patch();
   }
 
   remove(index: number) {
     this.custom.splice(index, 1);
+    this.patch();
   }
 
   add() {
     this.custom.push("");
+    this.patch();
   }
 
-  async submit() {
+  submit = async () => {
+    const customDomainValues = this.formGroup.get("customDomain").value;
+    this.custom = customDomainValues.map((d) => d.domain);
     const request = new UpdateDomainsRequest();
     request.excludedGlobalEquivalentDomains = this.global
       .filter((d) => d.excluded)
@@ -72,14 +94,9 @@ export class DomainRulesComponent implements OnInit {
       request.equivalentDomains = null;
     }
 
-    try {
-      this.formPromise = this.apiService.putSettingsDomains(request);
-      await this.formPromise;
-      this.platformUtilsService.showToast("success", null, this.i18nService.t("domainsUpdated"));
-    } catch (e) {
-      this.logService.error(e);
-    }
-  }
+    await this.apiService.putSettingsDomains(request);
+    this.platformUtilsService.showToast("success", null, this.i18nService.t("domainsUpdated"));
+  };
 
   indexTrackBy(index: number, obj: any): any {
     return index;