premium required messages

src/app/settings/settingsTwoStepController.js

@@ -2,23 +2,40 @@
     .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) {
-            for (var i = 0; i < response.Data.length; i++) {
-                if (!response.Data[i].Enabled) {
-                    continue;
-                }
+        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;
+                    }
 
-                var provider = $filter('filter')($scope.providers, { type: response.Data[i].Type });
-                if (provider.length) {
-                    provider[0].enabled = true;
+                    var provider = $filter('filter')($scope.providers, { type: response.Data[i].Type });
+                    if (provider.length) {
+                        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">
-                                <img alt="{{::provider.name}}" ng-src="{{'images/two-factor/' + provider.image}}" />
+                                <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>