mirror of
https://github.com/bitwarden/browser.git
synced 2024-12-22 16:29:09 +01:00
Update billing-sync-key to use Dialog (#6596)
This commit is contained in:
parent
b1a92ba04b
commit
c39ffe1991
@ -1,69 +1,40 @@
|
|||||||
<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="billingSyncTitle">
|
<form [formGroup]="formGroup" [bitSubmit]="submit">
|
||||||
<div class="modal-dialog modal-dialog-scrollable" role="document">
|
<bit-dialog>
|
||||||
<form
|
<h1 bitDialogTitle>
|
||||||
class="modal-content"
|
{{ "manageBillingSync" | i18n }}
|
||||||
#form
|
</h1>
|
||||||
(ngSubmit)="submit()"
|
<div bitDialogContent>
|
||||||
[appApiAction]="formPromise"
|
<p>{{ "billingSyncKeyDesc" | i18n }}</p>
|
||||||
ngNativeValidate
|
<bit-form-field>
|
||||||
>
|
<bit-label>
|
||||||
<div class="modal-header">
|
{{ "billingSyncKey" | i18n }}
|
||||||
<h1 class="modal-title" id="billingSyncTitle">{{ "manageBillingSync" | i18n }}</h1>
|
</bit-label>
|
||||||
<button
|
<input
|
||||||
type="button"
|
bitInput
|
||||||
class="close"
|
id="billingSyncKey"
|
||||||
data-dismiss="modal"
|
type="text"
|
||||||
appA11yTitle="{{ 'close' | i18n }}"
|
formControlName="billingSyncKey"
|
||||||
>
|
appAutofocus
|
||||||
<span aria-hidden="true">×</span>
|
appInputVerbatim
|
||||||
</button>
|
/>
|
||||||
</div>
|
</bit-form-field>
|
||||||
<div class="modal-body">
|
</div>
|
||||||
<p>{{ "billingSyncKeyDesc" | i18n }}</p>
|
<ng-container bitDialogFooter>
|
||||||
<div class="form-group">
|
<button type="submit" bitButton bitFormButton buttonType="primary">
|
||||||
<label for="billingSyncKey"
|
{{ "save" | i18n }}
|
||||||
>{{ "billingSyncKey" | i18n }} <small>(</small><small>{{ "required" | i18n }}</small
|
</button>
|
||||||
><small>)</small></label
|
<button bitButton bitDialogClose type="button">
|
||||||
>
|
{{ "cancel" | i18n }}
|
||||||
<input
|
</button>
|
||||||
id="billingSyncKey"
|
<button
|
||||||
type="input"
|
class="tw-ml-auto"
|
||||||
name="billingSyncKey"
|
type="button"
|
||||||
class="form-control"
|
buttonType="danger"
|
||||||
[(ngModel)]="billingSyncKey"
|
bitIconButton="bwi-trash"
|
||||||
required
|
bitFormButton
|
||||||
appAutofocus
|
[bitAction]="deleteConnection"
|
||||||
appInputVerbatim
|
appA11yTitle="{{ 'delete' | i18n }}"
|
||||||
/>
|
></button>
|
||||||
</div>
|
</ng-container>
|
||||||
</div>
|
</bit-dialog>
|
||||||
<div class="modal-footer">
|
</form>
|
||||||
<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>{{ "save" | i18n }}</span>
|
|
||||||
</button>
|
|
||||||
<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
|
|
||||||
{{ "cancel" | i18n }}
|
|
||||||
</button>
|
|
||||||
<div class="ml-auto">
|
|
||||||
<button
|
|
||||||
#deleteBtn
|
|
||||||
type="button"
|
|
||||||
(click)="deleteConnection()"
|
|
||||||
class="btn btn-outline-danger"
|
|
||||||
appA11yTitle="{{ 'delete' | i18n }}"
|
|
||||||
[disabled]="form.loading"
|
|
||||||
>
|
|
||||||
<i class="bwi bwi-trash bwi-lg bwi-fw" [hidden]="form.loading" aria-hidden="true"></i>
|
|
||||||
<i
|
|
||||||
class="bwi bwi-spinner bwi-spin bwi-lg bwi-fw"
|
|
||||||
[hidden]="!form.loading"
|
|
||||||
title="{{ 'loading' | i18n }}"
|
|
||||||
aria-hidden="true"
|
|
||||||
></i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
import { Component } from "@angular/core";
|
import { DIALOG_DATA, DialogRef } from "@angular/cdk/dialog";
|
||||||
|
import { Component, Inject } from "@angular/core";
|
||||||
|
import { FormControl, FormGroup, Validators } from "@angular/forms";
|
||||||
|
|
||||||
import { ModalRef } from "@bitwarden/angular/components/modal/modal.ref";
|
|
||||||
import { ModalConfig } from "@bitwarden/angular/services/modal.service";
|
|
||||||
import { ApiService } from "@bitwarden/common/abstractions/api.service";
|
import { ApiService } from "@bitwarden/common/abstractions/api.service";
|
||||||
import { OrganizationConnectionType } from "@bitwarden/common/admin-console/enums";
|
import { OrganizationConnectionType } from "@bitwarden/common/admin-console/enums";
|
||||||
import { OrganizationConnectionRequest } from "@bitwarden/common/admin-console/models/request/organization-connection.request";
|
import { OrganizationConnectionRequest } from "@bitwarden/common/admin-console/models/request/organization-connection.request";
|
||||||
@ -9,6 +9,7 @@ import { OrganizationConnectionResponse } from "@bitwarden/common/admin-console/
|
|||||||
import { BillingSyncConfigApi } from "@bitwarden/common/billing/models/api/billing-sync-config.api";
|
import { BillingSyncConfigApi } from "@bitwarden/common/billing/models/api/billing-sync-config.api";
|
||||||
import { BillingSyncConfigRequest } from "@bitwarden/common/billing/models/request/billing-sync-config.request";
|
import { BillingSyncConfigRequest } from "@bitwarden/common/billing/models/request/billing-sync-config.request";
|
||||||
import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
|
import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
|
||||||
|
import { DialogService } from "@bitwarden/components";
|
||||||
|
|
||||||
export interface BillingSyncKeyModalData {
|
export interface BillingSyncKeyModalData {
|
||||||
entityId: string;
|
entityId: string;
|
||||||
@ -21,60 +22,65 @@ export interface BillingSyncKeyModalData {
|
|||||||
templateUrl: "billing-sync-key.component.html",
|
templateUrl: "billing-sync-key.component.html",
|
||||||
})
|
})
|
||||||
export class BillingSyncKeyComponent {
|
export class BillingSyncKeyComponent {
|
||||||
entityId: string;
|
protected entityId: string;
|
||||||
existingConnectionId: string;
|
protected existingConnectionId: string;
|
||||||
billingSyncKey: string;
|
protected billingSyncKey: string;
|
||||||
setParentConnection: (connection: OrganizationConnectionResponse<BillingSyncConfigApi>) => void;
|
protected setParentConnection: (
|
||||||
|
connection: OrganizationConnectionResponse<BillingSyncConfigApi>
|
||||||
|
) => void;
|
||||||
|
|
||||||
formPromise: Promise<OrganizationConnectionResponse<BillingSyncConfigApi>> | Promise<void>;
|
protected formGroup: FormGroup;
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
|
private dialogRef: DialogRef,
|
||||||
|
@Inject(DIALOG_DATA) protected data: BillingSyncKeyModalData,
|
||||||
private apiService: ApiService,
|
private apiService: ApiService,
|
||||||
private logService: LogService,
|
private logService: LogService
|
||||||
protected modalRef: ModalRef,
|
|
||||||
config: ModalConfig<BillingSyncKeyModalData>
|
|
||||||
) {
|
) {
|
||||||
this.entityId = config.data.entityId;
|
this.entityId = data.entityId;
|
||||||
this.existingConnectionId = config.data.existingConnectionId;
|
this.existingConnectionId = data.existingConnectionId;
|
||||||
this.billingSyncKey = config.data.billingSyncKey;
|
this.billingSyncKey = data.billingSyncKey;
|
||||||
this.setParentConnection = config.data.setParentConnection;
|
this.setParentConnection = data.setParentConnection;
|
||||||
|
|
||||||
|
this.formGroup = new FormGroup({
|
||||||
|
billingSyncKey: new FormControl<string>(this.billingSyncKey, Validators.required),
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
async submit() {
|
submit = async () => {
|
||||||
try {
|
try {
|
||||||
const request = new OrganizationConnectionRequest(
|
const request = new OrganizationConnectionRequest(
|
||||||
this.entityId,
|
this.entityId,
|
||||||
OrganizationConnectionType.CloudBillingSync,
|
OrganizationConnectionType.CloudBillingSync,
|
||||||
true,
|
true,
|
||||||
new BillingSyncConfigRequest(this.billingSyncKey)
|
new BillingSyncConfigRequest(this.formGroup.value.billingSyncKey)
|
||||||
);
|
);
|
||||||
if (this.existingConnectionId == null) {
|
|
||||||
this.formPromise = this.apiService.createOrganizationConnection(
|
const response =
|
||||||
request,
|
this.existingConnectionId == null
|
||||||
BillingSyncConfigApi
|
? await this.apiService.createOrganizationConnection(request, BillingSyncConfigApi)
|
||||||
);
|
: await this.apiService.updateOrganizationConnection(
|
||||||
} else {
|
request,
|
||||||
this.formPromise = this.apiService.updateOrganizationConnection(
|
BillingSyncConfigApi,
|
||||||
request,
|
this.existingConnectionId
|
||||||
BillingSyncConfigApi,
|
);
|
||||||
this.existingConnectionId
|
|
||||||
);
|
|
||||||
}
|
|
||||||
const response = (await this
|
|
||||||
.formPromise) as OrganizationConnectionResponse<BillingSyncConfigApi>;
|
|
||||||
this.existingConnectionId = response?.id;
|
this.existingConnectionId = response?.id;
|
||||||
this.billingSyncKey = response?.config?.billingSyncKey;
|
this.billingSyncKey = response?.config?.billingSyncKey;
|
||||||
this.setParentConnection(response);
|
this.setParentConnection(response);
|
||||||
this.modalRef.close();
|
this.dialogRef.close();
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
this.logService.error(e);
|
this.logService.error(e);
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
async deleteConnection() {
|
deleteConnection = async () => {
|
||||||
this.formPromise = this.apiService.deleteOrganizationConnection(this.existingConnectionId);
|
await this.apiService.deleteOrganizationConnection(this.existingConnectionId);
|
||||||
await this.formPromise;
|
|
||||||
this.setParentConnection(null);
|
this.setParentConnection(null);
|
||||||
this.modalRef.close();
|
this.dialogRef.close();
|
||||||
|
};
|
||||||
|
|
||||||
|
static open(dialogService: DialogService, data: BillingSyncKeyModalData) {
|
||||||
|
return dialogService.open(BillingSyncKeyComponent, { data });
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -3,7 +3,6 @@ import { FormControl, FormGroup } from "@angular/forms";
|
|||||||
import { ActivatedRoute } from "@angular/router";
|
import { ActivatedRoute } from "@angular/router";
|
||||||
import { concatMap, Subject, takeUntil } from "rxjs";
|
import { concatMap, Subject, takeUntil } from "rxjs";
|
||||||
|
|
||||||
import { ModalConfig, ModalService } from "@bitwarden/angular/services/modal.service";
|
|
||||||
import { ApiService } from "@bitwarden/common/abstractions/api.service";
|
import { ApiService } from "@bitwarden/common/abstractions/api.service";
|
||||||
import { OrganizationApiServiceAbstraction } from "@bitwarden/common/admin-console/abstractions/organization/organization-api.service.abstraction";
|
import { OrganizationApiServiceAbstraction } from "@bitwarden/common/admin-console/abstractions/organization/organization-api.service.abstraction";
|
||||||
import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
|
import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
|
||||||
@ -16,8 +15,9 @@ import { EnvironmentService } from "@bitwarden/common/platform/abstractions/envi
|
|||||||
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
|
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
|
||||||
import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
|
import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
|
||||||
import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
|
import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
|
||||||
|
import { DialogService } from "@bitwarden/components";
|
||||||
|
|
||||||
import { BillingSyncKeyComponent, BillingSyncKeyModalData } from "./billing-sync-key.component";
|
import { BillingSyncKeyComponent } from "./billing-sync-key.component";
|
||||||
|
|
||||||
enum LicenseOptions {
|
enum LicenseOptions {
|
||||||
SYNC = 0,
|
SYNC = 0,
|
||||||
@ -73,7 +73,6 @@ export class OrganizationSubscriptionSelfhostComponent implements OnInit, OnDest
|
|||||||
}
|
}
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
private modalService: ModalService,
|
|
||||||
private messagingService: MessagingService,
|
private messagingService: MessagingService,
|
||||||
private apiService: ApiService,
|
private apiService: ApiService,
|
||||||
private organizationService: OrganizationService,
|
private organizationService: OrganizationService,
|
||||||
@ -81,7 +80,8 @@ export class OrganizationSubscriptionSelfhostComponent implements OnInit, OnDest
|
|||||||
private organizationApiService: OrganizationApiServiceAbstraction,
|
private organizationApiService: OrganizationApiServiceAbstraction,
|
||||||
private platformUtilsService: PlatformUtilsService,
|
private platformUtilsService: PlatformUtilsService,
|
||||||
private i18nService: I18nService,
|
private i18nService: I18nService,
|
||||||
private environmentService: EnvironmentService
|
private environmentService: EnvironmentService,
|
||||||
|
private dialogService: DialogService
|
||||||
) {
|
) {
|
||||||
this.cloudWebVaultUrl = this.environmentService.getCloudWebVaultUrl();
|
this.cloudWebVaultUrl = this.environmentService.getCloudWebVaultUrl();
|
||||||
}
|
}
|
||||||
@ -144,18 +144,14 @@ export class OrganizationSubscriptionSelfhostComponent implements OnInit, OnDest
|
|||||||
}
|
}
|
||||||
|
|
||||||
manageBillingSyncSelfHosted() {
|
manageBillingSyncSelfHosted() {
|
||||||
const modalConfig: ModalConfig<BillingSyncKeyModalData> = {
|
BillingSyncKeyComponent.open(this.dialogService, {
|
||||||
data: {
|
entityId: this.organizationId,
|
||||||
entityId: this.organizationId,
|
existingConnectionId: this.existingBillingSyncConnection?.id,
|
||||||
existingConnectionId: this.existingBillingSyncConnection?.id,
|
billingSyncKey: this.existingBillingSyncConnection?.config?.billingSyncKey,
|
||||||
billingSyncKey: this.existingBillingSyncConnection?.config?.billingSyncKey,
|
setParentConnection: (connection: OrganizationConnectionResponse<BillingSyncConfigApi>) => {
|
||||||
setParentConnection: (connection: OrganizationConnectionResponse<BillingSyncConfigApi>) => {
|
this.existingBillingSyncConnection = connection;
|
||||||
this.existingBillingSyncConnection = connection;
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
};
|
});
|
||||||
|
|
||||||
this.modalService.open(BillingSyncKeyComponent, modalConfig);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
syncLicense = async () => {
|
syncLicense = async () => {
|
||||||
|
Loading…
Reference in New Issue
Block a user