premium required messages

src/app/constants.js

@@ -77,6 +77,7 @@ angular.module('bit')
                 description: 'Verification codes will be emailed to you.',
                 enabled: false,
                 active: true,
+                free: true,
                 image: 'gmail.png',
                 displayOrder: 4,
                 priority: 0

src/app/global/premiumRequiredController.js

@@ -0,0 +1,17 @@
+angular
+    .module('bit.global')
+
+    .controller('premiumRequiredController', function ($scope, $state, $uibModalInstance, $analytics) {
+        $analytics.eventTrack('premiumRequiredController', { category: 'Modal' });
+
+        $scope.go = function () {
+            $analytics.eventTrack('Get Premium');
+            $state.go('backend.user.settingsPremium').then(function () {
+                $scope.close();
+            });
+        };
+
+        $scope.close = function () {
+            $uibModalInstance.dismiss('close');
+        };
+    });

src/app/settings/settingsTwoStepController.js

@@ -2,10 +2,15 @@
     .module('bit.settings')
 
     .controller('settingsTwoStepController', function ($scope, apiService, toastr, $analytics, constants,
-        $filter, $uibModal) {
+        $filter, $uibModal, authService) {
         $scope.providers = constants.twoFactorProviderInfo;
+        $scope.premium = true;
 
-        apiService.twoFactor.list({}, function (response) {
+        authService.getUserProfile().then(function (profile) {
+            $scope.premium = profile.premium;
+            return apiService.twoFactor.list({}).$promise;
+        }).then(function (response) {
+            if (response.Data) {
                 for (var i = 0; i < response.Data.length; i++) {
                     if (!response.Data[i].Enabled) {
                         continue;
@@ -16,9 +21,21 @@
                         provider[0].enabled = true;
                     }
                 }
+            }
+
+            return;
         });
 
         $scope.edit = function (provider) {
+            if (!$scope.premium && !provider.free) {
+                $uibModal.open({
+                    animation: true,
+                    templateUrl: 'app/views/premiumRequired.html',
+                    controller: 'premiumRequiredController'
+                });
+                return;
+            }
+
             if (provider.type === constants.twoFactorProvider.authenticator) {
                 typeName = 'Authenticator';
             }

src/app/settings/views/settingsPremium.html

@@ -11,7 +11,7 @@
                         <ul class="fa-ul">
                             <li>
                                 <i class="fa-li fa fa-check text-green"></i>
-                                1 GB of encrypted file storage
+                                1 GB of encrypted file storage.
                             </li>
                             <li>
                                 <i class="fa-li fa fa-check text-green"></i>

src/app/settings/views/settingsTwoStep.html

@@ -25,14 +25,17 @@
                     <tbody>
                         <tr ng-repeat="provider in providers | orderBy: 'displayOrder'">
                             <td style="width: 120px; height: 75px;" align="center">
+                                <a href="#" stop-click ng-click="edit(provider)">
                                     <img alt="{{::provider.name}}" ng-src="{{'images/two-factor/' + provider.image}}" />
+                                </a>
                             </td>
                             <td>
                                 <a href="#" stop-click ng-click="edit(provider)">{{::provider.name}}</a>
+                                <span class="label label-info" ng-if="!premium && !provider.free">PREMIUM</span>
                                 <div class="text-muted text-sm">{{::provider.description}}</div>
                             </td>
                             <td style="width: 100px;" class="text-right">
-                                <span class="label"
+                                <span class="label label-full"
                                       ng-class="{ 'label-success': provider.enabled, 'label-default': !provider.enabled }">
                                     {{provider.enabled ? 'Enabled' : 'Disabled'}}
                                 </span>

src/app/vault/vaultController.js

@@ -200,6 +200,18 @@
         };
 
         $scope.attachments = function (login) {
+            authService.getUserProfile().then(function (profile) {
+                return profile.premium;
+            }).then(function (isPremium) {
+                if (!isPremium) {
+                    $uibModal.open({
+                        animation: true,
+                        templateUrl: 'app/views/premiumRequired.html',
+                        controller: 'premiumRequiredController'
+                    });
+                    return;
+                }
+
                 if (!cryptoService.getEncKey()) {
                     toastr.error('You cannot use this feature until you update your encryption key.', 'Feature Unavailable');
                     return;
@@ -217,6 +229,7 @@
                 addModel.result.then(function (data) {
 
                 });
+            });
         };
 
         $scope.editFolder = function (folder) {

src/app/views/premiumRequired.html

@@ -0,0 +1,36 @@
+<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-star"></i> Premium <span class="hidden-xs">Membership</span> Required</h4>
+</div>
+<div class="modal-body">
+    <p>This features requires a premium membership. Sign up for premium and get:</p>
+    <ul class="fa-ul">
+        <li>
+            <i class="fa-li fa fa-check text-green"></i>
+            1 GB of encrypted file storage.
+        </li>
+        <li>
+            <i class="fa-li fa fa-check text-green"></i>
+            Additional two-step login options such as YubiKey, FIDO U2F, and Duo.
+        </li>
+        <li>
+            <i class="fa-li fa fa-check text-green"></i>
+            TOTP verification code (2FA) generator for logins in your vault.
+        </li>
+        <li>
+            <i class="fa-li fa fa-check text-green"></i>
+            Priority customer support.
+        </li>
+        <li>
+            <i class="fa-li fa fa-check text-green"></i>
+            All future premium features. More coming soon!
+        </li>
+    </ul>
+    All for just <b>{{10 | currency:"$":0}}</b> /year.
+</div>
+<div class="modal-footer">
+    <button type="submit" class="btn btn-primary btn-flat" ng-click="go()">
+        Get Premium
+    </button>
+    <button type="button" class="btn btn-default btn-flat" ng-click="close()">Close</button>
+</div>

src/index.html

@@ -143,6 +143,7 @@
     <script src="app/global/topNavController.js"></script>
     <script src="app/global/sideNavController.js"></script>
     <script src="app/global/appsController.js"></script>
+    <script src="app/global/premiumRequiredController.js"></script>
 
     <script src="app/accounts/accountsModule.js"></script>
     <script src="app/accounts/accountsLoginController.js"></script>

src/less/vault.less

@@ -261,6 +261,7 @@ form .btn .loading-icon {
 }
 
 /* Forms */
+
 .form-control {
     border-radius: 0 !important;
 }
@@ -353,11 +354,6 @@ form .btn .loading-icon {
     vertical-align: middle !important;
 }
 
-.table td .label {
-    font-size: 85%;
-    font-weight: normal;
-}
-
 .box-header.with-border + .box-body .table > tbody > tr:first-child > td {
     border-top: 0;
 }
@@ -623,3 +619,8 @@ h1, h2, h3, h4, h5, h6 {
         border: none;
     }
 }
+
+.label-full {
+    font-size: 85%;
+    font-weight: normal;
+}