bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-10 21:33:27 +00:00
Code Issues Releases Wiki Activity

[PM-24985][PM-24986][PM-25211][PM-24987] - [Vault] Migrate components to use Premium badge component (#16227)

Browse Source 
* migrate all components to use PremiumBadgeComponent

* move badge component to vault

* move premium badge to vault

* move premium badge to billing

* fix import

* use premium badge in tools new send dropdown

* remove badge module import

* remove module
This commit is contained in:
Jordan Aasen
2025-09-09 13:39:24 -07:00
committed by GitHub
parent 4907820383
commit 30af3d7035
17 changed files with 41 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/web/src/app/admin-console/organizations/settings/organization-settings.module.ts
View File

@@ -1,12 +1,12 @@
import { NgModule } from "@angular/core";
import { PremiumBadgeComponent } from "@bitwarden/angular/billing/components/premium-badge";
import { ItemModule } from "@bitwarden/components";
import { DangerZoneComponent } from "../../../auth/settings/account/danger-zone.component";
import { HeaderModule } from "../../../layouts/header/header.module";
import { SharedModule } from "../../../shared";
import { AccountFingerprintComponent } from "../../../shared/components/account-fingerprint/account-fingerprint.component";
import { PremiumBadgeComponent } from "../../../vault/components/premium-badge.component";
import { PoliciesModule } from "../../organizations/policies";
import { AccountComponent } from "./account.component";

2
apps/web/src/app/auth/settings/emergency-access/emergency-access-add-edit.component.ts
View File

@@ -3,6 +3,7 @@
import { Component, Inject, OnInit } from "@angular/core";
import { FormBuilder, Validators } from "@angular/forms";
import { PremiumBadgeComponent } from "@bitwarden/angular/billing/components/premium-badge";
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
@@ -15,7 +16,6 @@ import {
} from "@bitwarden/components";
import { SharedModule } from "../../../shared/shared.module";
import { PremiumBadgeComponent } from "../../../vault/components/premium-badge.component";
import { EmergencyAccessService } from "../../emergency-access";
import { EmergencyAccessType } from "../../emergency-access/enums/emergency-access-type";

2
apps/web/src/app/auth/settings/emergency-access/emergency-access.component.ts
View File

@@ -3,6 +3,7 @@
import { Component, OnInit } from "@angular/core";
import { lastValueFrom, Observable, firstValueFrom, switchMap } from "rxjs";
import { PremiumBadgeComponent } from "@bitwarden/angular/billing/components/premium-badge";
import { UserNamePipe } from "@bitwarden/angular/pipes/user-name.pipe";
import { ApiService } from "@bitwarden/common/abstractions/api.service";
import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
@@ -20,7 +21,6 @@ import { DialogService, ToastService } from "@bitwarden/components";
import { HeaderModule } from "../../../layouts/header/header.module";
import { SharedModule } from "../../../shared/shared.module";
import { PremiumBadgeComponent } from "../../../vault/components/premium-badge.component";
import { EmergencyAccessService } from "../../emergency-access";
import { EmergencyAccessStatusType } from "../../emergency-access/enums/emergency-access-status-type";
import { EmergencyAccessType } from "../../emergency-access/enums/emergency-access-type";

2
apps/web/src/app/auth/settings/two-factor/two-factor-setup.component.ts
View File

@@ -12,6 +12,7 @@ import {
switchMap,
} from "rxjs";
import { PremiumBadgeComponent } from "@bitwarden/angular/billing/components/premium-badge";
import { ApiService } from "@bitwarden/common/abstractions/api.service";
import { PolicyService } from "@bitwarden/common/admin-console/abstractions/policy/policy.service.abstraction";
import { PolicyType } from "@bitwarden/common/admin-console/enums";
@@ -35,7 +36,6 @@ import { DialogRef, DialogService, ItemModule } from "@bitwarden/components";
import { HeaderModule } from "../../../layouts/header/header.module";
import { SharedModule } from "../../../shared/shared.module";
import { PremiumBadgeComponent } from "../../../vault/components/premium-badge.component";
import { TwoFactorRecoveryComponent } from "./two-factor-recovery.component";
import { TwoFactorSetupAuthenticatorComponent } from "./two-factor-setup-authenticator.component";

2
apps/web/src/app/dirt/reports/shared/report-card/report-card.stories.ts
View File

@@ -2,11 +2,11 @@ import { importProvidersFrom } from "@angular/core";
import { RouterTestingModule } from "@angular/router/testing";
import { Meta, StoryObj, applicationConfig, moduleMetadata } from "@storybook/angular";
import { PremiumBadgeComponent } from "@bitwarden/angular/billing/components/premium-badge";
import { JslibModule } from "@bitwarden/angular/jslib.module";
import { BadgeModule, IconModule } from "@bitwarden/components";
import { PreloadedEnglishI18nModule } from "../../../../core/tests";
import { PremiumBadgeComponent } from "../../../../vault/components/premium-badge.component";
import { ReportVariant } from "../models/report-variant";
import { ReportCardComponent } from "./report-card.component";

2
apps/web/src/app/dirt/reports/shared/report-list/report-list.stories.ts
View File

@@ -2,11 +2,11 @@ import { importProvidersFrom } from "@angular/core";
import { RouterTestingModule } from "@angular/router/testing";
import { Meta, StoryObj, applicationConfig, moduleMetadata } from "@storybook/angular";
import { PremiumBadgeComponent } from "@bitwarden/angular/billing/components/premium-badge";
import { JslibModule } from "@bitwarden/angular/jslib.module";
import { BadgeModule, IconModule } from "@bitwarden/components";
import { PreloadedEnglishI18nModule } from "../../../../core/tests";
import { PremiumBadgeComponent } from "../../../../vault/components/premium-badge.component";
import { reports } from "../../reports";
import { ReportVariant } from "../models/report-variant";
import { ReportCardComponent } from "../report-card/report-card.component";

12
apps/web/src/app/tools/send/new-send/new-send-dropdown.component.html
View File

@@ -9,15 +9,9 @@
</a>
<a bitMenuItem (click)="createSend(sendType.File)">
<i class="bwi bwi-file" slot="start" aria-hidden="true"></i>
<div class="tw-flex tw-items-center tw-gap-2">
{{ "sendTypeFile" | i18n }}
<button
type="button"
slot="end"
*ngIf="!(canAccessPremium$ | async)"
bitBadge
variant="success"
>
{{ "premium" | i18n }}
</button>
<app-premium-badge></app-premium-badge>
</div>
</a>
</bit-menu>

13
apps/web/src/app/tools/send/new-send/new-send-dropdown.component.ts
View File

@@ -1,19 +1,19 @@
import { CommonModule } from "@angular/common";
import { Component, Input } from "@angular/core";
import { Router } from "@angular/router";
import { firstValueFrom, Observable, of, switchMap } from "rxjs";
import { PremiumBadgeComponent } from "@bitwarden/angular/billing/components/premium-badge";
import { JslibModule } from "@bitwarden/angular/jslib.module";
import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
import { BillingAccountProfileStateService } from "@bitwarden/common/billing/abstractions";
import { SendType } from "@bitwarden/common/tools/send/enums/send-type";
import { BadgeModule, ButtonModule, DialogService, MenuModule } from "@bitwarden/components";
import { ButtonModule, DialogService, MenuModule } from "@bitwarden/components";
import { DefaultSendFormConfigService, SendAddEditDialogComponent } from "@bitwarden/send-ui";
@Component({
selector: "tools-new-send-dropdown",
templateUrl: "new-send-dropdown.component.html",
imports: [JslibModule, CommonModule, ButtonModule, MenuModule, BadgeModule],
imports: [JslibModule, CommonModule, ButtonModule, MenuModule, PremiumBadgeComponent],
providers: [DefaultSendFormConfigService],
})
/**
@@ -30,7 +30,6 @@ export class NewSendDropdownComponent {
protected canAccessPremium$: Observable<boolean>;
constructor(
private router: Router,
private billingAccountProfileStateService: BillingAccountProfileStateService,
private accountService: AccountService,
private dialogService: DialogService,
@@ -47,16 +46,16 @@ export class NewSendDropdownComponent {
/**
* Opens the SendAddEditComponent for a new Send with the provided type.
* If has user does not have premium access and the type is File, the user will be redirected to the premium settings page.
* If has user does not have premium access and the type is File do nothing the PremiumBadgeComponent will handle the flow.
* @param type The type of Send to create.
*/
async createSend(type: SendType) {
if (!(await firstValueFrom(this.canAccessPremium$)) && type === SendType.File) {
return await this.router.navigate(["settings/subscription/premium"]);
return;
}
const formConfig = await this.addEditFormConfigService.buildConfig("add", undefined, type);
await SendAddEditDialogComponent.open(this.dialogService, { formConfig });
SendAddEditDialogComponent.open(this.dialogService, { formConfig });
}
}

