premium membership page

src/popup/app/config.js

@@ -198,6 +198,13 @@
                 data: { authorize: true },
                 params: { animation: null }
             })
+            .state('premium', {
+                url: '/premium',
+                templateUrl: 'app/settings/views/settingsPremium.html',
+                controller: 'settingsPremiumController',
+                data: { authorize: true },
+                params: { animation: null }
+            })
 
             .state('folders', {
                 url: '/folders',

src/popup/app/global/home.html

@@ -2,7 +2,7 @@
     <div class="home-page">
         <img src="../../../../images/logo@3x.png" alt="bitwarden" />
         <p>{{i18n.loginOrCreateNewAccount}}</p>
-        <div class="buttons">
+        <div class="bottom-buttons">
             <a class="btn btn-lg btn-primary btn-block" ui-sref="register({animation: 'in-slide-up'})"
                analytics-on="click" analytics-event="Clicked Create Account">
                 <b>{{i18n.createAccount}}</b>

src/popup/app/settings/settingsPremiumController.js

@@ -0,0 +1,50 @@
+angular
+    .module('bit.settings')
+
+    .controller('settingsPremiumController', function ($scope, i18nService, tokenService, apiService, toastr, SweetAlert,
+        $analytics, $timeout) {
+        $scope.i18n = i18nService;
+        $scope.isPremium = tokenService.getPremium();
+        $scope.price = '$10';
+
+        $scope.refresh = function () {
+            apiService.refreshIdentityToken(function () {
+                toastr.success(i18nService.refreshComplete);
+                $timeout(function () {
+                    $scope.isPremium = tokenService.getPremium();
+                });
+            }, function (err) {
+                toastr.error(i18nService.errorsOccurred);
+            });
+        };
+
+        $scope.purchase = function () {
+            SweetAlert.swal({
+                title: i18nService.premiumPurchase,
+                text: i18nService.premiumPurchaseAlert,
+                showCancelButton: true,
+                confirmButtonText: i18nService.yes,
+                cancelButtonText: i18nService.cancel
+            }, function (confirmed) {
+                $analytics.eventTrack('Clicked Purchase Premium');
+                if (confirmed) {
+                    chrome.tabs.create({ url: 'https://vault.bitwarden.com/#/?premium=purchase' });
+                }
+            });
+        };
+
+        $scope.manage = function () {
+            SweetAlert.swal({
+                title: i18nService.premiumManage,
+                text: i18nService.premiumManageAlert,
+                showCancelButton: true,
+                confirmButtonText: i18nService.yes,
+                cancelButtonText: i18nService.cancel
+            }, function (confirmed) {
+                $analytics.eventTrack('Clicked Manage Membership');
+                if (confirmed) {
+                    chrome.tabs.create({ url: 'https://vault.bitwarden.com/#/?premium=manage' });
+                }
+            });
+        };
+    });

src/popup/app/settings/views/settings.html

@@ -38,6 +38,10 @@
                 {{i18n.account}}
             </div>
             <div class="list-section-items">
+                <a class="list-section-item text-primary" ui-sref="premium({animation: 'in-slide-left'})">
+                    <i class="fa fa-star fa-fw"></i> <b>{{i18n.premiumMembership}}</b>
+                    <i class="fa fa-chevron-right fa-lg"></i>
+                </a>
                 <a class="list-section-item" href="" ng-click="changePassword()">
                     {{i18n.changeMasterPassword}}
                     <i class="fa fa-chevron-right fa-lg"></i>

src/popup/app/settings/views/settingsPremium.html

@@ -0,0 +1,54 @@
+<div class="header">
+    <div class="left">
+        <a ui-sref="tabs.settings({animation: 'out-slide-right'})"><i class="fa fa-chevron-left"></i> {{i18n.settings}}</a>
+    </div>
+    <div class="title">{{i18n.premiumMembership}}</div>
+</div>
+<div class="content">
+    <div class="premium-page">
+        <div ng-if="!isPremium">
+            <p class="text-center lead">{{i18n.premiumNotCurrentMember}}</p>
+            <p>{{i18n.premiumSignUpAndGet}}</p>
+            <ul class="fa-ul">
+                <li>
+                    <i class="fa-li fa fa-check text-success"></i>
+                   {{i18n.ppremiumSignUpStorage}}
+                </li>
+                <li>
+                    <i class="fa-li fa fa-check text-success"></i>
+                    {{i18n.ppremiumSignUpTwoStep}}
+                </li>
+                <li>
+                    <i class="fa-li fa fa-check text-success"></i>
+                    T{{i18n.ppremiumSignUpTotp}}
+                </li>
+                <li>
+                    <i class="fa-li fa fa-check text-success"></i>
+                    {{i18n.ppremiumSignUpSupport}}
+                </li>
+                <li>
+                    <i class="fa-li fa fa-check text-success"></i>
+                    {{i18n.ppremiumSignUpFuture}}
+                </li>
+            </ul>
+            <p class="text-center lead">{{i18n.premiumPrice.replace('%price%', price)}}</p>
+            <div class="bottom-buttons">
+                <a class="btn btn-lg btn-primary btn-block" href="#" stop-click ng-click="purchase()">
+                    <b>{{i18n.premiumPurchase}}</b>
+                </a>
+                <a class="btn btn-lg btn-link btn-block" href="#" stop-click ng-click="refresh()">
+                    {{i18n.premiumRefresh}}
+                </a>
+            </div>
+        </div>
+        <div ng-if="isPremium">
+            <p class="text-center lead">{{i18n.premiumCurrentMember}}</p>
+            <p class="text-center">{{i18n.premiumCurrentMemberThanks}}</p>
+            <div class="bottom-buttons">
+                <a class="btn btn-lg btn-primary btn-block" href="#" stop-click ng-click="manage()">
+                    <b>{{i18n.premiumManage}}</b>
+                </a>
+            </div>
+        </div>
+    </div>
+</div>

src/popup/index.html

@@ -84,6 +84,7 @@
     <script src="app/settings/settingsFoldersController.js"></script>
     <script src="app/settings/settingsAddFolderController.js"></script>
     <script src="app/settings/settingsEditFolderController.js"></script>
+    <script src="app/settings/settingsPremiumController.js"></script>
 
     <script src="app/tools/toolsModule.js"></script>
     <script src="app/tools/toolsController.js"></script>

src/popup/less/pages.less

@@ -37,22 +37,6 @@
     p {
         font-size: 18px;
     }
-
-    .buttons {
-        position: absolute;
-        bottom: 0;
-        width: 100%;
-        left: 0;
-        padding: 20px;
-
-        .btn {
-            font-size: @font-size-base;
-        }
-
-        .btn-link {
-            font-weight: 600;
-        }
-    }
 }
 
 .splash-page {
@@ -74,4 +58,36 @@
         margin-left: auto;
         margin-right: auto;
     }
-}
+}
+
+.bottom-buttons {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    left: 0;
+    padding: 20px;
+
+    .btn {
+        font-size: @font-size-base;
+    }
+
+    .btn-link {
+        font-weight: 600;
+    }
+}
+
+.premium-page {
+    padding: 60px 20px 20px;
+    position: relative;
+    height: 100%;
+
+    p.lead {
+        font-weight: normal;
+        font-size: 18px;
+        margin-bottom: 30px;
+    }
+
+    ul {
+        margin-bottom: 30px;
+    }
+}