premium labels for reports section

src/app/tools/tools.component.html

@@ -16,7 +16,14 @@
                 </div>
             </div>
             <div class="card">
-                <div class="card-header">{{'reports' | i18n}}</div>
+                <div class="card-header d-flex">
+                    {{'reports' | i18n}}
+                    <div class="ml-auto">
+                        <a href="#" appStopClick class="badge badge-primary" *ngIf="!canAccessPremium" (click)="premiumRequired()">
+                            {{'premium' | i18n}}
+                        </a>
+                    </div>
+                </div>
                 <div class="list-group list-group-flush">
                     <a routerLink="exposed-passwords-report" class="list-group-item" routerLinkActive="active">
                         {{'exposedPasswordsReport' | i18n}}
@@ -33,8 +40,13 @@
                     <a routerLink="inactive-two-factor-report" class="list-group-item" routerLinkActive="active">
                         {{'inactive2faReport' | i18n}}
                     </a>
-                    <a routerLink="breach-report" class="list-group-item" routerLinkActive="active">
+                    <a routerLink="breach-report" class="list-group-item d-flex" routerLinkActive="active">
                         {{'dataBreachReport' | i18n}}
+                        <div class="ml-auto">
+                            <span class="badge badge-success" *ngIf="!canAccessPremium">
+                                {{'free' | i18n | uppercase}}
+                            </span>
+                        </div>
                     </a>
                 </div>
             </div>

src/app/tools/tools.component.ts

@@ -1,7 +1,28 @@
-import { Component } from '@angular/core';
+import {
+    Component,
+    OnInit,
+} from '@angular/core';
+
+import { MessagingService } from 'jslib/abstractions/messaging.service';
+import { UserService } from 'jslib/abstractions/user.service';
 
 @Component({
     selector: 'app-tools',
     templateUrl: 'tools.component.html',
 })
-export class ToolsComponent { }
+export class ToolsComponent implements OnInit {
+    canAccessPremium = false;
+
+    constructor(private userService: UserService, private messagingService: MessagingService) { }
+
+    async ngOnInit() {
+        this.canAccessPremium = await this.userService.canAccessPremium();
+    }
+
+    async premiumRequired() {
+        if (!this.canAccessPremium) {
+            this.messagingService.send('premiumRequired');
+            return;
+        }
+    }
+}

src/locales/en/messages.json

@@ -2716,5 +2716,9 @@
   "dontAskFingerprintAgain": {
     "message": "Don't ask to verify fingerprint phrase again",
     "description": "A 'fingerprint phrase' is a unique word phrase (similar to a passphrase) that a user can use to authenticate their public key with another user, for the purposes of sharing."
+  },
+  "free": {
+    "message": "Free",
+    "description": "Free, as in 'Free beer'"
   }
 }