premium page

src/_locales/en/messages.json

@@ -333,7 +333,7 @@
     "message": "On System Lock"
   },
   "onRestart": {
-    "message": "On Restart"
+    "message": "On System Restart"
   },
   "never": {
     "message": "Never"
@@ -633,7 +633,13 @@
     "message": "Thank you for supporting Bitwarden."
   },
   "premiumPrice": {
-    "message": "All for just %price% /year!"
+    "message": "All for just $PRICE$ /year!",
+    "placeholders": {
+      "price": {
+        "content": "$1",
+        "example": "$10"
+      }
+    }
   },
   "refreshComplete": {
     "message": "Refresh complete"

src/popup/app-routing.animations.ts

@@ -139,4 +139,7 @@ export const routerTransition = trigger('routerTransition', [
 
     transition('tabs => sync', inSlideLeft),
     transition('sync => tabs', outSlideRight),
+
+    transition('tabs => premium', inSlideLeft),
+    transition('premium => tabs', outSlideRight),
 ]);

src/popup/app-routing.module.ts

@@ -21,6 +21,7 @@ import { PasswordGeneratorComponent } from './generator/password-generator.compo
 import { ExportComponent } from './settings/export.component';
 import { FolderAddEditComponent } from './settings/folder-add-edit.component';
 import { FoldersComponent } from './settings/folders.component';
+import { PremiumComponent } from './settings/premium.component';
 import { SettingsComponent } from './settings/settings.component';
 import { SyncComponent } from './settings/sync.component';
 import { TabsComponent } from './tabs.component';
@@ -161,6 +162,12 @@ const routes: Routes = [
         canActivate: [AuthGuardService],
         data: { state: 'sync' },
     },
+    {
+        path: 'premium',
+        component: PremiumComponent,
+        canActivate: [AuthGuardService],
+        data: { state: 'premium' },
+    },
     {
         path: 'tabs',
         component: TabsComponent,

src/popup/app.module.ts

@@ -29,6 +29,7 @@ import { PasswordGeneratorComponent } from './generator/password-generator.compo
 import { ExportComponent } from './settings/export.component';
 import { FolderAddEditComponent } from './settings/folder-add-edit.component';
 import { FoldersComponent } from './settings/folders.component';
+import { PremiumComponent } from './settings/premium.component';
 import { SettingsComponent } from './settings/settings.component';
 import { SyncComponent } from './settings/sync.component';
 import { TabsComponent } from './tabs.component';
@@ -98,6 +99,7 @@ import { IconComponent } from 'jslib/angular/components/icon.component';
         PasswordGeneratorComponent,
         PasswordGeneratorHistoryComponent,
         PopOutComponent,
+        PremiumComponent,
         RegisterComponent,
         SearchCiphersPipe,
         SettingsComponent,

src/popup/scss/misc.scss

@@ -40,10 +40,20 @@ small, .small {
     text-align: center;
 }
 
+p.lead {
+    font-size: $font-size-large;
+    margin-bottom: 20px;
+    font-weight: normal;
+}
+
 .flex-right {
     margin-left: auto;
 }
 
+.flex-bottom {
+    margin-top: auto;
+}
+
 .no-margin {
     margin: 0 !important;
 }

src/popup/settings/premium.component.html

@@ -0,0 +1,58 @@
+<header>
+    <div class="left">
+        <a routerLink="/tabs/settings">
+            <span class="header-icon"><i class="fa fa-chevron-left"></i></span>
+            <span>{{'back' | i18n}}</span>
+        </a>
+    </div>
+    <div class="center">
+        <span class="title">{{'premiumMembership' | i18n}}</span>
+    </div>
+    <div class="right"></div>
+</header>
+<content>
+    <div class="content">
+        <ng-container *ngIf="!isPremium">
+            <p class="text-center lead">{{'premiumNotCurrentMember' | i18n}}</p>
+            <p>{{'premiumSignUpAndGet' | i18n}}</p>
+            <ul class="fa-ul">
+                <li>
+                    <i class="fa-li fa fa-check text-success"></i>
+                    {{'ppremiumSignUpStorage' | i18n}}
+                </li>
+                <li>
+                    <i class="fa-li fa fa-check text-success"></i>
+                    {{'ppremiumSignUpTwoStep' | i18n}}
+                </li>
+                <li>
+                    <i class="fa-li fa fa-check text-success"></i>
+                    {{'ppremiumSignUpTotp' | i18n}}
+                </li>
+                <li>
+                    <i class="fa-li fa fa-check text-success"></i>
+                    {{'ppremiumSignUpSupport' | i18n}}
+                </li>
+                <li>
+                    <i class="fa-li fa fa-check text-success"></i>
+                    {{'ppremiumSignUpFuture' | i18n}}
+                </li>
+            </ul>
+            <p class="text-center lead">{{priceString}}</p>
+            <button type="button" class="btn primary block" appBlurClick (click)="purchase()">
+                <b>{{'premiumPurchase' | i18n}}</b>
+            </button>
+            <button #refreshBtn type="button" appBlurClick (click)="refresh()" [disabled]="refreshBtn.loading"
+                    [appApiAction]="refreshPromise" class="btn link block">
+                <span [hidden]="refreshBtn.loading">{{'premiumRefresh' | i18n}}</span>
+                <i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!refreshBtn.loading"></i>
+            </button>
+        </ng-container>
+        <ng-container *ngIf="isPremium">
+            <p class="text-center lead">{{'premiumCurrentMember' | i18n}}</p>
+            <p class="text-center">{{'premiumCurrentMemberThanks' | i18n}}</p>
+            <button type="button" class="btn block primary" appBlurClick (click)="manage()">
+                <b>{{'premiumManage' | i18n}}</b>
+            </button>
+        </ng-container>
+    </div>
+</content>

src/popup/settings/premium.component.ts

@@ -0,0 +1,31 @@
+import { Component } from '@angular/core';
+
+import { ToasterService } from 'angular2-toaster';
+import { Angulartics2 } from 'angulartics2';
+
+import { ApiService } from 'jslib/abstractions/api.service';
+import { I18nService } from 'jslib/abstractions/i18n.service';
+import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
+import { TokenService } from 'jslib/abstractions/token.service';
+
+import { PremiumComponent as BasePremiumComponent } from 'jslib/angular/components/premium.component';
+
+@Component({
+    selector: 'app-premium',
+    templateUrl: 'premium.component.html',
+})
+export class PremiumComponent extends BasePremiumComponent {
+    priceString: string;
+
+    constructor(analytics: Angulartics2, toasterService: ToasterService,
+        i18nService: I18nService, platformUtilsService: PlatformUtilsService,
+        tokenService: TokenService, apiService: ApiService) {
+        super(analytics, toasterService, i18nService, platformUtilsService, tokenService, apiService);
+
+        // Support old price string. Can be removed in future once all translations are properly updated.
+        this.priceString = i18nService.t('premiumPrice', this.price);
+        if (this.priceString.indexOf('%price%') > -1) {
+            this.priceString = this.priceString.replace('%price%', this.price);
+        }
+    }
+}