diff --git a/apps/browser/src/auth/popup/extension-anon-layout-wrapper/extension-anon-layout-wrapper.component.html b/apps/browser/src/auth/popup/extension-anon-layout-wrapper/extension-anon-layout-wrapper.component.html index d5273fd9fb..4a206b36fa 100644 --- a/apps/browser/src/auth/popup/extension-anon-layout-wrapper/extension-anon-layout-wrapper.component.html +++ b/apps/browser/src/auth/popup/extension-anon-layout-wrapper/extension-anon-layout-wrapper.component.html @@ -9,7 +9,7 @@ - + diff --git a/apps/browser/src/auth/popup/extension-anon-layout-wrapper/extension-anon-layout-wrapper.component.ts b/apps/browser/src/auth/popup/extension-anon-layout-wrapper/extension-anon-layout-wrapper.component.ts index db85b28fa6..0301a76431 100644 --- a/apps/browser/src/auth/popup/extension-anon-layout-wrapper/extension-anon-layout-wrapper.component.ts +++ b/apps/browser/src/auth/popup/extension-anon-layout-wrapper/extension-anon-layout-wrapper.component.ts @@ -15,6 +15,7 @@ import { PopOutComponent } from "../../../platform/popup/components/pop-out.comp import { PopupHeaderComponent } from "../../../platform/popup/layout/popup-header.component"; import { PopupPageComponent } from "../../../platform/popup/layout/popup-page.component"; import { CurrentAccountComponent } from "../account-switching/current-account.component"; +import { AccountSwitcherService } from "../account-switching/services/account-switcher.service"; import { ExtensionBitwardenLogo } from "./extension-bitwarden-logo.icon"; @@ -50,6 +51,7 @@ export class ExtensionAnonLayoutWrapperComponent implements OnInit, OnDestroy { protected pageIcon: Icon; protected showReadonlyHostname: boolean; protected maxWidth: "md" | "3xl"; + protected hasLoggedInAccount: boolean = false; protected theme: string; protected logo = ExtensionBitwardenLogo; @@ -59,6 +61,7 @@ export class ExtensionAnonLayoutWrapperComponent implements OnInit, OnDestroy { private route: ActivatedRoute, private i18nService: I18nService, private extensionAnonLayoutWrapperDataService: AnonLayoutWrapperDataService, + private accountSwitcherService: AccountSwitcherService, ) {} async ngOnInit(): Promise { @@ -68,6 +71,12 @@ export class ExtensionAnonLayoutWrapperComponent implements OnInit, OnDestroy { // Listen for page changes and update the page data appropriately this.listenForPageDataChanges(); this.listenForServiceDataChanges(); + + this.accountSwitcherService.availableAccounts$ + .pipe(takeUntil(this.destroy$)) + .subscribe((accounts) => { + this.hasLoggedInAccount = accounts.some((account) => account.id !== "addAccount"); + }); } private listenForPageDataChanges() { diff --git a/apps/browser/src/auth/popup/extension-anon-layout-wrapper/extension-anon-layout-wrapper.stories.ts b/apps/browser/src/auth/popup/extension-anon-layout-wrapper/extension-anon-layout-wrapper.stories.ts index cc4aa2f731..ad7e6f6736 100644 --- a/apps/browser/src/auth/popup/extension-anon-layout-wrapper/extension-anon-layout-wrapper.stories.ts +++ b/apps/browser/src/auth/popup/extension-anon-layout-wrapper/extension-anon-layout-wrapper.stories.ts @@ -27,6 +27,7 @@ import { ButtonModule, I18nMockService } from "@bitwarden/components"; import { RegistrationCheckEmailIcon } from "../../../../../../libs/auth/src/angular/icons/registration-check-email.icon"; import { PopupRouterCacheService } from "../../../platform/popup/view-cache/popup-router-cache.service"; +import { AccountSwitcherService } from "../account-switching/services/account-switcher.service"; import { ExtensionAnonLayoutWrapperDataService } from "./extension-anon-layout-wrapper-data.service"; import { @@ -45,6 +46,7 @@ const decorators = (options: { applicationVersion?: string; clientType?: ClientType; hostName?: string; + accounts?: any[]; }) => { return [ componentWrapperDecorator( @@ -83,6 +85,13 @@ const decorators = (options: { }), }, }, + { + provide: AccountSwitcherService, + useValue: { + availableAccounts$: of(options.accounts || []), + SPECIAL_ADD_ACCOUNT_ID: "addAccount", + } as Partial, + }, { provide: AuthService, useValue: { @@ -300,3 +309,64 @@ export const DynamicContentExample: Story = { ], }), }; + +export const HasLoggedInAccountExample: Story = { + render: (args) => ({ + props: args, + template: "", + }), + decorators: decorators({ + components: [DefaultPrimaryOutletExampleComponent], + routes: [ + { + path: "**", + redirectTo: "has-logged-in-account", + pathMatch: "full", + }, + { + path: "", + component: ExtensionAnonLayoutWrapperComponent, + children: [ + { + path: "has-logged-in-account", + data: { + hasLoggedInAccount: true, + showAcctSwitcher: true, + }, + children: [ + { + path: "", + component: DefaultPrimaryOutletExampleComponent, + }, + { + path: "", + component: DefaultSecondaryOutletExampleComponent, + outlet: "secondary", + }, + { + path: "", + component: DefaultEnvSelectorOutletExampleComponent, + outlet: "environment-selector", + }, + ], + }, + ], + }, + ], + accounts: [ + { + name: "Test User", + email: "testuser@bitwarden.com", + id: "123e4567-e89b-12d3-a456-426614174000", + server: "bitwarden.com", + status: 2, + isActive: false, + }, + { + name: "addAccount", + id: "addAccount", + isActive: false, + }, + ], + }), +};