[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
2024-07-02 11:34:53 +02:00 · 2022-07-08 21:05:35 -04:00 · 2022-07-08 21:05:35 -04:00 · 9347b13a76
commit 9347b13a76
parent 1b0ab38ada
7 changed files with 157 additions and 115 deletions
--- a/apps/web/src/app/modules/loose-components.module.ts
+++ b/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: [
--- a/apps/web/src/app/modules/organizations/create/organization-create.module.ts
+++ b/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 {}
--- a/apps/web/src/app/modules/organizations/create/organization-information.component.html
+++ b/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>
--- a/apps/web/src/app/modules/organizations/create/organization-information.component.ts
+++ b/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>();
+}
--- a/apps/web/src/app/oss.module.ts
+++ b/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,
--- a/apps/web/src/app/settings/organization-plans.component.html
+++ b/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>
-  <div class="row" *ngIf="createOrganization">
-    <div class="form-group col-6">
-      <label for="name">{{ "organizationName" | i18n }}</label>
-      <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>
+  <app-org-info
+    (changedBusinessOwned)="changedOwnedBusiness()"
+    [formGroup]="formGroup"
+  ></app-org-info>
  <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"
-            [(ngModel)]="additionalSeats"
+            name="additionalSeats"
+            formControlName="additionalSeats"
            min="1"
            max="100000"
            placeholder="{{ 'userSeatsDesc' | i18n }}"
@ -196,8 +145,8 @@
          id="additionalSeats"
          class="form-control"
          type="number"
-          name="AdditionalSeats"
-          [(ngModel)]="additionalSeats"
+          name="additionalSeats"
+          formControlName="additionalSeats"
          min="0"
          max="100000"
          placeholder="{{ 'userSeatsDesc' | i18n }}"
@ -215,8 +164,8 @@
          id="additionalStorage"
          class="form-control"
          type="number"
-          name="AdditionalStorageGb"
-          [(ngModel)]="additionalStorage"
+          name="additionalStorageGb"
+          formControlName="additionalStorage"
          min="0"
          max="99"
          step="1"
@ -238,8 +187,8 @@
            id="premiumAccess"
            class="form-check-input"
            type="checkbox"
-            name="PremiumAccessAddon"
-            [(ngModel)]="premiumAccessAddon"
+            name="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: "$" }}
-            {{ "monthAbbr" | i18n }} = {{ seatTotal(selectablePlan) | currency: "$" }} /{{
-              "month" | i18n
-            }}
+            {{ formGroup.controls["additionalSeats"].value || 0 }} &times;
+            {{ selectablePlan.seatPrice | currency: "$" }} {{ "monthAbbr" | 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: "$" }}
--- a/apps/web/src/app/settings/organization-plans.component.ts
+++ b/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.plan = PlanType.TeamsAnnually;
+    this.formGroup.controls.product.setValue(ProductType.Teams);
+    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.additionalSeats = this.additionalSeats;
-    request.additionalStorageGb = this.additionalStorage;
+    request.businessName = this.formGroup.controls.businessOwned.value
+      ? this.formGroup.controls.businessName.value
+      : 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.billingEmail = this.billingEmail;
+    request.name = this.formGroup.controls.name.value;
+    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.additionalSeats = this.additionalSeats;
-      request.additionalStorageGb = this.additionalStorage;
+      request.businessName = this.formGroup.controls.businessOwned.value
+        ? this.formGroup.controls.businessName.value
+        : 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)