vaultwarden
/
bitwarden-estensione-browser
mirror of https://github.com/bitwarden/browser
1
0
Fork 0
Code Issues 1 Releases Wiki Activity

[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
This commit is contained in:
Robyn MacCallum 2022-07-08 21:05:35 -04:00 committed by GitHub
parent 1b0ab38ada
commit 9347b13a76
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 157 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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: [

12
apps/web/src/app/modules/organizations/create/organization-create.module.ts Normal file
View File

@ -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 {}

32
apps/web/src/app/modules/organizations/create/organization-information.component.html Normal file
View File

@ -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>

12
apps/web/src/app/modules/organizations/create/organization-information.component.ts Normal file
View File

@ -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>();
}

2
apps/web/src/app/oss.module.ts
View File

@ -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,

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

@ -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: "$" }}

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

@ -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)