Change fields to field(s)

# Conflicts:
#	jslib

src/app/modules/shared.module.ts

@@ -53,7 +53,13 @@ import localeZhTw from "@angular/common/locales/zh-Hant";
 import { NgModule } from "@angular/core";
 import { FormsModule, ReactiveFormsModule } from "@angular/forms";
 import { RouterModule } from "@angular/router";
-import { BadgeModule, ButtonModule, CalloutModule, MenuModule } from "@bitwarden/components";
+import {
+  BadgeModule,
+  ButtonModule,
+  CalloutModule,
+  FormFieldModule,
+  MenuModule,
+} from "@bitwarden/components";
 import { InfiniteScrollModule } from "ngx-infinite-scroll";
 import { ToastrModule } from "ngx-toastr";
 
@@ -126,6 +132,7 @@ registerLocaleData(localeZhTw, "zh-TW");
     BadgeModule,
     ButtonModule,
     MenuModule,
+    FormFieldModule,
   ],
   exports: [
     CommonModule,
@@ -136,6 +143,7 @@ registerLocaleData(localeZhTw, "zh-TW");
     ReactiveFormsModule,
     RouterModule,
     BadgeModule,
+    FormFieldModule,
     ButtonModule,
     CalloutModule,
     ToastrModule,

src/app/organizations/settings/account.component.html

@@ -14,62 +14,50 @@
   #form
   (ngSubmit)="submit()"
   [appApiAction]="formPromise"
-  ngNativeValidate
+  [formGroup]="formData"
 >
   <div class="row">
     <div class="col-6">
-      <div class="form-group">
+      <bit-form-field>
-        <label for="name">{{ "organizationName" | i18n }}</label>
+        <bit-label>{{ "organizationName" | i18n }}</bit-label>
-        <input
+        <input bitInput type="text" formControlName="name" />
-          id="name"
+      </bit-form-field>
-          class="form-control"
+
-          type="text"
+      <bit-form-field>
-          name="Name"
+        <bit-label>{{ "billingEmail" | i18n }}</bit-label>
-          [(ngModel)]="org.name"
+        <input bitInput type="email" formControlName="billingEmail" />
-          [disabled]="selfHosted"
+      </bit-form-field>
-        />
+
-      </div>
+      <bit-form-field>
-      <div class="form-group">
+        <bit-label>{{ "businessName" | i18n }}</bit-label>
-        <label for="billingEmail">{{ "billingEmail" | i18n }}</label>
+        <input bitInput type="text" formControlName="businessName" />
-        <input
+      </bit-form-field>
-          id="billingEmail"
+
-          class="form-control"
+      <bit-form-field>
-          type="text"
+        <bit-label>{{ "identifier" | i18n }}</bit-label>
-          name="BillingEmail"
+        <input bitInput type="text" formControlName="identifier" />
-          [(ngModel)]="org.billingEmail"
+      </bit-form-field>
-          [disabled]="selfHosted || !canManageBilling"
-        />
-      </div>
-      <div class="form-group">
-        <label for="businessName">{{ "businessName" | i18n }}</label>
-        <input
-          id="businessName"
-          class="form-control"
-          type="text"
-          name="BusinessName"
-          [(ngModel)]="org.businessName"
-          [disabled]="selfHosted || !canManageBilling"
-        />
-      </div>
-      <div class="form-group">
-        <label for="identifier">{{ "identifier" | i18n }}</label>
-        <input
-          id="identifier"
-          class="form-control"
-          type="text"
-          name="Identifier"
-          [(ngModel)]="org.identifier"
-        />
-      </div>
     </div>
     <div class="col-6">
-      <app-avatar data="{{ org.name }}" dynamic="true" size="75" fontSize="35"></app-avatar>
+      <app-avatar
+        [data]="formData.get('name').value"
+        dynamic="true"
+        size="75"
+        fontSize="35"
+      ></app-avatar>
     </div>
   </div>
-  <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
+  <button
+    type="submit"
+    bit-button
+    buttonType="primary"
+    class="btn-submit"
+    [disabled]="form.loading"
+  >
     <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
     <span>{{ "save" | i18n }}</span>
   </button>
+  <bit-error-summary *ngIf="showErrorSummary" [formGroup]="formData"></bit-error-summary>
 </form>
 <ng-container *ngIf="canUseApi">
   <div class="secondary-header border-0 mb-0">

src/app/organizations/settings/account.component.ts

@@ -1,4 +1,5 @@
 import { Component, ViewChild, ViewContainerRef } from "@angular/core";
+import { FormBuilder, Validators } from "@angular/forms";
 import { ActivatedRoute, Router } from "@angular/router";
 
 import { ModalService } from "jslib-angular/services/modal.service";
@@ -41,10 +42,19 @@ export class AccountComponent {
   org: OrganizationResponse;
   formPromise: Promise<any>;
   taxFormPromise: Promise<any>;
+  showErrorSummary = false;
 
   private organizationId: string;
 
+  formData = this.formBuilder.group({
+    name: ["", [Validators.required]],
+    billingEmail: ["", [Validators.required, Validators.email]],
+    businessName: [],
+    identifier: [],
+  });
+
   constructor(
+    private formBuilder: FormBuilder,
     private modalService: ModalService,
     private apiService: ApiService,
     private i18nService: I18nService,
@@ -60,6 +70,12 @@ export class AccountComponent {
   async ngOnInit() {
     this.selfHosted = this.platformUtilsService.isSelfHost();
 
+    if (this.selfHosted) {
+      this.formData.disable();
+    } else {
+      this.formData.enable();
+    }
+
     this.route.parent.parent.params.subscribe(async (params) => {
       this.organizationId = params.organizationId;
       this.canManageBilling = (
@@ -68,6 +84,13 @@ export class AccountComponent {
       try {
         this.org = await this.apiService.getOrganization(this.organizationId);
         this.canUseApi = this.org.useApi;
+
+        this.formData.setValue({
+          name: this.org.name,
+          billingEmail: this.org.billingEmail,
+          businessName: this.org.businessName,
+          identifier: this.org.identifier,
+        });
       } catch (e) {
         this.logService.error(e);
       }
@@ -76,12 +99,19 @@ export class AccountComponent {
   }
 
   async submit() {
+    this.formData.markAllAsTouched();
+    this.showErrorSummary = true;
+
+    if (!this.formData.valid) {
+      return;
+    }
+
     try {
       const request = new OrganizationUpdateRequest();
-      request.name = this.org.name;
+      request.name = this.formData.get("name").value;
-      request.businessName = this.org.businessName;
+      request.businessName = this.formData.get("businessName").value;
-      request.billingEmail = this.org.billingEmail;
+      request.billingEmail = this.formData.get("billingEmail").value;
-      request.identifier = this.org.identifier;
+      request.identifier = this.formData.get("identifier").value;
 
       // Backfill pub/priv key if necessary
       if (!this.org.hasPublicAndPrivateKeys) {

src/locales/en/messages.json

@@ -5066,5 +5066,20 @@
   },
   "apiAccessToken": {
     "message": "API Access Token"
+  },
+  "inputRequired": {
+    "message": "Input is required."
+  },
+  "inputEmail": {
+    "message": "Input is not an email-address."
+  },
+  "fieldsNeedAttention": {
+    "message": "$COUNT$ field(s) above need your attention.",
+    "placeholders": {
+      "count": {
+        "content": "$1",
+        "example": "4"
+      }
+    }
   }
 }