premium membership component

src/app/accounts/premium.component.html

@@ -0,0 +1,62 @@
+<div class="modal fade">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-body">
+                <div class="box">
+                    <div class="box-header">
+                        {{'premiumMembership' | i18n}}
+                    </div>
+                    <div class="box-content box-content-padded">
+                        <div *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>
+                                    {{'premiumSignUpStorage' | i18n}}
+                                </li>
+                                <li>
+                                    <i class="fa-li fa fa-check text-success"></i>
+                                    {{'premiumSignUpTwoStep' | i18n}}
+                                </li>
+                                <li>
+                                    <i class="fa-li fa fa-check text-success"></i>
+                                    {{'premiumSignUpTotp' | i18n}}
+                                </li>
+                                <li>
+                                    <i class="fa-li fa fa-check text-success"></i>
+                                    {{'premiumSignUpSupport' | i18n}}
+                                </li>
+                                <li>
+                                    <i class="fa-li fa fa-check text-success"></i>
+                                    {{'premiumSignUpFuture' | i18n}}
+                                </li>
+                            </ul>
+                            <p class="text-center lead no-margin">{{'premiumPrice' | i18n : price}}</p>
+                        </div>
+                        <div *ngIf="isPremium">
+                            <p class="text-center lead">{{'premiumCurrentMember' | i18n}}</p>
+                            <p class="text-center">{{'premiumCurrentMemberThanks' | i18n}}</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="primary" appBlurClick (click)="manage()" *ngIf="isPremium">
+                    <b>{{'premiumManage' | i18n}}</b>
+                </button>
+                <button type="button" class="primary" appBlurClick (click)="purchase()" *ngIf="!isPremium">
+                    <b>{{'premiumPurchase' | i18n}}</b>
+                </button>
+                <button type="button" data-dismiss="modal">{{'close' | i18n}}</button>
+                <div class="right" *ngIf="!isPremium">
+                    <button #refreshBtn type="button" appBlurClick (click)="refresh()" [disabled]="refreshBtn.loading"
+                            title="{{'premiumRefresh' | i18n}}" [appApiAction]="refreshPromise">
+                        <i class="fa fa-refresh fa-lg fa-fw" [hidden]="refreshBtn.loading"></i>
+                        <i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!refreshBtn.loading"></i>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

src/app/accounts/premium.component.ts

@@ -0,0 +1,59 @@
+import * as template from './premium.component.html';
+
+import {
+    Component,
+    OnInit,
+} 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';
+
+@Component({
+    selector: 'app-premium',
+    template: template,
+})
+export class PremiumComponent implements OnInit {
+    isPremium: boolean = false;
+    price: string = '$10';
+    refreshPromise: Promise<any>;
+
+    constructor(private analytics: Angulartics2, private toasterService: ToasterService,
+        private i18nService: I18nService, private platformUtilsService: PlatformUtilsService,
+        private tokenService: TokenService, private apiService: ApiService) { }
+
+    async ngOnInit() {
+        this.isPremium = !this.tokenService.getPremium();
+    }
+
+    async refresh() {
+        try {
+            this.refreshPromise = this.apiService.refreshIdentityToken();
+            await this.refreshPromise;
+            this.toasterService.popAsync('success', null, this.i18nService.t('refreshComplete'));
+            this.isPremium = this.tokenService.getPremium();
+        } catch { }
+    }
+
+    async purchase() {
+        const confirmed = await this.platformUtilsService.showDialog(this.i18nService.t('premiumPurchaseAlert'),
+            this.i18nService.t('premiumPurchase'), this.i18nService.t('yes'), this.i18nService.t('cancel'));
+        if (confirmed) {
+            this.analytics.eventTrack.next({ action: 'Clicked Purchase Premium' });
+            this.platformUtilsService.launchUri('https://vault.bitwarden.com/#/?premium=purchase');
+        }
+    }
+
+    async manage() {
+        const confirmed = await this.platformUtilsService.showDialog(this.i18nService.t('premiumManageAlert'),
+            this.i18nService.t('premiumManage'), this.i18nService.t('yes'), this.i18nService.t('cancel'));
+        if (confirmed) {
+            this.analytics.eventTrack.next({ action: 'Clicked Manage Membership' });
+            this.platformUtilsService.launchUri('https://vault.bitwarden.com/#/?premium=manage');
+        }
+    }
+}

src/app/app.component.ts

@@ -17,6 +17,7 @@ import { Router } from '@angular/router';
 
 import { ModalComponent } from './modal.component';
 
+import { PremiumComponent } from './accounts/premium.component';
 import { SettingsComponent } from './accounts/settings.component';
 
 import { ToasterService } from 'angular2-toaster';
@@ -49,10 +50,12 @@ const BroadcasterSubscriptionId = 'AppComponent';
     template: `
         <toaster-container [toasterconfig]="toasterConfig"></toaster-container>
         <ng-template #settings></ng-template>
+        <ng-template #premium></ng-template>
         <router-outlet></router-outlet>`,
 })
 export class AppComponent implements OnInit {
     @ViewChild('settings', { read: ViewContainerRef }) settingsRef: ViewContainerRef;
+    @ViewChild('premium', { read: ViewContainerRef }) premiumRef: ViewContainerRef;
 
     toasterConfig: ToasterConfig = new ToasterConfig({
         showCloseButton: true,
@@ -113,6 +116,9 @@ export class AppComponent implements OnInit {
                     case 'openSettings':
                         this.openSettings();
                         break;
+                    case 'openPremium':
+                        this.openPremium();
+                        break;
                     default:
                 }
             });
@@ -177,4 +183,18 @@ export class AppComponent implements OnInit {
             this.modal = null;
         });
     }
+
+    private openPremium() {
+        if (this.modal != null) {
+            this.modal.close();
+        }
+
+        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+        this.modal = this.premiumRef.createComponent(factory).instance;
+        const childComponent = this.modal.show<PremiumComponent>(PremiumComponent, this.premiumRef);
+
+        this.modal.onClosed.subscribe(() => {
+            this.modal = null;
+        });
+    }
 }

src/app/app.module.ts

@@ -20,6 +20,7 @@ import { EnvironmentComponent } from './accounts/environment.component';
 import { HintComponent } from './accounts/hint.component';
 import { LockComponent } from './accounts/lock.component';
 import { LoginComponent } from './accounts/login.component';
+import { PremiumComponent } from './accounts/premium.component';
 import { RegisterComponent } from './accounts/register.component';
 import { SettingsComponent } from './accounts/settings.component';
 import { TwoFactorOptionsComponent } from './accounts/two-factor-options.component';
@@ -80,6 +81,7 @@ import { ViewComponent } from './vault/view.component';
         LoginComponent,
         ModalComponent,
         PasswordGeneratorComponent,
+        PremiumComponent,
         RegisterComponent,
         SearchCiphersPipe,
         SettingsComponent,
@@ -96,6 +98,7 @@ import { ViewComponent } from './vault/view.component';
         FolderAddEditComponent,
         ModalComponent,
         PasswordGeneratorComponent,
+        PremiumComponent,
         SettingsComponent,
         TwoFactorOptionsComponent,
     ],