move upgrade browser notice to banner component
This commit is contained in:
parent
eff92f2aae
commit
a734abfc98
|
@ -1,3 +1,20 @@
|
||||||
|
<bit-banner
|
||||||
|
class="-tw-m-6 tw-flex tw-flex-col tw-pb-6"
|
||||||
|
bannerType="warning"
|
||||||
|
*ngIf="visibleBanner === VisibleVaultBanner.OutdatedBrowser"
|
||||||
|
(onClose)="dismissBanner()"
|
||||||
|
>
|
||||||
|
{{ "updateBrowserDesc" | i18n }}
|
||||||
|
<a
|
||||||
|
class="text-white tw-font-bold"
|
||||||
|
target="_blank"
|
||||||
|
href="https://browser-update.org/update-browser.html"
|
||||||
|
rel="noreferrer noopener"
|
||||||
|
>
|
||||||
|
{{ "updateBrowser" | i18n }}
|
||||||
|
</a>
|
||||||
|
</bit-banner>
|
||||||
|
|
||||||
<bit-banner
|
<bit-banner
|
||||||
class="-tw-m-6 tw-flex tw-flex-col tw-pb-6"
|
class="-tw-m-6 tw-flex tw-flex-col tw-pb-6"
|
||||||
bannerType="premium"
|
bannerType="premium"
|
||||||
|
|
|
@ -3,12 +3,16 @@ import { mock } from "jest-mock-extended";
|
||||||
import { BehaviorSubject } from "rxjs";
|
import { BehaviorSubject } from "rxjs";
|
||||||
|
|
||||||
import { I18nPipe } from "@bitwarden/angular/platform/pipes/i18n.pipe";
|
import { I18nPipe } from "@bitwarden/angular/platform/pipes/i18n.pipe";
|
||||||
|
import { ApiService } from "@bitwarden/common/abstractions/api.service";
|
||||||
|
import { TokenService } from "@bitwarden/common/auth/abstractions/token.service";
|
||||||
import { BillingAccountProfileStateService } from "@bitwarden/common/billing/abstractions/account/billing-account-profile-state.service";
|
import { BillingAccountProfileStateService } from "@bitwarden/common/billing/abstractions/account/billing-account-profile-state.service";
|
||||||
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
|
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
|
||||||
import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
|
import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
|
||||||
import { BannerModule } from "@bitwarden/components";
|
import { BannerModule } from "@bitwarden/components";
|
||||||
|
|
||||||
import { VaultBannersComponent } from "./vault-banners.component";
|
import { LooseComponentsModule } from "../../../shared";
|
||||||
|
|
||||||
|
import { VaultBannersComponent, VisibleVaultBanner } from "./vault-banners.component";
|
||||||
|
|
||||||
describe("VaultBannersComponent", () => {
|
describe("VaultBannersComponent", () => {
|
||||||
let component: VaultBannersComponent;
|
let component: VaultBannersComponent;
|
||||||
|
@ -16,12 +20,14 @@ describe("VaultBannersComponent", () => {
|
||||||
|
|
||||||
const hasPremiumFromAnySource$ = new BehaviorSubject<boolean>(false);
|
const hasPremiumFromAnySource$ = new BehaviorSubject<boolean>(false);
|
||||||
const isSelfHost = jest.fn().mockReturnValue(false);
|
const isSelfHost = jest.fn().mockReturnValue(false);
|
||||||
|
const getEmailVerified = jest.fn().mockResolvedValue(true);
|
||||||
|
|
||||||
beforeEach(async () => {
|
beforeEach(async () => {
|
||||||
isSelfHost.mockClear();
|
isSelfHost.mockClear();
|
||||||
|
getEmailVerified.mockClear();
|
||||||
|
|
||||||
await TestBed.configureTestingModule({
|
await TestBed.configureTestingModule({
|
||||||
imports: [BannerModule],
|
imports: [BannerModule, LooseComponentsModule],
|
||||||
declarations: [VaultBannersComponent, I18nPipe],
|
declarations: [VaultBannersComponent, I18nPipe],
|
||||||
providers: [
|
providers: [
|
||||||
{
|
{
|
||||||
|
@ -36,11 +42,25 @@ describe("VaultBannersComponent", () => {
|
||||||
provide: I18nService,
|
provide: I18nService,
|
||||||
useValue: mock<I18nService>({ t: (key) => key }),
|
useValue: mock<I18nService>({ t: (key) => key }),
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
provide: TokenService,
|
||||||
|
useValue: { getEmailVerified },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
provide: ApiService,
|
||||||
|
useValue: mock<ApiService>(),
|
||||||
|
},
|
||||||
],
|
],
|
||||||
}).compileComponents();
|
}).compileComponents();
|
||||||
});
|
});
|
||||||
|
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
|
// Refine the userAgent before each test so each run is consistent
|
||||||
|
Object.defineProperty(navigator, "userAgent", {
|
||||||
|
configurable: true,
|
||||||
|
get: () => "Mozilla/5.0 (darwin) AppleWebKit/537.36 (KHTML, like Gecko) jsdom/20.0.3",
|
||||||
|
});
|
||||||
|
|
||||||
fixture = TestBed.createComponent(VaultBannersComponent);
|
fixture = TestBed.createComponent(VaultBannersComponent);
|
||||||
component = fixture.componentInstance;
|
component = fixture.componentInstance;
|
||||||
|
|
||||||
|
@ -58,7 +78,7 @@ describe("VaultBannersComponent", () => {
|
||||||
});
|
});
|
||||||
|
|
||||||
it("shows premium banner", async () => {
|
it("shows premium banner", async () => {
|
||||||
expect(component.visibleBanner).toBe("premium");
|
expect(component.visibleBanner).toBe(VisibleVaultBanner.Premium);
|
||||||
});
|
});
|
||||||
|
|
||||||
it("dismisses premium banner", async () => {
|
it("dismisses premium banner", async () => {
|
||||||
|
@ -71,5 +91,33 @@ describe("VaultBannersComponent", () => {
|
||||||
expect(component.visibleBanner).toBe(null);
|
expect(component.visibleBanner).toBe(null);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
describe("outdated browser banner", () => {
|
||||||
|
beforeEach(async () => {
|
||||||
|
// Hardcode `MSIE` in userAgent string
|
||||||
|
const userAgent = "AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.4.1 MSIE";
|
||||||
|
Object.defineProperty(navigator, "userAgent", {
|
||||||
|
configurable: true,
|
||||||
|
get: () => userAgent,
|
||||||
|
});
|
||||||
|
|
||||||
|
await component.ngOnInit();
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it("shows outdated browser banner", async () => {
|
||||||
|
expect(component.visibleBanner).toBe(VisibleVaultBanner.OutdatedBrowser);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("dismisses outdated browser banner", async () => {
|
||||||
|
const dismissButton = fixture.debugElement.nativeElement.querySelector(
|
||||||
|
'button[biticonbutton="bwi-close"]',
|
||||||
|
);
|
||||||
|
|
||||||
|
dismissButton.dispatchEvent(new Event("click"));
|
||||||
|
|
||||||
|
expect(component.visibleBanner).toBe(null);
|
||||||
|
});
|
||||||
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -6,6 +6,7 @@ import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/pl
|
||||||
|
|
||||||
export enum VisibleVaultBanner {
|
export enum VisibleVaultBanner {
|
||||||
Premium = "premium",
|
Premium = "premium",
|
||||||
|
OutdatedBrowser = "outdated-browser",
|
||||||
}
|
}
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
|
@ -27,6 +28,8 @@ export class VaultBannersComponent implements OnInit {
|
||||||
}
|
}
|
||||||
|
|
||||||
private async determineVisibleBanner(): Promise<void> {
|
private async determineVisibleBanner(): Promise<void> {
|
||||||
|
const showBrowserOutdated = window.navigator.userAgent.indexOf("MSIE") !== -1;
|
||||||
|
|
||||||
const canAccessPremium = await firstValueFrom(
|
const canAccessPremium = await firstValueFrom(
|
||||||
this.billingAccountProfileStateService.hasPremiumFromAnySource$,
|
this.billingAccountProfileStateService.hasPremiumFromAnySource$,
|
||||||
);
|
);
|
||||||
|
@ -34,6 +37,9 @@ export class VaultBannersComponent implements OnInit {
|
||||||
const showPremiumBanner = !canAccessPremium && !this.platformUtilsService.isSelfHost();
|
const showPremiumBanner = !canAccessPremium && !this.platformUtilsService.isSelfHost();
|
||||||
|
|
||||||
switch (true) {
|
switch (true) {
|
||||||
|
case showBrowserOutdated:
|
||||||
|
this.visibleBanner = VisibleVaultBanner.OutdatedBrowser;
|
||||||
|
break;
|
||||||
case showPremiumBanner:
|
case showPremiumBanner:
|
||||||
this.visibleBanner = VisibleVaultBanner.Premium;
|
this.visibleBanner = VisibleVaultBanner.Premium;
|
||||||
break;
|
break;
|
||||||
|
|
|
@ -92,24 +92,6 @@
|
||||||
class="d-block mb-4"
|
class="d-block mb-4"
|
||||||
(onVerified)="emailVerified($event)"
|
(onVerified)="emailVerified($event)"
|
||||||
></app-verify-email>
|
></app-verify-email>
|
||||||
|
|
||||||
<div class="card border-warning mb-4" *ngIf="showBrowserOutdated">
|
|
||||||
<div class="card-header bg-warning text-white">
|
|
||||||
<i class="bwi bwi-exclamation-triangle bwi-fw" aria-hidden="true"></i>
|
|
||||||
{{ "updateBrowser" | i18n }}
|
|
||||||
</div>
|
|
||||||
<div class="card-body">
|
|
||||||
<p>{{ "updateBrowserDesc" | i18n }}</p>
|
|
||||||
<a
|
|
||||||
class="btn btn-block btn-outline-secondary"
|
|
||||||
target="_blank"
|
|
||||||
href="https://browser-update.org/update-browser.html"
|
|
||||||
rel="noreferrer"
|
|
||||||
>
|
|
||||||
{{ "updateBrowser" | i18n }}
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
@ -123,7 +123,6 @@ export class VaultComponent implements OnInit, OnDestroy {
|
||||||
collectionsModalRef: ViewContainerRef;
|
collectionsModalRef: ViewContainerRef;
|
||||||
|
|
||||||
showVerifyEmail = false;
|
showVerifyEmail = false;
|
||||||
showBrowserOutdated = false;
|
|
||||||
showLowKdf = false;
|
showLowKdf = false;
|
||||||
trashCleanupWarning: string = null;
|
trashCleanupWarning: string = null;
|
||||||
kdfIterations: number;
|
kdfIterations: number;
|
||||||
|
@ -186,7 +185,6 @@ export class VaultComponent implements OnInit, OnDestroy {
|
||||||
) {}
|
) {}
|
||||||
|
|
||||||
async ngOnInit() {
|
async ngOnInit() {
|
||||||
this.showBrowserOutdated = window.navigator.userAgent.indexOf("MSIE") !== -1;
|
|
||||||
this.trashCleanupWarning = this.i18nService.t(
|
this.trashCleanupWarning = this.i18nService.t(
|
||||||
this.platformUtilsService.isSelfHost()
|
this.platformUtilsService.isSelfHost()
|
||||||
? "trashCleanupWarningSelfHosted"
|
? "trashCleanupWarningSelfHosted"
|
||||||
|
@ -406,7 +404,7 @@ export class VaultComponent implements OnInit, OnDestroy {
|
||||||
}
|
}
|
||||||
|
|
||||||
get isShowingCards() {
|
get isShowingCards() {
|
||||||
return this.showBrowserOutdated || this.showVerifyEmail || this.showLowKdf;
|
return this.showVerifyEmail || this.showLowKdf;
|
||||||
}
|
}
|
||||||
|
|
||||||
emailVerified(verified: boolean) {
|
emailVerified(verified: boolean) {
|
||||||
|
|
Loading…
Reference in New Issue