stub out billing component

src/app/app-routing.module.ts

@@ -19,6 +19,7 @@ import { DomainRulesComponent } from './settings/domain-rules.component';
 import { OptionsComponent } from './settings/options.component';
 import { SettingsComponent } from './settings/settings.component';
 import { TwoFactorSetupComponent } from './settings/two-factor-setup.component';
+import { UserBillingComponent } from './settings/user-billing.component';
 
 import { BreachReportComponent } from './tools/breach-report.component';
 import { ExportComponent } from './tools/export.component';
@@ -58,6 +59,7 @@ const routes: Routes = [
                     { path: 'options', component: OptionsComponent, canActivate: [AuthGuardService] },
                     { path: 'domain-rules', component: DomainRulesComponent, canActivate: [AuthGuardService] },
                     { path: 'two-factor', component: TwoFactorSetupComponent, canActivate: [AuthGuardService] },
+                    { path: 'billing', component: UserBillingComponent, canActivate: [AuthGuardService] },
                 ],
             },
             {

src/app/app.module.ts

@@ -50,6 +50,7 @@ import { TwoFactorSetupComponent } from './settings/two-factor-setup.component';
 import { TwoFactorU2fComponent } from './settings/two-factor-u2f.component';
 import { TwoFactorVerifyComponent } from './settings/two-factor-verify.component';
 import { TwoFactorYubiKeyComponent } from './settings/two-factor-yubikey.component';
+import { UserBillingComponent } from './settings/user-billing.component';
 
 import { BreachReportComponent } from './tools/breach-report.component';
 import { ExportComponent } from './tools/export.component';
@@ -162,6 +163,7 @@ import { SearchCiphersPipe } from 'jslib/angular/pipes/search-ciphers.pipe';
         TwoFactorU2fComponent,
         TwoFactorVerifyComponent,
         TwoFactorYubiKeyComponent,
+        UserBillingComponent,
         UserLayoutComponent,
         VaultComponent,
     ],

src/app/settings/settings.component.html

@@ -14,7 +14,7 @@
                         Organizations
                     </a>
                     <a routerLink="billing" class="list-group-item" routerLinkActive="active">
-                        Billing &amp; Licensing
+                        {{'billingAndLicensing' | i18n}}
                     </a>
                     <a routerLink="two-factor" class="list-group-item" routerLinkActive="active">
                         {{'twoStepLogin' | i18n}}

src/app/settings/user-billing.component.html

@@ -0,0 +1,3 @@
+<div class="page-header">
+    <h1>{{'billingAndLicensing' | i18n}}</h1>
+</div>

src/app/settings/user-billing.component.ts

@@ -0,0 +1,20 @@
+import {
+    Component,
+    OnInit,
+} from '@angular/core';
+
+import { TokenService } from 'jslib/abstractions/token.service';
+
+@Component({
+    selector: 'app-user-billing',
+    templateUrl: 'user-billing.component.html',
+})
+export class UserBillingComponent implements OnInit {
+    premium = false;
+
+    constructor(private tokenService: TokenService) { }
+
+    async ngOnInit() {
+        this.premium = this.tokenService.getPremium();
+    }
+}

src/locales/en/messages.json

@@ -1188,5 +1188,8 @@
   },
   "reportError": {
     "message": "An error occurred trying to load the report. Try again"
+  },
+  "billingAndLicensing": {
+    "message": "Billing & Licensing"
   }
 }