[PM-14369] Hide account switcher if on login page and not logged into any accounts

apps/browser/src/auth/popup/extension-anon-layout-wrapper/extension-anon-layout-wrapper.component.html

@@ -9,7 +9,7 @@
 
     <ng-container slot="end">
       <app-pop-out></app-pop-out>
-      <app-current-account *ngIf="showAcctSwitcher"></app-current-account>
+      <app-current-account *ngIf="showAcctSwitcher && hasLoggedInAccount"></app-current-account>
     </ng-container>
   </popup-header>
 

apps/browser/src/auth/popup/extension-anon-layout-wrapper/extension-anon-layout-wrapper.component.ts

@@ -15,6 +15,7 @@
 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 @@
   protected pageIcon: Icon;
   protected showReadonlyHostname: boolean;
   protected maxWidth: "md" | "3xl";
+  protected hasLoggedInAccount: boolean = false;
 
   protected theme: string;
   protected logo = ExtensionBitwardenLogo;
@@ -59,6 +61,7 @@
     private route: ActivatedRoute,
     private i18nService: I18nService,
     private extensionAnonLayoutWrapperDataService: AnonLayoutWrapperDataService,
+    private accountSwitcherService: AccountSwitcherService,
   ) {}
 
   async ngOnInit(): Promise<void> {
@@ -68,6 +71,12 @@
     // 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() {

apps/browser/src/auth/popup/extension-anon-layout-wrapper/extension-anon-layout-wrapper.stories.ts

@@ -27,6 +27,7 @@
 
 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 @@
   applicationVersion?: string;
   clientType?: ClientType;
   hostName?: string;
+  accounts?: any[];
 }) => {
   return [
     componentWrapperDecorator(
@@ -83,6 +85,13 @@
             }),
           },
         },
+        {
+          provide: AccountSwitcherService,
+          useValue: {
+            availableAccounts$: of(options.accounts || []),
+            SPECIAL_ADD_ACCOUNT_ID: "addAccount",
+          } as Partial<AccountSwitcherService>,
+        },
         {
           provide: AuthService,
           useValue: {
@@ -300,3 +309,64 @@
     ],
   }),
 };
+
+export const HasLoggedInAccountExample: Story = {
+  render: (args) => ({
+    props: args,
+    template: "<router-outlet></router-outlet>",
+  }),
+  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: "[email protected]",
+        id: "123e4567-e89b-12d3-a456-426614174000",
+        server: "bitwarden.com",
+        status: 2,
+        isActive: false,
+      },
+      {
+        name: "addAccount",
+        id: "addAccount",
+        isActive: false,
+      },
+    ],
+  }),
+};