From 76bfd07b0f9dfa70ba8153fa2616b22a370909b1 Mon Sep 17 00:00:00 2001
From: Shane Melton <smelton@bitwarden.com>
Date: Fri, 29 Jul 2022 10:30:35 -0700
Subject: [PATCH] [EC-8] Use CL in payment method component

---
 .../settings/payment-method.component.html    | 59 +++++++------------
 .../app/settings/payment-method.component.ts  | 23 ++++++--
 2 files changed, 39 insertions(+), 43 deletions(-)

diff --git a/apps/web/src/app/settings/payment-method.component.html b/apps/web/src/app/settings/payment-method.component.html
index b4e1db1a58..fa80027dd8 100644
--- a/apps/web/src/app/settings/payment-method.component.html
+++ b/apps/web/src/app/settings/payment-method.component.html
@@ -54,48 +54,25 @@
         #verifyForm
         class="form-inline"
         (ngSubmit)="verifyBank()"
+        [formGroup]="verifyBankForm"
         [appApiAction]="verifyBankPromise"
         ngNativeValidate
       >
-        <label class="sr-only" for="verifyAmount1">{{ "amount" | i18n: "1" }}</label>
-        <div class="input-group mr-2">
-          <div class="input-group-prepend">
-            <div class="input-group-text">$0.</div>
-          </div>
-          <input
-            type="number"
-            class="form-control"
-            id="verifyAmount1"
-            placeholder="xx"
-            name="Amount1"
-            [(ngModel)]="verifyAmount1"
-            min="1"
-            max="99"
-            step="1"
-            required
-          />
-        </div>
-        <label class="sr-only" for="verifyAmount2">{{ "amount" | i18n: "2" }}</label>
-        <div class="input-group mr-2">
-          <div class="input-group-prepend">
-            <div class="input-group-text">$0.</div>
-          </div>
-          <input
-            type="number"
-            class="form-control"
-            id="verifyAmount2"
-            placeholder="xx"
-            name="Amount2"
-            [(ngModel)]="verifyAmount2"
-            min="1"
-            max="99"
-            step="1"
-            required
-          />
-        </div>
+        <bit-form-field class="tw-mr-2 tw-w-40">
+          <bit-label>{{ "amountX" | i18n: "1" }}</bit-label>
+          <input bitInput type="number" step="1" placeholder="xx" formControlName="amount1" />
+          <span bitPrefix>$0.</span>
+        </bit-form-field>
+        <bit-form-field class="tw-mr-2 tw-w-40">
+          <bit-label>{{ "amountX" | i18n: "2" }}</bit-label>
+          <input bitInput type="number" step="1" placeholder="xx" formControlName="amount2" />
+          <span bitPrefix>$0.</span>
+        </bit-form-field>
         <button
+          bitButton
+          buttonType="primary"
           type="submit"
-          class="btn btn-outline-primary btn-submit"
+          class="btn-submit"
           [disabled]="verifyForm.loading"
         >
           <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
@@ -138,7 +115,13 @@
       ngNativeValidate
     >
       <app-tax-info></app-tax-info>
-      <button type="submit" class="btn btn-primary btn-submit" [disabled]="formTax.loading">
+      <button
+        bitButton
+        buttonType="primary"
+        type="submit"
+        class="btn-submit"
+        [disabled]="formTax.loading"
+      >
         <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
         <span>{{ "save" | i18n }}</span>
       </button>
diff --git a/apps/web/src/app/settings/payment-method.component.ts b/apps/web/src/app/settings/payment-method.component.ts
index 6cab4d2599..7ec86b37c6 100644
--- a/apps/web/src/app/settings/payment-method.component.ts
+++ b/apps/web/src/app/settings/payment-method.component.ts
@@ -1,4 +1,5 @@
 import { Component, OnInit, ViewChild } from "@angular/core";
+import { FormBuilder, FormControl, Validators } from "@angular/forms";
 import { ActivatedRoute, Router } from "@angular/router";
 
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
@@ -27,19 +28,31 @@ export class PaymentMethodComponent implements OnInit {
   org: OrganizationResponse;
   paymentMethodType = PaymentMethodType;
   organizationId: string;
-  verifyAmount1: number;
-  verifyAmount2: number;
 
   verifyBankPromise: Promise<any>;
   taxFormPromise: Promise<any>;
 
+  verifyBankForm = this.formBuilder.group({
+    amount1: new FormControl<number>(null, [
+      Validators.required,
+      Validators.max(99),
+      Validators.min(0),
+    ]),
+    amount2: new FormControl<number>(null, [
+      Validators.required,
+      Validators.max(99),
+      Validators.min(0),
+    ]),
+  });
+
   constructor(
     protected apiService: ApiService,
     protected i18nService: I18nService,
     protected platformUtilsService: PlatformUtilsService,
     private router: Router,
     private logService: LogService,
-    private route: ActivatedRoute
+    private route: ActivatedRoute,
+    private formBuilder: FormBuilder
   ) {}
 
   async ngOnInit() {
@@ -123,8 +136,8 @@ export class PaymentMethodComponent implements OnInit {
 
     try {
       const request = new VerifyBankRequest();
-      request.amount1 = this.verifyAmount1;
-      request.amount2 = this.verifyAmount2;
+      request.amount1 = this.verifyBankForm.value.amount1;
+      request.amount2 = this.verifyBankForm.value.amount2;
       this.verifyBankPromise = this.apiService.postOrganizationVerifyBank(
         this.organizationId,
         request