13
apps/web/src/app/vault/components/vault-item-dialog/vault-item-dialog.component.html
View File

@@ -25,17 +25,10 @@
type="button"
(click)="openAttachmentsDialog()"
>
<p class="tw-m-0">
<div class="tw-flex tw-items-center tw-gap-2">
{{ "attachments" | i18n }}
<span
*ngIf="!(canAccessAttachments$ | async)"
bitBadge
variant="success"
class="tw-ml-2"
>
{{ "premium" | i18n }}
</span>
</p>
<app-premium-badge></app-premium-badge>
</div>
<i slot="end" class="bwi bwi-angle-right" aria-hidden="true"></i>
</button>
</bit-item>

2
apps/web/src/app/vault/components/vault-item-dialog/vault-item-dialog.component.ts
View File

@@ -7,6 +7,7 @@ import { firstValueFrom, Subject, switchMap } from "rxjs";
import { map } from "rxjs/operators";
import { CollectionView } from "@bitwarden/admin-console/common";
import { PremiumBadgeComponent } from "@bitwarden/angular/billing/components/premium-badge";
import { VaultViewPasswordHistoryService } from "@bitwarden/angular/services/view-password-history.service";
import { ApiService } from "@bitwarden/common/abstractions/api.service";
import { EventCollectionService } from "@bitwarden/common/abstractions/event/event-collection.service";
@@ -131,6 +132,7 @@ export type VaultItemDialogResult = UnionOfValues<typeof VaultItemDialogResult>;
CipherFormModule,
AsyncActionsModule,
ItemModule,
PremiumBadgeComponent,
],
providers: [
{ provide: PremiumUpgradePromptService, useClass: WebVaultPremiumUpgradePromptService },

1
libs/angular/src/billing/components/premium-badge/index.ts Normal file
View File

@@ -0,0 +1 @@
export * from "./premium-badge.component";

3
apps/web/src/app/vault/components/premium-badge.component.ts → libs/angular/src/billing/components/premium-badge/premium-badge.component.ts
View File

@@ -6,12 +6,13 @@ import { BadgeModule } from "@bitwarden/components";
@Component({
selector: "app-premium-badge",
standalone: true,
template: `
<button type="button" *appNotPremium bitBadge variant="success" (click)="premiumRequired()">
{{ "premium" | i18n }}
</button>
`,
imports: [JslibModule, BadgeModule],
imports: [BadgeModule, JslibModule],
})
export class PremiumBadgeComponent {
constructor(private messagingService: MessagingService) {}

2
apps/web/src/app/vault/components/premium-badge.stories.ts → libs/angular/src/billing/components/premium-badge/premium-badge.stories.ts
View File

@@ -17,7 +17,7 @@ class MockMessagingService implements MessageSender {
}
export default {
title: "Web/Premium Badge",
title: "Billing/Premium Badge",
component: PremiumBadgeComponent,
decorators: [
moduleMetadata({

6
libs/tools/send/send-ui/src/new-send-dropdown/new-send-dropdown.component.html
View File

@@ -16,10 +16,10 @@
[routerLink]="buildRouterLink(sendType.File)"
[queryParams]="buildQueryParams(sendType.File)"
>
<div class="tw-flex tw-items-center tw-gap-2">
<i class="bwi bwi-file" slot="start" aria-hidden="true"></i>
{{ "sendTypeFile" | i18n }}
<button type="button" slot="end" *ngIf="hasNoPremium" bitBadge variant="success">
{{ "premium" | i18n }}
</button>
<app-premium-badge></app-premium-badge>
</div>
</a>
</bit-menu>

8
libs/tools/send/send-ui/src/new-send-dropdown/new-send-dropdown.component.ts
View File

@@ -1,18 +1,19 @@
import { CommonModule } from "@angular/common";
import { Component, Input, OnInit } from "@angular/core";
import { Router, RouterLink } from "@angular/router";
import { RouterLink } from "@angular/router";
import { firstValueFrom } from "rxjs";
import { PremiumBadgeComponent } from "@bitwarden/angular/billing/components/premium-badge";
import { JslibModule } from "@bitwarden/angular/jslib.module";
import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
import { BillingAccountProfileStateService } from "@bitwarden/common/billing/abstractions";
import { SendType } from "@bitwarden/common/tools/send/enums/send-type";
import { BadgeModule, ButtonModule, ButtonType, MenuModule } from "@bitwarden/components";
import { ButtonModule, ButtonType, MenuModule } from "@bitwarden/components";
@Component({
selector: "tools-new-send-dropdown",
templateUrl: "new-send-dropdown.component.html",
imports: [JslibModule, CommonModule, ButtonModule, RouterLink, MenuModule, BadgeModule],
imports: [JslibModule, CommonModule, ButtonModule, RouterLink, MenuModule, PremiumBadgeComponent],
})
export class NewSendDropdownComponent implements OnInit {
@Input() hideIcon: boolean = false;
@@ -23,7 +24,6 @@ export class NewSendDropdownComponent implements OnInit {
hasNoPremium = false;
constructor(
private router: Router,
private billingAccountProfileStateService: BillingAccountProfileStateService,
private accountService: AccountService,
) {}

17
libs/vault/src/cipher-view/login-credentials/login-credentials-view.component.html
View File

@@ -121,18 +121,11 @@
/>
</bit-form-field>
<bit-form-field *ngIf="cipher.login.totp">
<bit-label [appTextDrag]="totpCodeCopyObj?.totpCode"
>{{ "verificationCodeTotp" | i18n }}
<span
*ngIf="!(isPremium$ | async)"
bitBadge
variant="success"
class="tw-ml-2 tw-cursor-pointer"
(click)="getPremium(cipher.organizationId)"
slot="end"
>
{{ "premium" | i18n }}
</span>
<bit-label [appTextDrag]="totpCodeCopyObj?.totpCode">
<div class="tw-flex tw-items-center tw-gap-3">
{{ "verificationCodeTotp" | i18n }}
<app-premium-badge></app-premium-badge>
</div>
</bit-label>
<input
id="totp"

2
libs/vault/src/cipher-view/login-credentials/login-credentials-view.component.ts
View File

@@ -14,6 +14,7 @@ import {
} from "@angular/core";
import { Observable, switchMap } from "rxjs";
import { PremiumBadgeComponent } from "@bitwarden/angular/billing/components/premium-badge";
import { JslibModule } from "@bitwarden/angular/jslib.module";
import { EventCollectionService } from "@bitwarden/common/abstractions/event/event-collection.service";
import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
@@ -56,6 +57,7 @@ type TotpCodeValues = {
BitTotpCountdownComponent,
ReadOnlyCipherCardComponent,
LinkModule,
PremiumBadgeComponent,
],
})
export class LoginCredentialsViewComponent implements OnChanges {