UI adjustments for premium adverts

src/app/directives/passwordMeterDirective.js

@@ -3,15 +3,14 @@ angular
 
     .directive('passwordMeter', function () {
         return {
-            template: '<div class="progress {{outerClass}}" style="{{outerStyle}}"><div class="progress-bar progress-bar-{{valueClass}}" ' +
+            template: '<div class="progress {{outerClass}}"><div class="progress-bar progress-bar-{{valueClass}}" ' +
                 'role="progressbar" aria-valuenow="{{value}}" aria-valuemin="0" aria-valuemax="100" ' +
                 'ng-style="{width : ( value + \'%\' ) }"><span class="sr-only">{{value}}%</span></div></div>',
             restrict: 'A',
             scope: {
                 password: '=passwordMeter',
                 username: '=passwordMeterUsername',
-                outerClass: '@?',
+                outerClass: '@?'
-                outerStyle: '@?'
             },
             link: function (scope) {
                 var measureStrength = function (username, password) {

src/app/global/premiumRequiredController.js

@@ -1,7 +1,7 @@
 angular
     .module('bit.global')
 
-    .controller('premiumRequiredController', function ($scope, $state, $uibModalInstance, $analytics) {
+    .controller('premiumRequiredController', function ($scope, $state, $uibModalInstance, $analytics, $uibModalStack) {
         $analytics.eventTrack('premiumRequiredController', { category: 'Modal' });
 
         $scope.go = function () {
@@ -12,6 +12,6 @@ angular
         };
 
         $scope.close = function () {
-            $uibModalInstance.dismiss('close');
+            $uibModalStack.dismissAll();
         };
     });

src/app/settings/views/settingsTwoStep.html

@@ -30,8 +30,11 @@
                                 </a>
                             </td>
                             <td>
-                                <a href="#" stop-click ng-click="edit(provider)">{{::provider.name}}</a>
+                                <a href="#" stop-click ng-click="edit(provider)">
-                                <span class="label label-info" ng-if="!premium && !provider.free">PREMIUM</span>
+                                    {{::provider.name}}
+                                    <span class="label label-info" ng-if="!premium && !provider.free"
+                                          style="margin-left: 5px;">PREMIUM</span>
+                                </a>
                                 <div class="text-muted text-sm">{{::provider.description}}</div>
                             </td>
                             <td style="width: 100px;" class="text-right">

src/app/vault/vaultAddLoginController.js

@@ -2,7 +2,7 @@
     .module('bit.vault')
 
     .controller('vaultAddLoginController', function ($scope, apiService, $uibModalInstance, cryptoService, cipherService,
-        passwordService, selectedFolder, $analytics, checkedFavorite, $rootScope, authService) {
+        passwordService, selectedFolder, $analytics, checkedFavorite, $rootScope, authService, $uibModal) {
         $analytics.eventTrack('vaultAddLoginController', { category: 'Modal' });
         $scope.folders = $rootScope.vaultFolders;
         $scope.login = {
@@ -61,4 +61,12 @@
         $scope.close = function () {
             $uibModalInstance.dismiss('close');
         };
+
+        $scope.showPremium = function () {
+            $uibModal.open({
+                animation: true,
+                templateUrl: 'app/views/premiumRequired.html',
+                controller: 'premiumRequiredController'
+            });
+        };
     });

src/app/vault/vaultEditLoginController.js

@@ -2,7 +2,7 @@
     .module('bit.vault')
 
     .controller('vaultEditLoginController', function ($scope, apiService, $uibModalInstance, cryptoService, cipherService,
-        passwordService, loginId, $analytics, $rootScope, authService) {
+        passwordService, loginId, $analytics, $rootScope, authService, $uibModal) {
         $analytics.eventTrack('vaultEditLoginController', { category: 'Modal' });
         $scope.folders = $rootScope.vaultFolders;
         $scope.login = {};
@@ -98,4 +98,12 @@
         $scope.close = function () {
             $uibModalInstance.dismiss('cancel');
         };
+
+        $scope.showPremium = function () {
+            $uibModal.open({
+                animation: true,
+                templateUrl: 'app/views/premiumRequired.html',
+                controller: 'premiumRequiredController'
+            });
+        };
     });

src/app/vault/views/vaultAddLogin.html

@@ -76,7 +76,7 @@
                     </div>
                 </div>
                 <div password-meter="login.password" password-meter-username="login.username"
-                     outer-class="xs" outer-style="margin: 0;"></div>
+                     outer-class="xs" class="password-meter"></div>
             </div>
         </div>
         <div class="row">
@@ -87,9 +87,12 @@
                            ng-readonly="readOnly" api-field />
                 </div>
             </div>
-            <div class="col-md-6">
+            <div class="col-md-6 totp-col">
-                <label class="invisible hidden-sm" for="verification-code">Verification Code</label>
                 <div totp="login.totp" id="verification-code" ng-if="premium"></div>
+                <div ng-if="!premium">
+                    <a href="#" stop-click ng-click="showPremium()"><img src="images/totp-countdown.png" alt="" /></a>
+                    <span class="label label-info clickable" ng-click="showPremium()">PREMIUM</span>
+                </div>
             </div>
         </div>
         <div class="form-group" show-errors>

src/app/vault/views/vaultEditLogin.html

@@ -88,7 +88,7 @@
                     </div>
                 </div>
                 <div password-meter="login.password" password-meter-username="login.username"
-                     outer-class="xs" outer-style="margin: 0;"></div>
+                     outer-class="xs" class="password-meter"></div>
             </div>
         </div>
         <div class="row">
@@ -99,9 +99,12 @@
                            ng-readonly="readOnly" api-field />
                 </div>
             </div>
-            <div class="col-md-6">
+            <div class="col-md-6 totp-col">
-                <label class="invisible hidden-sm hidden-xs" for="verification-code">Verification Code</label>
                 <div totp="login.totp" id="verification-code" ng-if="premium"></div>
+                <div ng-if="!premium">
+                    <a href="#" stop-click ng-click="showPremium()"><img src="images/totp-countdown.png" alt="" /></a>
+                    <span class="label label-info clickable" ng-click="showPremium()">PREMIUM</span>
+                </div>
             </div>
         </div>
         <div class="form-group" show-errors>

src/less/vault.less

@@ -620,14 +620,29 @@ h1, h2, h3, h4, h5, h6 {
     }
 }
 
+.clickable {
+    cursor: pointer;
+}
+
 .label-full {
     font-size: 85%;
     font-weight: normal;
 }
 
-.totp {
+.totp-col {
-    margin-bottom: 10px;
+    margin: -10px 0 10px 0;
 
+    @media (min-width: @screen-md) {
+        padding-top: 26px;
+        margin: 0;
+    }
+
+    img {
+        margin-right: 10px;
+    }
+}
+
+.totp {
     .totp-code {
         font-family: @font-family-monospace;
         font-size: 1.2em;
@@ -681,3 +696,15 @@ h1, h2, h3, h4, h5, h6 {
         }
     }
 }
+
+.password-meter {
+    .progress {
+        margin-bottom: 10px;
+    }
+
+    @media (min-width: @screen-md) {
+        .progress {
+            margin-bottom: 0;
+        }
+    }
+}