billing license management when self hosted

src/app/services/apiService.js

@@ -137,6 +137,11 @@
                 url: _apiUri + '/accounts/premium',
                 method: 'POST',
                 headers: { 'Content-Type': undefined }
+            },
+            putLicense: {
+                url: _apiUri + '/accounts/license',
+                method: 'POST',
+                headers: { 'Content-Type': undefined }
             }
         });
 

src/app/settings/settingsBillingController.js

@@ -1,18 +1,25 @@
 angular
     .module('bit.settings')
 
-    .controller('settingsBillingController', function ($scope, apiService, authService, $state, $uibModal, toastr, $analytics) {
+    .controller('settingsBillingController', function ($scope, apiService, authService, $state, $uibModal, toastr, $analytics,
+        appSettings) {
+        $scope.selfHosted = appSettings.selfHosted;
         $scope.charges = [];
         $scope.paymentSource = null;
         $scope.subscription = null;
         $scope.loading = true;
         var license = null;
+        $scope.expiration = null;
 
         $scope.$on('$viewContentLoaded', function () {
             load();
         });
 
         $scope.changePayment = function () {
+            if ($scope.selfHosted) {
+                return;
+            }
+
             var modal = $uibModal.open({
                 animation: true,
                 templateUrl: 'app/settings/views/settingsBillingChangePayment.html',
@@ -30,6 +37,10 @@
         };
 
         $scope.adjustStorage = function (add) {
+            if ($scope.selfHosted) {
+                return;
+            }
+
             var modal = $uibModal.open({
                 animation: true,
                 templateUrl: 'app/settings/views/settingsBillingAdjustStorage.html',
@@ -47,6 +58,10 @@
         };
 
         $scope.cancel = function () {
+            if ($scope.selfHosted) {
+                return;
+            }
+
             if (!confirm('Are you sure you want to cancel? You will lose access to all premium features at the end ' +
                 'of this billing cycle.')) {
                 return;
@@ -61,6 +76,10 @@
         };
 
         $scope.reinstate = function () {
+            if ($scope.selfHosted) {
+                return;
+            }
+
             if (!confirm('Are you sure you want to remove the cancellation request and reinstate your premium membership?')) {
                 return;
             }
@@ -73,7 +92,27 @@
                 });
         };
 
+        $scope.updateLicense = function () {
+            if (!$scope.selfHosted) {
+                return;
+            }
+
+            var modal = $uibModal.open({
+                animation: true,
+                templateUrl: 'app/settings/views/settingsBillingUpdateLicense.html',
+                controller: 'settingsBillingUpdateLicenseController'
+            });
+
+            modal.result.then(function () {
+                load();
+            });
+        };
+
         $scope.license = function () {
+            if ($scope.selfHosted) {
+                return;
+            }
+
             var licenseString = JSON.stringify(license, null, 2);
             var licenseBlob = new Blob([licenseString]);
 
@@ -107,7 +146,7 @@
                 }
 
                 var i = 0;
-
+                $scope.expiration = billing.Expiration;
                 license = billing.License;
 
                 $scope.storage = null;

src/app/settings/settingsBillingUpdateLicenseController.js

@@ -0,0 +1,30 @@
+angular
+    .module('bit.settings')
+
+    .controller('settingsBillingUpdateLicenseController', function ($scope, $state, $uibModalInstance, apiService,
+        $analytics, toastr, validationService) {
+        $analytics.eventTrack('settingsBillingUpdateLicenseController', { category: 'Modal' });
+
+        $scope.submit = function (form) {
+            var fileEl = document.getElementById('file');
+            var files = fileEl.files;
+            if (!files || !files.length) {
+                validationService.addError(form, 'file', 'Select a license file.', true);
+                return;
+            }
+
+            var fd = new FormData();
+            fd.append('license', files[0]);
+
+            $scope.submitPromise = apiService.accounts.putLicense(fd)
+                .$promise.then(function (response) {
+                    $analytics.eventTrack('Updated License');
+                    toastr.success('You have updated your license.');
+                    $uibModalInstance.close();
+                });
+        };
+
+        $scope.close = function () {
+            $uibModalInstance.dismiss('cancel');
+        };
+    });

src/app/settings/views/settingsBilling.html

@@ -21,7 +21,19 @@
             <h3 class="box-title">Premium Membership</h3>
         </div>
         <div class="box-body">
-            <div class="row">
+            <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>
@@ -30,7 +42,7 @@
                             <span ng-if="subscription.markedForCancel">- marked for cancellation</span>
                         </dd>
                         <dt>Next Charge</dt>
-                        <dd>{{nextInvoice ? ((nextInvoice.date | date: format: mediumDate) + ', ' + (nextInvoice.amount | currency:'$')) : '-'}}</dd>
+                        <dd>{{nextInvoice ? ((nextInvoice.date | date: 'mediumDate') + ', ' + (nextInvoice.amount | currency:'$')) : '-'}}</dd>
                     </dl>
                 </div>
                 <div class="col-md-7">
@@ -54,7 +66,8 @@
                 </div>
             </div>
         </div>
-        <div class="box-footer" ng-if="!loading && subscription && (!subscription.cancelled || subscription.markedForCancel)">
+        <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
@@ -68,8 +81,16 @@
                 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">
+    <div class="box box-default" ng-if="storage && !selfHosted">
         <div class="box-header with-border">
             <h3 class="box-title">Storage</h3>
         </div>
@@ -95,7 +116,7 @@
             </button>
         </div>
     </div>
-    <div class="box box-default">
+    <div class="box box-default" ng-if="!selfHosted">
         <div class="box-header with-border">
             <h3 class="box-title">Payment Method</h3>
         </div>
@@ -118,7 +139,7 @@
             </button>
         </div>
     </div>
-    <div class="box box-default">
+    <div class="box box-default" ng-if="!selfHosted">
         <div class="box-header with-border">
             <h3 class="box-title">Charges</h3>
         </div>
@@ -134,7 +155,7 @@
                     <tbody>
                         <tr ng-repeat="charge in charges">
                             <td style="width: 200px">
-                                {{charge.date | date: format: mediumDate}}
+                                {{charge.date | date: 'mediumDate'}}
                             </td>
                             <td style="min-width: 150px">
                                 {{charge.paymentSource}}

src/app/settings/views/settingsBillingUpdateLicense.html

@@ -0,0 +1,30 @@
+<div class="modal-header">
+    <button type="button" class="close" ng-click="close()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+    <h4 class="modal-title">
+        <i class="fa fa-drivers-license"></i>
+        Update License
+    </h4>
+</div>
+<form name="form" ng-submit="form.$valid && submit(form)" api-form="submitPromise">
+    <div class="modal-body">
+        <div class="callout callout-danger validation-errors" ng-show="form.$errors">
+            <h4>Errors have occurred</h4>
+            <ul>
+                <li ng-repeat="e in form.$errors">{{e}}</li>
+            </ul>
+        </div>
+        <div class="form-group" show-error>
+            <label for="file" class="sr-only">License</label>
+            <input type="file" id="file" name="file" accept=".json" />
+            <p class="help-block">
+                Your license file will be named something like <code>bitwarden_premium_license.json</code>
+            </p>
+        </div>
+    </div>
+    <div class="modal-footer">
+        <button type="submit" class="btn btn-primary btn-flat" ng-disabled="form.$loading">
+            <i class="fa fa-refresh fa-spin loading-icon" ng-show="form.$loading"></i>Submit
+        </button>
+        <button type="button" class="btn btn-default btn-flat" ng-click="close()">Close</button>
+    </div>
+</form>

src/index.html

@@ -236,6 +236,7 @@
     <script src="app/settings/settingsBillingChangePaymentController.js"></script>
     <script src="app/settings/settingsUpdateKeyController.js"></script>
     <script src="app/settings/settingsPremiumController.js"></script>
+    <script src="app/settings/settingsBillingUpdateLicenseController.js"></script>
 
     <script src="app/tools/toolsModule.js"></script>
     <script src="app/tools/toolsController.js"></script>