From b7bd83cc659d6ebbc57bb9de53ea509abc36f952 Mon Sep 17 00:00:00 2001 From: Kyle Spearrin Date: Fri, 13 Apr 2018 13:18:56 -0400 Subject: [PATCH] premium page --- src/_locales/en/messages.json | 10 +++- src/popup/app-routing.animations.ts | 3 ++ src/popup/app-routing.module.ts | 7 +++ src/popup/app.module.ts | 2 + src/popup/scss/misc.scss | 10 ++++ src/popup/settings/premium.component.html | 58 +++++++++++++++++++++++ src/popup/settings/premium.component.ts | 31 ++++++++++++ 7 files changed, 119 insertions(+), 2 deletions(-) create mode 100644 src/popup/settings/premium.component.html create mode 100644 src/popup/settings/premium.component.ts diff --git a/src/_locales/en/messages.json b/src/_locales/en/messages.json index 9e10c0f282b..417758883fe 100644 --- a/src/_locales/en/messages.json +++ b/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" diff --git a/src/popup/app-routing.animations.ts b/src/popup/app-routing.animations.ts index 855eccba9b3..20db8a92696 100644 --- a/src/popup/app-routing.animations.ts +++ b/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), ]); diff --git a/src/popup/app-routing.module.ts b/src/popup/app-routing.module.ts index ffaf3c607be..f6abfc2eeb4 100644 --- a/src/popup/app-routing.module.ts +++ b/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, diff --git a/src/popup/app.module.ts b/src/popup/app.module.ts index 3bbd4a8653b..86269189370 100644 --- a/src/popup/app.module.ts +++ b/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, diff --git a/src/popup/scss/misc.scss b/src/popup/scss/misc.scss index b2f1c195785..947146a6c81 100644 --- a/src/popup/scss/misc.scss +++ b/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; } diff --git a/src/popup/settings/premium.component.html b/src/popup/settings/premium.component.html new file mode 100644 index 00000000000..e4a83acf289 --- /dev/null +++ b/src/popup/settings/premium.component.html @@ -0,0 +1,58 @@ +
+
+ + + {{'back' | i18n}} + +
+
+ {{'premiumMembership' | i18n}} +
+
+
+ +
+ +

{{'premiumNotCurrentMember' | i18n}}

+

{{'premiumSignUpAndGet' | i18n}}

+
    +
  • + + {{'ppremiumSignUpStorage' | i18n}} +
    • +
  • + + {{'ppremiumSignUpTwoStep' | i18n}} +
    • +
  • + + {{'ppremiumSignUpTotp' | i18n}} +
    • +
  • + + {{'ppremiumSignUpSupport' | i18n}} +
    • +
  • + + {{'ppremiumSignUpFuture' | i18n}} +
    • +
+

{{priceString}}

+ + + + +

{{'premiumCurrentMember' | i18n}}

+

{{'premiumCurrentMemberThanks' | i18n}}

+ + +
+ diff --git a/src/popup/settings/premium.component.ts b/src/popup/settings/premium.component.ts new file mode 100644 index 00000000000..c5cbce75240 --- /dev/null +++ b/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); + } + } +}