Spiegel von
https://github.com/dani-garcia/vaultwarden.git
synchronisiert 2024-08-20 02:45:25 +02:00
178 Zeilen
7,8 KiB
HTML
178 Zeilen
7,8 KiB
HTML
<section class="content-header">
|
|
<h1>Billing <small>manage your membership</small></h1>
|
|
</section>
|
|
<section class="content">
|
|
<div class="callout callout-warning" ng-if="subscription && subscription.cancelled">
|
|
<h4><i class="fa fa-warning"></i> Canceled</h4>
|
|
The premium membership subscription has been canceled.
|
|
</div>
|
|
<div class="callout callout-warning" ng-if="subscription && subscription.markedForCancel">
|
|
<h4><i class="fa fa-warning"></i> Pending Cancellation</h4>
|
|
<p>
|
|
The premium membership has been marked for cancellation at the end of the
|
|
current billing period.
|
|
</p>
|
|
<button type="button" class="btn btn-default btn-flat" ng-click="reinstate()">
|
|
Reinstate
|
|
</button>
|
|
</div>
|
|
<div class="box box-default">
|
|
<div class="box-header with-border">
|
|
<h3 class="box-title">Premium Membership</h3>
|
|
</div>
|
|
<div class="box-body">
|
|
<dl ng-if="selfHosted">
|
|
<dt>Expiration</dt>
|
|
<dd ng-if="loading">
|
|
Loading...
|
|
</dd>
|
|
<dd ng-if="!loading && expiration">
|
|
{{expiration | date: 'medium'}}
|
|
</dd>
|
|
<dd ng-if="!loading && !expiration">
|
|
Never expires
|
|
</dd>
|
|
</dl>
|
|
<div class="row" ng-if="!selfHosted">
|
|
<div class="col-md-5">
|
|
<dl>
|
|
<dt>Status</dt>
|
|
<dd>
|
|
<span style="text-transform: capitalize;">{{(subscription && subscription.status) || '-'}}</span>
|
|
<span ng-if="subscription.markedForCancel">- marked for cancellation</span>
|
|
</dd>
|
|
<dt>Next Charge</dt>
|
|
<dd>{{nextInvoice ? ((nextInvoice.date | date: 'mediumDate') + ', ' + (nextInvoice.amount | currency:'$')) : '-'}}</dd>
|
|
</dl>
|
|
</div>
|
|
<div class="col-md-7">
|
|
<strong>Details</strong>
|
|
<div ng-show="loading">
|
|
Loading...
|
|
</div>
|
|
<div class="table-responsive" style="margin: 0;" ng-show="!loading">
|
|
<table class="table" style="margin: 0;">
|
|
<tbody>
|
|
<tr ng-repeat="item in subscription.items">
|
|
<td>
|
|
{{item.name}} {{item.qty > 1 ? '×' + item.qty : ''}}
|
|
@ {{item.amount | currency:'$'}}
|
|
</td>
|
|
<td class="text-right">{{(item.qty * item.amount) | currency:'$'}} /{{item.interval}}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="box-footer" ng-if="!selfHosted && !loading && subscription &&
|
|
(!subscription.cancelled || subscription.markedForCancel)">
|
|
<button type="button" class="btn btn-default btn-flat" ng-click="cancel()"
|
|
ng-if="!subscription.cancelled && !subscription.markedForCancel">
|
|
Cancel
|
|
</button>
|
|
<button type="button" class="btn btn-default btn-flat" ng-click="reinstate()"
|
|
ng-if="subscription.markedForCancel">
|
|
Reinstate
|
|
</button>
|
|
<button type="button" class="btn btn-default btn-flat" ng-click="license()"
|
|
ng-if="!subscription.cancelled">
|
|
Download License
|
|
</button>
|
|
</div>
|
|
<div class="box-footer" ng-if="selfHosted">
|
|
<button type="button" class="btn btn-default btn-flat" ng-click="updateLicense()">
|
|
Update License
|
|
</button>
|
|
<a href="https://vault.bitwarden.com" class="btn btn-default btn-flat" target="_blank">
|
|
Manage Membership
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="box box-default" ng-if="storage && !selfHosted">
|
|
<div class="box-header with-border">
|
|
<h3 class="box-title">Storage</h3>
|
|
</div>
|
|
<div class="box-body">
|
|
<p>
|
|
Your membership has a total of {{storage.maxGb}} GB of encrypted file storage.
|
|
You are currently using {{storage.currentName}}.
|
|
</p>
|
|
<div class="progress" style="margin: 0;">
|
|
<div class="progress-bar progress-bar-info" role="progressbar"
|
|
aria-valuenow="{{storage.percentage}}" aria-valuemin="0" aria-valuemax="1"
|
|
style="min-width: 50px; width: {{storage.percentage}}%;">
|
|
{{storage.percentage}}%
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="box-footer" ng-if="subscription && paymentSource && !subscription.cancelled">
|
|
<button type="button" class="btn btn-default btn-flat" ng-click="adjustStorage(true)">
|
|
Add Storage
|
|
</button>
|
|
<button type="button" class="btn btn-default btn-flat" ng-click="adjustStorage(false)">
|
|
Remove Storage
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="box box-default" ng-if="!selfHosted">
|
|
<div class="box-header with-border">
|
|
<h3 class="box-title">Payment Method</h3>
|
|
</div>
|
|
<div class="box-body">
|
|
<div ng-show="loading">
|
|
Loading...
|
|
</div>
|
|
<div ng-show="!loading && !paymentSource">
|
|
<i class="fa fa-credit-card"></i> No payment method on file.
|
|
</div>
|
|
<div ng-show="!loading && paymentSource">
|
|
<i class="fa" ng-class="{'fa-credit-card': paymentSource.type === 0,
|
|
'fa-university': paymentSource.type === 1, 'fa-paypal fa-fw text-blue': paymentSource.type === 2}"></i>
|
|
{{paymentSource.description}}
|
|
</div>
|
|
</div>
|
|
<div class="box-footer">
|
|
<button type="button" class="btn btn-default btn-flat" ng-click="changePayment()">
|
|
{{ paymentSource ? 'Change Payment Method' : 'Add Payment Method' }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="box box-default" ng-if="!selfHosted">
|
|
<div class="box-header with-border">
|
|
<h3 class="box-title">Charges</h3>
|
|
</div>
|
|
<div class="box-body">
|
|
<div ng-show="loading">
|
|
Loading...
|
|
</div>
|
|
<div ng-show="!loading && !charges.length">
|
|
No charges.
|
|
</div>
|
|
<div class="table-responsive" ng-show="charges.length">
|
|
<table class="table">
|
|
<tbody>
|
|
<tr ng-repeat="charge in charges">
|
|
<td style="width: 200px">
|
|
{{charge.date | date: 'mediumDate'}}
|
|
</td>
|
|
<td style="min-width: 150px">
|
|
{{charge.paymentSource}}
|
|
</td>
|
|
<td style="width: 150px; text-transform: capitalize;">
|
|
{{charge.status}}
|
|
</td>
|
|
<td class="text-right" style="width: 150px;">
|
|
{{charge.amount | currency:'$'}}
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="box-footer">
|
|
Note: Any charges will appear on your statement as <b>BITWARDEN</b>.
|
|
</div>
|
|
</div>
|
|
</section>
|