[SG-73] Make Organization Info a reusable component (#3007)

* Create reusable organization info component

* remove extra import

* Use observable for form value changes

* Remove unnecessary null checks

* Refactor reactive controls

apps/web/src/app/modules/loose-components.module.ts

@@ -156,6 +156,7 @@ import { CollectionsComponent } from "../vault/collections.component";
 import { FolderAddEditComponent } from "../vault/folder-add-edit.component";
 import { ShareComponent } from "../vault/share.component";
 
+import { OrganizationCreateModule } from "./organizations/create/organization-create.module";
 import { PipesModule } from "./pipes/pipes.module";
 import { RegisterFormModule } from "./register-form/register-form.module";
 import { SharedModule } from "./shared.module";
@@ -170,6 +171,7 @@ import { OrganizationBadgeModule } from "./vault/modules/organization-badge/orga
     VaultFilterModule,
     OrganizationBadgeModule,
     PipesModule,
+    OrganizationCreateModule,
     RegisterFormModule,
   ],
   declarations: [

apps/web/src/app/modules/organizations/create/organization-create.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from "@angular/core";
+
+import { SharedModule } from "../../shared.module";
+
+import { OrganizationInformationComponent } from "./organization-information.component";
+
+@NgModule({
+  imports: [SharedModule],
+  declarations: [OrganizationInformationComponent],
+  exports: [OrganizationInformationComponent],
+})
+export class OrganizationCreateModule {}

apps/web/src/app/modules/organizations/create/organization-information.component.html

@@ -0,0 +1,32 @@
+<form #form [formGroup]="formGroup" *ngIf="nameOnly">
+  <bit-form-field>
+    <bit-label>{{ "organizationName" | i18n }}</bit-label>
+    <input bitInput type="text" formControlName="name" />
+  </bit-form-field>
+</form>
+<form #form [formGroup]="formGroup" *ngIf="!nameOnly">
+  <h2>{{ "generalInformation" | i18n }}</h2>
+  <div class="tw-flex tw-w-full tw-space-x-4">
+    <bit-form-field class="tw-w-1/2">
+      <bit-label>{{ "organizationName" | i18n }}</bit-label>
+      <input bitInput type="text" formControlName="name" />
+    </bit-form-field>
+    <bit-form-field class="tw-w-1/2">
+      <bit-label>{{ "billingEmail" | i18n }}</bit-label>
+      <input bitInput type="email" formControlName="billingEmail" />
+    </bit-form-field>
+  </div>
+  <input
+    type="checkbox"
+    name="businessOwned"
+    formControlName="businessOwned"
+    (change)="changedBusinessOwned.emit()"
+  />
+  <bit-label for="businessOwned" class="tw-mb-3">{{ "accountOwnedBusiness" | i18n }}</bit-label>
+  <div class="tw-mt-4" *ngIf="formGroup.controls['businessOwned'].value">
+    <bit-form-field class="tw-w-1/2">
+      <bit-label>{{ "businessName" | i18n }}</bit-label>
+      <input bitInput type="text" formControlName="businessName" />
+    </bit-form-field>
+  </div>
+</form>

apps/web/src/app/modules/organizations/create/organization-information.component.ts

@@ -0,0 +1,12 @@
+import { Component, EventEmitter, Input, Output } from "@angular/core";
+import { FormGroup } from "@angular/forms";
+
+@Component({
+  selector: "app-org-info",
+  templateUrl: "organization-information.component.html",
+})
+export class OrganizationInformationComponent {
+  @Input() nameOnly = false;
+  @Input() formGroup: FormGroup;
+  @Output() changedBusinessOwned = new EventEmitter<void>();
+}

apps/web/src/app/oss.module.ts

@@ -1,6 +1,7 @@
 import { NgModule } from "@angular/core";
 
 import { LooseComponentsModule } from "./modules/loose-components.module";
+import { OrganizationCreateModule } from "./modules/organizations/create/organization-create.module";
 import { OrganizationManageModule } from "./modules/organizations/manage/organization-manage.module";
 import { OrganizationUserModule } from "./modules/organizations/users/organization-user.module";
 import { PipesModule } from "./modules/pipes/pipes.module";
@@ -19,6 +20,7 @@ import { OrganizationBadgeModule } from "./modules/vault/modules/organization-ba
     PipesModule,
     OrganizationManageModule,
     OrganizationUserModule,
+    OrganizationCreateModule,
   ],
   exports: [
     SharedModule,

apps/web/src/app/settings/organization-plans.component.html

@@ -24,68 +24,17 @@
 </ng-container>
 <form
   #form
+  [formGroup]="formGroup"
   (ngSubmit)="submit()"
   [appApiAction]="formPromise"
   ngNativeValidate
   *ngIf="!loading && !selfHosted && this.plans"
+  class="tw-pt-6"
 >
-  <h2 class="mt-5">{{ "generalInformation" | i18n }}</h2>
+  <app-org-info
-  <div class="row" *ngIf="createOrganization">
+    (changedBusinessOwned)="changedOwnedBusiness()"
-    <div class="form-group col-6">
+    [formGroup]="formGroup"
-      <label for="name">{{ "organizationName" | i18n }}</label>
+  ></app-org-info>
-      <input id="name" class="form-control" type="text" name="Name" [(ngModel)]="name" required />
-    </div>
-    <div class="form-group col-6">
-      <label for="billingEmail">{{ "billingEmail" | i18n }}</label>
-      <input
-        id="billingEmail"
-        class="form-control"
-        type="text"
-        name="BillingEmail"
-        [(ngModel)]="billingEmail"
-        required
-      />
-    </div>
-    <div class="form-group col-6" *ngIf="!!providerId">
-      <label for="email">{{ "clientOwnerEmail" | i18n }}</label>
-      <input
-        id="email"
-        class="form-control"
-        type="text"
-        name="Email"
-        [(ngModel)]="clientOwnerEmail"
-        required
-      />
-      <small class="text-muted">{{ "clientOwnerDesc" | i18n: "20" }}</small>
-    </div>
-  </div>
-  <div *ngIf="!providerId && !acceptingSponsorship">
-    <div class="form-group form-check">
-      <input
-        id="ownedBusiness"
-        class="form-check-input"
-        type="checkbox"
-        name="OwnedBusiness"
-        [(ngModel)]="ownedBusiness"
-        (change)="changedOwnedBusiness()"
-      />
-      <label for="ownedBusiness" class="form-check-label">{{
-        "accountOwnedBusiness" | i18n
-      }}</label>
-    </div>
-    <div class="row" *ngIf="ownedBusiness">
-      <div class="form-group col-6">
-        <label for="businessName">{{ "businessName" | i18n }}</label>
-        <input
-          id="businessName"
-          class="form-control"
-          type="text"
-          name="BusinessName"
-          [(ngModel)]="businessName"
-        />
-      </div>
-    </div>
-  </div>
   <h2 class="mt-5">{{ "chooseYourPlan" | i18n }}</h2>
   <div *ngFor="let selectableProduct of selectableProducts" class="form-check form-check-block">
     <input
@@ -94,7 +43,7 @@
       name="product"
       id="product{{ selectableProduct.product }}"
       [value]="selectableProduct.product"
-      [(ngModel)]="product"
+      formControlName="product"
       (change)="changedProduct()"
     />
     <label class="form-check-label" for="product{{ selectableProduct.product }}">
@@ -167,7 +116,7 @@
       <span *ngIf="selectableProduct.product == productTypes.Free">{{ "freeForever" | i18n }}</span>
     </label>
   </div>
-  <div *ngIf="product !== productTypes.Free">
+  <div *ngIf="formGroup.controls['product'].value !== productTypes.Free">
     <ng-container *ngIf="selectedPlan.hasAdditionalSeatsOption && !selectedPlan.baseSeats">
       <h2 class="mt-5">{{ "users" | i18n }}</h2>
       <div class="row">
@@ -177,8 +126,8 @@
             id="additionalSeats"
             class="form-control"
             type="number"
-            name="AdditionalSeats"
+            name="additionalSeats"
-            [(ngModel)]="additionalSeats"
+            formControlName="additionalSeats"
             min="1"
             max="100000"
             placeholder="{{ 'userSeatsDesc' | i18n }}"
@@ -196,8 +145,8 @@
           id="additionalSeats"
           class="form-control"
           type="number"
-          name="AdditionalSeats"
+          name="additionalSeats"
-          [(ngModel)]="additionalSeats"
+          formControlName="additionalSeats"
           min="0"
           max="100000"
           placeholder="{{ 'userSeatsDesc' | i18n }}"
@@ -215,8 +164,8 @@
           id="additionalStorage"
           class="form-control"
           type="number"
-          name="AdditionalStorageGb"
+          name="additionalStorageGb"
-          [(ngModel)]="additionalStorage"
+          formControlName="additionalStorage"
           min="0"
           max="99"
           step="1"
@@ -238,8 +187,8 @@
             id="premiumAccess"
             class="form-check-input"
             type="checkbox"
-            name="PremiumAccessAddon"
+            name="premiumAccessAddon"
-            [(ngModel)]="premiumAccessAddon"
+            formControlName="premiumAccessAddon"
           />
           <label for="premiumAccess" class="form-check-label bold">{{
             "premiumAccess" | i18n
@@ -255,10 +204,10 @@
       <input
         class="form-check-input"
         type="radio"
-        name="BillingInterval"
+        name="plan"
         id="interval{{ selectablePlan.type }}"
         [value]="selectablePlan.type"
-        [(ngModel)]="plan"
+        formControlName="plan"
       />
       <label class="form-check-label" for="interval{{ selectablePlan.type }}">
         <ng-container *ngIf="selectablePlan.isAnnual">
@@ -281,7 +230,7 @@
           <small *ngIf="selectablePlan.hasAdditionalSeatsOption">
             <span *ngIf="selectablePlan.baseSeats">{{ "additionalUsers" | i18n }}:</span>
             <span *ngIf="!selectablePlan.baseSeats">{{ "users" | i18n }}:</span>
-            {{ additionalSeats || 0 }} &times;
+            {{ formGroup.controls["additionalSeats"].value || 0 }} &times;
             {{ selectablePlan.seatPrice / 12 | currency: "$" }} &times; 12
             {{ "monthAbbr" | i18n }} = {{ seatTotal(selectablePlan) | currency: "$" }} /{{
               "year" | i18n
@@ -314,18 +263,23 @@
           <small *ngIf="selectablePlan.hasAdditionalSeatsOption">
             <span *ngIf="selectablePlan.baseSeats">{{ "additionalUsers" | i18n }}:</span>
             <span *ngIf="!selectablePlan.baseSeats">{{ "users" | i18n }}:</span>
-            {{ additionalSeats || 0 }} &times; {{ selectablePlan.seatPrice | currency: "$" }}
+            {{ formGroup.controls["additionalSeats"].value || 0 }} &times;
-            {{ "monthAbbr" | i18n }} = {{ seatTotal(selectablePlan) | currency: "$" }} /{{
+            {{ selectablePlan.seatPrice | currency: "$" }} {{ "monthAbbr" | i18n }} =
-              "month" | i18n
+            {{ seatTotal(selectablePlan) | currency: "$" }} /{{ "month" | i18n }}
-            }}
           </small>
           <small *ngIf="selectablePlan.hasAdditionalStorageOption">
-            {{ "additionalStorageGb" | i18n }}: {{ additionalStorage || 0 }} &times;
+            {{ "additionalStorageGb" | i18n }}:
+            {{ formGroup.controls["additionalStorage"].value || 0 }} &times;
             {{ selectablePlan.additionalStoragePricePerGb | currency: "$" }}
             {{ "monthAbbr" | i18n }} =
             {{ additionalStorageTotal(selectablePlan) | currency: "$" }} /{{ "month" | i18n }}
           </small>
-          <small *ngIf="selectablePlan.hasPremiumAccessOption && premiumAccessAddon">
+          <small
+            *ngIf="
+              selectablePlan.hasPremiumAccessOption &&
+              formGroup.controls['premiumAccessAddon'].value
+            "
+          >
             {{ "premiumAccess" | i18n }}:
             {{ selectablePlan.premiumAccessOptionCost | currency: "$" }} {{ "monthAbbr" | i18n }} =
             {{ 40 | currency: "$" }}

apps/web/src/app/settings/organization-plans.component.ts

@@ -1,4 +1,5 @@
 import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from "@angular/core";
+import { FormBuilder, Validators } from "@angular/forms";
 import { Router } from "@angular/router";
 
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
@@ -45,19 +46,24 @@ export class OrganizationPlansComponent implements OnInit {
 
   loading = true;
   selfHosted = false;
-  ownedBusiness = false;
-  premiumAccessAddon = false;
-  additionalStorage = 0;
-  additionalSeats = 0;
-  name: string;
-  billingEmail: string;
-  clientOwnerEmail: string;
-  businessName: string;
   productTypes = ProductType;
   formPromise: Promise<any>;
   singleOrgPolicyBlock = false;
   discount = 0;
 
+  formGroup = this.formBuilder.group({
+    name: ["", [Validators.required]],
+    billingEmail: ["", [Validators.required, Validators.email]],
+    businessOwned: [false],
+    premiumAccessAddon: [false],
+    additionalStorage: [0, [Validators.min(0), Validators.max(99)]],
+    additionalSeats: [0, [Validators.min(0), Validators.max(100000)]],
+    clientOwnerEmail: [""],
+    businessName: [""],
+    plan: [this.plan],
+    product: [this.product],
+  });
+
   plans: PlanResponse[];
 
   constructor(
@@ -70,7 +76,8 @@ export class OrganizationPlansComponent implements OnInit {
     private policyService: PolicyService,
     private organizationService: OrganizationService,
     private logService: LogService,
-    private messagingService: MessagingService
+    private messagingService: MessagingService,
+    private formBuilder: FormBuilder
   ) {
     this.selfHosted = platformUtilsService.isSelfHost();
   }
@@ -80,12 +87,12 @@ export class OrganizationPlansComponent implements OnInit {
       const plans = await this.apiService.getPlans();
       this.plans = plans.data;
       if (this.product === ProductType.Enterprise || this.product === ProductType.Teams) {
-        this.ownedBusiness = true;
+        this.formGroup.controls.businessOwned.setValue(true);
       }
     }
 
     if (this.providerId) {
-      this.ownedBusiness = true;
+      this.formGroup.controls.businessOwned.setValue(true);
       this.changedOwnedBusiness();
     }
 
@@ -97,7 +104,7 @@ export class OrganizationPlansComponent implements OnInit {
   }
 
   get selectedPlan() {
-    return this.plans.find((plan) => plan.type === this.plan);
+    return this.plans.find((plan) => plan.type === this.formGroup.controls.plan.value);
   }
 
   get selectedPlanInterval() {
@@ -107,7 +114,7 @@ export class OrganizationPlansComponent implements OnInit {
   get selectableProducts() {
     let validPlans = this.plans.filter((plan) => plan.type !== PlanType.Custom);
 
-    if (this.ownedBusiness) {
+    if (this.formGroup.controls.businessOwned.value) {
       validPlans = validPlans.filter((plan) => plan.canBeUsedByBusiness);
     }
 
@@ -133,7 +140,8 @@ export class OrganizationPlansComponent implements OnInit {
 
   get selectablePlans() {
     return this.plans.filter(
-      (plan) => !plan.legacyYear && !plan.disabled && plan.product === this.product
+      (plan) =>
+        !plan.legacyYear && !plan.disabled && plan.product === this.formGroup.controls.product.value
     );
   }
 
@@ -156,7 +164,10 @@ export class OrganizationPlansComponent implements OnInit {
       return 0;
     }
 
-    return plan.additionalStoragePricePerGb * Math.abs(this.additionalStorage || 0);
+    return (
+      plan.additionalStoragePricePerGb *
+      Math.abs(this.formGroup.controls.additionalStorage.value || 0)
+    );
   }
 
   seatTotal(plan: PlanResponse): number {
@@ -164,18 +175,27 @@ export class OrganizationPlansComponent implements OnInit {
       return 0;
     }
 
-    return plan.seatPrice * Math.abs(this.additionalSeats || 0);
+    return plan.seatPrice * Math.abs(this.formGroup.controls.additionalSeats.value || 0);
   }
 
   get subtotal() {
     let subTotal = this.selectedPlan.basePrice;
-    if (this.selectedPlan.hasAdditionalSeatsOption && this.additionalSeats) {
+    if (
+      this.selectedPlan.hasAdditionalSeatsOption &&
+      this.formGroup.controls.additionalSeats.value
+    ) {
       subTotal += this.seatTotal(this.selectedPlan);
     }
-    if (this.selectedPlan.hasAdditionalStorageOption && this.additionalStorage) {
+    if (
+      this.selectedPlan.hasAdditionalStorageOption &&
+      this.formGroup.controls.additionalStorage.value
+    ) {
       subTotal += this.additionalStorageTotal(this.selectedPlan);
     }
-    if (this.selectedPlan.hasPremiumAccessOption && this.premiumAccessAddon) {
+    if (
+      this.selectedPlan.hasPremiumAccessOption &&
+      this.formGroup.controls.premiumAccessAddon.value
+    ) {
       subTotal += this.selectedPlan.premiumAccessOptionPrice;
     }
     return subTotal - this.discount;
@@ -206,30 +226,30 @@ export class OrganizationPlansComponent implements OnInit {
   }
 
   changedProduct() {
-    this.plan = this.selectablePlans[0].type;
+    this.formGroup.controls.plan.setValue(this.selectablePlans[0].type);
     if (!this.selectedPlan.hasPremiumAccessOption) {
-      this.premiumAccessAddon = false;
+      this.formGroup.controls.premiumAccessAddon.setValue(false);
     }
     if (!this.selectedPlan.hasAdditionalStorageOption) {
-      this.additionalStorage = 0;
+      this.formGroup.controls.additionalStorage.setValue(0);
     }
     if (!this.selectedPlan.hasAdditionalSeatsOption) {
-      this.additionalSeats = 0;
+      this.formGroup.controls.additionalSeats.setValue(0);
     } else if (
-      !this.additionalSeats &&
+      !this.formGroup.controls.additionalSeats.value &&
       !this.selectedPlan.baseSeats &&
       this.selectedPlan.hasAdditionalSeatsOption
     ) {
-      this.additionalSeats = 1;
+      this.formGroup.controls.additionalSeats.setValue(1);
     }
   }
 
   changedOwnedBusiness() {
-    if (!this.ownedBusiness || this.selectedPlan.canBeUsedByBusiness) {
+    if (!this.formGroup.controls.businessOwned.value || this.selectedPlan.canBeUsedByBusiness) {
       return;
     }
-    this.product = ProductType.Teams;
+    this.formGroup.controls.product.setValue(ProductType.Teams);
-    this.plan = PlanType.TeamsAnnually;
+    this.formGroup.controls.plan.setValue(PlanType.TeamsAnnually);
   }
 
   changedCountry() {
@@ -312,11 +332,13 @@ export class OrganizationPlansComponent implements OnInit {
 
   private async updateOrganization(orgId: string) {
     const request = new OrganizationUpgradeRequest();
-    request.businessName = this.ownedBusiness ? this.businessName : null;
+    request.businessName = this.formGroup.controls.businessOwned.value
-    request.additionalSeats = this.additionalSeats;
+      ? this.formGroup.controls.businessName.value
-    request.additionalStorageGb = this.additionalStorage;
+      : null;
+    request.additionalSeats = this.formGroup.controls.additionalSeats.value;
+    request.additionalStorageGb = this.formGroup.controls.additionalStorage.value;
     request.premiumAccessAddon =
-      this.selectedPlan.hasPremiumAccessOption && this.premiumAccessAddon;
+      this.selectedPlan.hasPremiumAccessOption && this.formGroup.controls.premiumAccessAddon.value;
     request.planType = this.selectedPlan.type;
     request.billingAddressCountry = this.taxComponent.taxInfo.country;
     request.billingAddressPostalCode = this.taxComponent.taxInfo.postalCode;
@@ -345,8 +367,8 @@ export class OrganizationPlansComponent implements OnInit {
     const request = new OrganizationCreateRequest();
     request.key = key;
     request.collectionName = collectionCt;
-    request.name = this.name;
+    request.name = this.formGroup.controls.name.value;
-    request.billingEmail = this.billingEmail;
+    request.billingEmail = this.formGroup.controls.billingEmail.value;
     request.keys = new OrganizationKeysRequest(orgKeys[0], orgKeys[1].encryptedString);
 
     if (this.selectedPlan.type === PlanType.Free) {
@@ -356,11 +378,14 @@ export class OrganizationPlansComponent implements OnInit {
 
       request.paymentToken = tokenResult[0];
       request.paymentMethodType = tokenResult[1];
-      request.businessName = this.ownedBusiness ? this.businessName : null;
+      request.businessName = this.formGroup.controls.businessOwned.value
-      request.additionalSeats = this.additionalSeats;
+        ? this.formGroup.controls.businessName.value
-      request.additionalStorageGb = this.additionalStorage;
+        : null;
+      request.additionalSeats = this.formGroup.controls.additionalSeats.value;
+      request.additionalStorageGb = this.formGroup.controls.additionalStorage.value;
       request.premiumAccessAddon =
-        this.selectedPlan.hasPremiumAccessOption && this.premiumAccessAddon;
+        this.selectedPlan.hasPremiumAccessOption &&
+        this.formGroup.controls.premiumAccessAddon.value;
       request.planType = this.selectedPlan.type;
       request.billingAddressPostalCode = this.taxComponent.taxInfo.postalCode;
       request.billingAddressCountry = this.taxComponent.taxInfo.country;
@@ -374,7 +399,10 @@ export class OrganizationPlansComponent implements OnInit {
     }
 
     if (this.providerId) {
-      const providerRequest = new ProviderOrganizationCreateRequest(this.clientOwnerEmail, request);
+      const providerRequest = new ProviderOrganizationCreateRequest(
+        this.formGroup.controls.clientOwnerEmail.value,
+        request
+      );
       const providerKey = await this.cryptoService.getProviderKey(this.providerId);
       providerRequest.organizationCreateRequest.key = (
         await this.cryptoService.encrypt(orgKey.key, providerKey)