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');
+        }
+    }
+}