1
0
mirror of https://github.com/bitwarden/browser.git synced 2024-06-25 10:25:36 +02:00
bitwarden-browser/apps/web/src/app/reports/shared/report-card/report-card.component.html
SmithThe4th b79554a13b
[PM-283] Fix Reports UI behavior for premium and free users (#4926)
* Prevent rerouting to dispaly modal message, and refactored components where thsi was used

* Added upgrade badge to organization reports view

* created guard to prevent free organization users from accessing reports

* Added isUpgradeRequired getter to organization class

* Modifiewd reports home to pass upgrade badge and add new guard to organization reports module

* Fixed routing bug when routing to billing subscription page

* Refactored to use async pipe and observables

* Renamed getter name to be more descriptive

* Removed checkAccess from reports

* Renamed guard

* Removed unused variables

* Lint fix

* Lint fix

* prettier fix

* Corrected organiztion service reference

* Moved homepage to ngonInit

* [PM-1629] Update the upgrade dialog for users without billing rights (#5102)

* Show dialog with description when user does not have access to the billing page

* switched conditions to nested if to make the logic clearer
2023-03-30 16:27:03 -04:00

27 lines
1.1 KiB
HTML

<a
class="tw-block tw-h-full tw-max-w-72 tw-overflow-hidden tw-rounded tw-border tw-border-solid tw-border-secondary-300 !tw-text-main tw-transition-all hover:tw-scale-105 hover:tw-no-underline focus:tw-outline-none focus:tw-ring focus:tw-ring-primary-700 focus:tw-ring-offset-2"
[routerLink]="route"
>
<div class="tw-relative">
<div
class="tw-flex tw-h-28 tw-bg-background-alt2 tw-text-center tw-text-primary-300"
[ngClass]="{ 'tw-grayscale': disabled }"
>
<div class="tw-m-auto"><bit-icon [icon]="icon" aria-hidden="true"></bit-icon></div>
</div>
<div class="tw-p-5" [ngClass]="{ 'tw-grayscale': disabled }">
<h3 class="tw-mb-4 tw-text-xl tw-font-bold">{{ title }}</h3>
<p class="tw-mb-0">{{ description }}</p>
</div>
<span
bitBadge
[badgeType]="requiresPremium ? 'success' : 'primary'"
class="tw-absolute tw-left-2 tw-top-2 tw-leading-none"
*ngIf="disabled"
>
<ng-container *ngIf="requiresPremium">{{ "premium" | i18n }}</ng-container>
<ng-container *ngIf="!requiresPremium">{{ "upgrade" | i18n }}</ng-container>
</span>
</div>
</a>