Add premium badge component (#1525)

src/app/components/premium-badge.component.ts

@@ -0,0 +1,19 @@
+import { Component } from "@angular/core";
+
+import { MessagingService } from "jslib-common/abstractions/messaging.service";
+
+@Component({
+  selector: "app-premium-badge",
+  template: `
+    <a href="#" appStopClick *appNotPremium (click)="premiumRequired()">
+      <bit-badge type="success">{{ "premium" | i18n }}</bit-badge>
+    </a>
+  `,
+})
+export class PremiumBadgeComponent {
+  constructor(private messagingService: MessagingService) {}
+
+  premiumRequired() {
+    this.messagingService.send("premiumRequired");
+  }
+}

src/app/oss.module.ts

@@ -53,6 +53,7 @@ import localeZhTw from "@angular/common/locales/zh-Hant";
 import { NgModule } from "@angular/core";
 import { FormsModule, ReactiveFormsModule } from "@angular/forms";
 import { RouterModule } from "@angular/router";
+import { BadgeModule } from "@bitwarden/components";
 import { InfiniteScrollModule } from "ngx-infinite-scroll";
 import { ToastrModule } from "ngx-toastr";
 
@@ -70,6 +71,7 @@ import { BoxRowDirective } from "jslib-angular/directives/box-row.directive";
 import { FallbackSrcDirective } from "jslib-angular/directives/fallback-src.directive";
 import { InputStripSpacesDirective } from "jslib-angular/directives/input-strip-spaces.directive";
 import { InputVerbatimDirective } from "jslib-angular/directives/input-verbatim.directive";
+import { NotPremiumDirective } from "jslib-angular/directives/not-premium.directive";
 import { SelectCopyDirective } from "jslib-angular/directives/select-copy.directive";
 import { StopClickDirective } from "jslib-angular/directives/stop-click.directive";
 import { StopPropDirective } from "jslib-angular/directives/stop-prop.directive";
@@ -100,6 +102,7 @@ import { VerifyRecoverDeleteComponent } from "./accounts/verify-recover-delete.c
 import { NestedCheckboxComponent } from "./components/nested-checkbox.component";
 import { PasswordRepromptComponent } from "./components/password-reprompt.component";
 import { PasswordStrengthComponent } from "./components/password-strength.component";
+import { PremiumBadgeComponent } from "./components/premium-badge.component";
 import { FooterComponent } from "./layouts/footer.component";
 import { FrontendLayoutComponent } from "./layouts/frontend-layout.component";
 import { NavbarComponent } from "./layouts/navbar.component";
@@ -292,10 +295,11 @@ registerLocaleData(localeZhTw, "zh-TW");
     ToastrModule,
     ReactiveFormsModule,
     RouterModule,
+    BadgeModule,
   ],
   declarations: [
-    A11yTitleDirective,
     A11yInvalidDirective,
+    A11yTitleDirective,
     AcceptEmergencyComponent,
     AcceptOrganizationComponent,
     AccessComponent,
@@ -364,6 +368,7 @@ registerLocaleData(localeZhTw, "zh-TW");
     MasterPasswordPolicyComponent,
     NavbarComponent,
     NestedCheckboxComponent,
+    NotPremiumDirective,
     OptionsComponent,
     OrgAccountComponent,
     OrgAddEditComponent,
@@ -412,6 +417,7 @@ registerLocaleData(localeZhTw, "zh-TW");
     PasswordStrengthComponent,
     PaymentComponent,
     PersonalOwnershipPolicyComponent,
+    PremiumBadgeComponent,
     PremiumComponent,
     ProfileComponent,
     ProvidersComponent,
@@ -456,8 +462,8 @@ registerLocaleData(localeZhTw, "zh-TW");
     UnsecuredWebsitesReportComponent,
     UpdateKeyComponent,
     UpdateLicenseComponent,
-    UpdateTempPasswordComponent,
     UpdatePasswordComponent,
+    UpdateTempPasswordComponent,
     UserBillingComponent,
     UserLayoutComponent,
     UserNamePipe,

src/app/settings/emergency-access-add-edit.component.html

@@ -9,7 +9,7 @@
     >
       <div class="modal-header">
         <h2 class="modal-title" id="userAddEditTitle">
-          <span class="badge badge-primary" *ngIf="readOnly">{{ "premium" | i18n }}</span>
+          <app-premium-badge *ngIf="readOnly"></app-premium-badge>
           {{ title }}
           <small class="text-muted" *ngIf="name">{{ name }}</small>
         </h2>

src/app/settings/emergency-access.component.html

@@ -15,15 +15,7 @@
 <div class="page-header d-flex">
   <h2>
     {{ "trustedEmergencyContacts" | i18n }}
-    <a
-      href="#"
-      appStopClick
-      class="badge badge-primary"
-      *ngIf="!canAccessPremium"
-      (click)="premiumRequired()"
-    >
-      {{ "premium" | i18n }}
-    </a>
+    <app-premium-badge></app-premium-badge>
   </h2>
   <div class="ml-auto d-flex">
     <button

src/app/settings/two-factor-setup.component.html

@@ -39,15 +39,7 @@
           ></i>
           <span class="sr-only">{{ "enabled" | i18n }}</span>
         </ng-container>
-        <a
-          href="#"
-          appStopClick
-          class="badge badge-primary"
-          *ngIf="!canAccessPremium && p.premium"
-          (click)="premiumRequired()"
-        >
-          {{ "premium" | i18n }}
-        </a>
+        <app-premium-badge *ngIf="p.premium"></app-premium-badge>
       </h3>
       {{ p.description }}
     </div>

src/app/tools/tools.component.html

@@ -19,15 +19,7 @@
         <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>
+            <app-premium-badge></app-premium-badge>
           </div>
         </div>
         <div class="list-group list-group-flush">

src/app/vault/add-edit.component.html

@@ -187,15 +187,10 @@
                   title="{{ 'verificationCodeTotp' | i18n }}"
                   class="ml-2"
                 />
-                <a
-                  href="#"
-                  appStopClick
-                  class="badge badge-primary ml-3"
-                  (click)="premiumRequired()"
-                  *ngIf="!organization && !cipher.organizationId && !canAccessPremium"
-                >
-                  {{ "premium" | i18n }}
-                </a>
+                <app-premium-badge
+                  *ngIf="!organization && !cipher.organizationId"
+                  class="ml-3"
+                ></app-premium-badge>
                 <a
                   href="#"
                   appStopClick