2022-05-09 14:21:52 +02:00
|
|
|
<div
|
|
|
|
[ngClass]="{
|
|
|
|
'page-header': selfHosted,
|
|
|
|
'tabbed-header': !selfHosted
|
|
|
|
}"
|
|
|
|
>
|
2019-02-18 21:28:23 +01:00
|
|
|
<h1>
|
2022-05-09 14:21:52 +02:00
|
|
|
{{ title }}
|
2019-10-11 16:35:24 +02:00
|
|
|
<small *ngIf="firstLoaded && loading">
|
|
|
|
<i
|
2022-01-27 18:25:58 +01:00
|
|
|
class="bwi bwi-spinner bwi-spin text-muted"
|
2019-10-11 16:35:24 +02:00
|
|
|
title="{{ 'loading' | i18n }}"
|
|
|
|
aria-hidden="true"
|
|
|
|
></i>
|
|
|
|
<span class="sr-only">{{ "loading" | i18n }}</span>
|
2019-02-18 21:28:23 +01:00
|
|
|
</small>
|
|
|
|
</h1>
|
|
|
|
</div>
|
2019-10-11 16:35:24 +02:00
|
|
|
<ng-container *ngIf="!firstLoaded && loading">
|
2022-01-27 18:25:58 +01:00
|
|
|
<i
|
|
|
|
class="bwi bwi-spinner bwi-spin text-muted"
|
|
|
|
title="{{ 'loading' | i18n }}"
|
|
|
|
aria-hidden="true"
|
|
|
|
></i>
|
2019-10-11 16:35:24 +02:00
|
|
|
<span class="sr-only">{{ "loading" | i18n }}</span>
|
|
|
|
</ng-container>
|
2019-02-18 21:28:23 +01:00
|
|
|
<ng-container *ngIf="sub">
|
2022-05-09 14:21:52 +02:00
|
|
|
<bit-callout
|
2019-02-21 22:50:37 +01:00
|
|
|
type="warning"
|
|
|
|
title="{{ 'canceled' | i18n }}"
|
|
|
|
*ngIf="subscription && subscription.cancelled"
|
|
|
|
>
|
2022-05-09 14:21:52 +02:00
|
|
|
{{ "subscriptionCanceled" | i18n }}</bit-callout
|
2019-02-21 22:50:37 +01:00
|
|
|
>
|
2022-05-09 14:21:52 +02:00
|
|
|
<bit-callout
|
2019-02-18 21:28:23 +01:00
|
|
|
type="warning"
|
|
|
|
title="{{ 'pendingCancellation' | i18n }}"
|
|
|
|
*ngIf="subscriptionMarkedForCancel"
|
|
|
|
>
|
|
|
|
<p>{{ "subscriptionPendingCanceled" | i18n }}</p>
|
2019-02-21 22:50:37 +01:00
|
|
|
<button
|
2022-06-02 11:34:27 +02:00
|
|
|
bitButton
|
2019-02-21 22:50:37 +01:00
|
|
|
type="button"
|
2022-05-09 14:21:52 +02:00
|
|
|
buttonType="secondary"
|
|
|
|
#reinstateBtn
|
|
|
|
class="btn-submit"
|
2019-02-21 22:50:37 +01:00
|
|
|
(click)="reinstate()"
|
|
|
|
[appApiAction]="reinstatePromise"
|
2022-11-28 18:59:46 +01:00
|
|
|
[disabled]="$any(reinstateBtn).loading"
|
2019-02-21 22:50:37 +01:00
|
|
|
>
|
2022-01-27 18:25:58 +01:00
|
|
|
<i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
|
2019-02-18 21:28:23 +01:00
|
|
|
<span>{{ "reinstateSubscription" | i18n }}</span>
|
|
|
|
</button>
|
2022-05-09 14:21:52 +02:00
|
|
|
</bit-callout>
|
2019-02-18 21:28:23 +01:00
|
|
|
<dl *ngIf="selfHosted">
|
|
|
|
<dt>{{ "expiration" | i18n }}</dt>
|
|
|
|
<dd *ngIf="sub.expiration">{{ sub.expiration | date: "mediumDate" }}</dd>
|
|
|
|
<dd *ngIf="!sub.expiration">{{ "neverExpires" | i18n }}</dd>
|
2021-12-17 15:57:11 +01:00
|
|
|
</dl>
|
2019-02-18 21:28:23 +01:00
|
|
|
<div class="row" *ngIf="!selfHosted">
|
|
|
|
<div class="col-4">
|
2021-12-17 15:57:11 +01:00
|
|
|
<dl>
|
2019-02-18 21:28:23 +01:00
|
|
|
<dt>{{ "status" | i18n }}</dt>
|
2021-12-17 15:57:11 +01:00
|
|
|
<dd>
|
2019-02-18 21:28:23 +01:00
|
|
|
<span class="text-capitalize">{{ (subscription && subscription.status) || "-" }}</span>
|
2022-06-02 11:34:27 +02:00
|
|
|
<span bitBadge badgeType="warning" *ngIf="subscriptionMarkedForCancel">{{
|
2019-02-21 22:50:37 +01:00
|
|
|
"pendingCancellation" | i18n
|
2021-12-17 15:57:11 +01:00
|
|
|
}}</span>
|
|
|
|
</dd>
|
2019-02-18 21:28:23 +01:00
|
|
|
<dt>{{ "nextCharge" | i18n }}</dt>
|
2021-12-17 15:57:11 +01:00
|
|
|
<dd>
|
|
|
|
{{
|
2019-02-18 21:28:23 +01:00
|
|
|
nextInvoice
|
|
|
|
? (nextInvoice.date | date: "mediumDate") +
|
2021-12-17 15:57:11 +01:00
|
|
|
", " +
|
2019-02-18 21:28:23 +01:00
|
|
|
(nextInvoice.amount | currency: "$")
|
2021-12-17 15:57:11 +01:00
|
|
|
: "-"
|
|
|
|
}}
|
|
|
|
</dd>
|
|
|
|
</dl>
|
|
|
|
</div>
|
2019-02-18 21:28:23 +01:00
|
|
|
<div class="col-8" *ngIf="subscription">
|
|
|
|
<strong class="d-block mb-1">{{ "details" | i18n }}</strong>
|
|
|
|
<table class="table">
|
2021-12-17 15:57:11 +01:00
|
|
|
<tbody>
|
2019-02-18 21:28:23 +01:00
|
|
|
<tr *ngFor="let i of subscription.items">
|
2021-12-17 15:57:11 +01:00
|
|
|
<td>
|
2019-02-18 21:28:23 +01:00
|
|
|
{{ i.name }} {{ i.quantity > 1 ? "×" + i.quantity : "" }} @
|
|
|
|
{{ i.amount | currency: "$" }}
|
2021-12-17 15:57:11 +01:00
|
|
|
</td>
|
2019-02-18 21:28:23 +01:00
|
|
|
<td>{{ i.quantity * i.amount | currency: "$" }} /{{ i.interval | i18n }}</td>
|
2021-12-17 15:57:11 +01:00
|
|
|
</tr>
|
|
|
|
</tbody>
|
|
|
|
</table>
|
|
|
|
</div>
|
|
|
|
</div>
|
2019-02-18 21:28:23 +01:00
|
|
|
<ng-container *ngIf="selfHosted">
|
2021-12-17 15:57:11 +01:00
|
|
|
<div>
|
2022-06-02 11:34:27 +02:00
|
|
|
<button type="button" bitButton buttonType="secondary" (click)="updateLicense()">
|
2019-02-18 21:28:23 +01:00
|
|
|
{{ "updateLicense" | i18n }}
|
|
|
|
</button>
|
2021-12-17 15:57:11 +01:00
|
|
|
<a
|
2022-06-02 11:34:27 +02:00
|
|
|
bitButton
|
2022-05-09 14:21:52 +02:00
|
|
|
buttonType="secondary"
|
2019-02-21 22:50:37 +01:00
|
|
|
href="https://vault.bitwarden.com/#/settings/subscription"
|
|
|
|
target="_blank"
|
|
|
|
rel="noopener"
|
2021-12-17 15:57:11 +01:00
|
|
|
>
|
2023-03-07 04:30:30 +01:00
|
|
|
{{ "launchCloudSubscription" | i18n }}
|
2021-12-17 15:57:11 +01:00
|
|
|
</a>
|
|
|
|
</div>
|
2019-02-18 21:28:23 +01:00
|
|
|
<div class="card mt-3" *ngIf="showUpdateLicense">
|
|
|
|
<div class="card-body">
|
2021-12-17 15:57:11 +01:00
|
|
|
<button
|
2019-02-18 21:28:23 +01:00
|
|
|
type="button"
|
2019-10-11 16:35:24 +02:00
|
|
|
class="close"
|
2019-02-18 21:28:23 +01:00
|
|
|
appA11yTitle="{{ 'cancel' | i18n }}"
|
2019-03-20 15:16:01 +01:00
|
|
|
(click)="closeUpdateLicense(false)"
|
2021-12-17 15:57:11 +01:00
|
|
|
>
|
2019-03-20 15:16:01 +01:00
|
|
|
<span aria-hidden="true">×</span>
|
2019-02-18 21:28:23 +01:00
|
|
|
</button>
|
|
|
|
<h3 class="card-body-header">{{ "updateLicense" | i18n }}</h3>
|
2019-02-21 22:50:37 +01:00
|
|
|
<app-update-license
|
|
|
|
(onUpdated)="closeUpdateLicense(true)"
|
|
|
|
(onCanceled)="closeUpdateLicense(false)"
|
2019-02-18 21:28:23 +01:00
|
|
|
>
|
|
|
|
</app-update-license>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</ng-container>
|
|
|
|
<ng-container *ngIf="!selfHosted">
|
|
|
|
<div class="d-flex">
|
|
|
|
<button
|
2022-06-02 11:34:27 +02:00
|
|
|
bitButton
|
2019-02-18 21:28:23 +01:00
|
|
|
type="button"
|
2022-05-09 14:21:52 +02:00
|
|
|
buttonType="secondary"
|
2019-02-18 21:28:23 +01:00
|
|
|
(click)="downloadLicense()"
|
2019-02-21 22:50:37 +01:00
|
|
|
*ngIf="!subscription || !subscription.cancelled"
|
2021-12-17 15:57:11 +01:00
|
|
|
>
|
2019-02-21 22:50:37 +01:00
|
|
|
{{ "downloadLicense" | i18n }}
|
|
|
|
</button>
|
2021-12-17 15:57:11 +01:00
|
|
|
<button
|
2022-06-02 11:34:27 +02:00
|
|
|
bitButton
|
2021-12-17 15:57:11 +01:00
|
|
|
#cancelBtn
|
2019-02-21 22:50:37 +01:00
|
|
|
type="button"
|
2022-05-09 14:21:52 +02:00
|
|
|
buttonType="danger"
|
|
|
|
class="btn-submit tw-ml-auto"
|
2019-02-18 21:28:23 +01:00
|
|
|
(click)="cancel()"
|
2019-10-11 16:35:24 +02:00
|
|
|
[appApiAction]="cancelPromise"
|
2022-11-28 18:59:46 +01:00
|
|
|
[disabled]="$any(cancelBtn).loading"
|
2019-02-21 22:50:37 +01:00
|
|
|
*ngIf="subscription && !subscription.cancelled && !subscriptionMarkedForCancel"
|
|
|
|
>
|
2022-01-27 18:25:58 +01:00
|
|
|
<i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
|
2019-02-21 22:50:37 +01:00
|
|
|
<span>{{ "cancelSubscription" | i18n }}</span>
|
|
|
|
</button>
|
2021-12-17 15:57:11 +01:00
|
|
|
</div>
|
2019-02-21 22:50:37 +01:00
|
|
|
<h2 class="spaced-header">{{ "storage" | i18n }}</h2>
|
|
|
|
<p>{{ "subscriptionStorage" | i18n: sub.maxStorageGb || 0:sub.storageName || "0 MB" }}</p>
|
|
|
|
<div class="progress">
|
2021-12-17 15:57:11 +01:00
|
|
|
<div
|
2019-02-21 22:50:37 +01:00
|
|
|
class="progress-bar bg-success"
|
|
|
|
role="progressbar"
|
|
|
|
[ngStyle]="{ width: storageProgressWidth + '%' }"
|
|
|
|
[attr.aria-valuenow]="storagePercentage"
|
|
|
|
aria-valuemin="0"
|
|
|
|
aria-valuemax="100"
|
2021-12-17 15:57:11 +01:00
|
|
|
>
|
2019-02-21 22:50:37 +01:00
|
|
|
{{ storagePercentage / 100 | percent }}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<ng-container *ngIf="subscription && !subscription.cancelled && !subscriptionMarkedForCancel">
|
2019-02-18 21:28:23 +01:00
|
|
|
<div class="mt-3">
|
2019-10-11 16:35:24 +02:00
|
|
|
<div class="d-flex" *ngIf="!showAdjustStorage">
|
2022-06-02 11:34:27 +02:00
|
|
|
<button bitButton type="button" buttonType="secondary" (click)="adjustStorage(true)">
|
2019-02-18 21:28:23 +01:00
|
|
|
{{ "addStorage" | i18n }}
|
|
|
|
</button>
|
2021-12-17 15:57:11 +01:00
|
|
|
<button
|
2022-06-02 11:34:27 +02:00
|
|
|
bitButton
|
2019-02-18 21:28:23 +01:00
|
|
|
type="button"
|
2022-05-09 14:21:52 +02:00
|
|
|
buttonType="secondary"
|
|
|
|
class="tw-ml-1"
|
2019-02-18 21:28:23 +01:00
|
|
|
(click)="adjustStorage(false)"
|
|
|
|
>
|
|
|
|
{{ "removeStorage" | i18n }}
|
|
|
|
</button>
|
|
|
|
</div>
|
2019-02-21 22:50:37 +01:00
|
|
|
<app-adjust-storage
|
|
|
|
[storageGbPrice]="4"
|
|
|
|
[add]="adjustStorageAdd"
|
|
|
|
(onAdjusted)="closeStorage(true)"
|
|
|
|
(onCanceled)="closeStorage(false)"
|
|
|
|
*ngIf="showAdjustStorage"
|
|
|
|
></app-adjust-storage>
|
2019-02-18 21:28:23 +01:00
|
|
|
</div>
|
|
|
|
</ng-container>
|
|
|
|
</ng-container>
|
|
|
|
</ng-container>
|