migrate update license component (#8652)

apps/web/src/app/billing/shared/update-license.component.html

@@ -1,20 +1,39 @@
-<form #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
-  <div class="form-group">
-    <label for="file" class="sr-only">{{ "licenseFile" | i18n }}</label>
-    <input type="file" id="file" class="form-control-file" name="file" required />
-    <small class="form-text text-muted">{{
+<form [formGroup]="updateLicenseForm" [bitSubmit]="submit">
+  <bit-form-field>
+    <bit-label>{{ "licenseFile" | i18n }}</bit-label>
+    <div>
+      <button bitButton type="button" buttonType="secondary" (click)="fileSelector.click()">
+        {{ "chooseFile" | i18n }}
+      </button>
+      {{ this.licenseFile ? this.licenseFile.name : ("noFileChosen" | i18n) }}
+    </div>
+    <input
+      bitInput
+      #fileSelector
+      type="file"
+      formControlName="file"
+      (change)="setSelectedFile($event)"
+      hidden
+    />
+    <bit-hint>{{
       "licenseFileDesc"
         | i18n
           : (!organizationId
               ? "bitwarden_premium_license.json"
               : "bitwarden_organization_license.json")
-    }}</small>
-  </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>{{ "submit" | i18n }}</span>
+    }}</bit-hint>
+  </bit-form-field>
+  <button type="submit" buttonType="primary" bitButton bitFormButton>
+    {{ "submit" | i18n }}
   </button>
-  <button *ngIf="showCancel" type="button" class="btn btn-outline-secondary" (click)="cancel()">
+  <button
+    bitButton
+    *ngIf="showCancel"
+    bitFormButton
+    buttonType="secondary"
+    type="button"
+    [bitAction]="cancel"
+  >
     {{ "cancel" | i18n }}
   </button>
 </form>

apps/web/src/app/billing/shared/update-license.component.ts

@@ -1,9 +1,9 @@
 import { Component, EventEmitter, Input, Output } from "@angular/core";
+import { FormBuilder, Validators } from "@angular/forms";
 
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { OrganizationApiServiceAbstraction } from "@bitwarden/common/admin-console/abstractions/organization/organization-api.service.abstraction";
 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";
 
 @Component({
@@ -17,19 +17,30 @@ export class UpdateLicenseComponent {
   @Output() onCanceled = new EventEmitter();
 
   formPromise: Promise<void>;
-
+  title: string = this.i18nService.t("updateLicense");
+  updateLicenseForm = this.formBuilder.group({
+    file: [null, Validators.required],
+  });
+  licenseFile: File = null;
   constructor(
     private apiService: ApiService,
     private i18nService: I18nService,
     private platformUtilsService: PlatformUtilsService,
-    private logService: LogService,
     private organizationApiService: OrganizationApiServiceAbstraction,
+    private formBuilder: FormBuilder,
   ) {}
-
-  async submit() {
-    const fileEl = document.getElementById("file") as HTMLInputElement;
-    const files = fileEl.files;
-    if (files == null || files.length === 0) {
+  protected setSelectedFile(event: Event) {
+    const fileInputEl = <HTMLInputElement>event.target;
+    const file: File = fileInputEl.files.length > 0 ? fileInputEl.files[0] : null;
+    this.licenseFile = file;
+  }
+  submit = async () => {
+    this.updateLicenseForm.markAllAsTouched();
+    if (this.updateLicenseForm.invalid) {
+      return;
+    }
+    const files = this.licenseFile;
+    if (files == null) {
       this.platformUtilsService.showToast(
         "error",
         this.i18nService.t("errorOccurred"),
@@ -37,35 +48,30 @@ export class UpdateLicenseComponent {
       );
       return;
     }
+    const fd = new FormData();
+    fd.append("license", files);
 
-    try {
-      const fd = new FormData();
-      fd.append("license", files[0]);
-
-      let updatePromise: Promise<void | unknown> = null;
-      if (this.organizationId == null) {
-        updatePromise = this.apiService.postAccountLicense(fd);
-      } else {
-        updatePromise = this.organizationApiService.updateLicense(this.organizationId, fd);
-      }
-
-      this.formPromise = updatePromise.then(() => {
-        return this.apiService.refreshIdentityToken();
-      });
-
-      await this.formPromise;
-      this.platformUtilsService.showToast(
-        "success",
-        null,
-        this.i18nService.t("licenseUploadSuccess"),
-      );
-      this.onUpdated.emit();
-    } catch (e) {
-      this.logService.error(e);
+    let updatePromise: Promise<void | unknown> = null;
+    if (this.organizationId == null) {
+      updatePromise = this.apiService.postAccountLicense(fd);
+    } else {
+      updatePromise = this.organizationApiService.updateLicense(this.organizationId, fd);
     }
-  }
 
-  cancel() {
+    this.formPromise = updatePromise.then(() => {
+      return this.apiService.refreshIdentityToken();
+    });
+
+    await this.formPromise;
+    this.platformUtilsService.showToast(
+      "success",
+      null,
+      this.i18nService.t("licenseUploadSuccess"),
+    );
+    this.onUpdated.emit();
+  };
+
+  cancel = () => {
     this.onCanceled.emit();
-  }
+  };
 }