From a959620a11da826edd05bbaa348ee1e893a5e6ac Mon Sep 17 00:00:00 2001
From: Alec Rippberger <127791530+alec-livefront@users.noreply.github.com>
Date: Wed, 6 Nov 2024 11:08:29 -0600
Subject: [PATCH] [PM-14369] Hide account switcher if on login page and not
 logged into any accounts (#11827)

* Add hasLoggedInAccount to check if there is a logged in account

* Update Storybook providers

* Revert "Update Storybook providers"

This reverts commit 646506ab959e601bbddedb5173077362fb7c5450.

* Reapply "Update Storybook providers"

This reverts commit d86744a80b5b4fe910cb16a5b3b5dbf452ee845c.

* Add story for HasLoggedInAccountExample

* Remove unused imports
---
 ...tension-anon-layout-wrapper.component.html |  2 +-
 ...extension-anon-layout-wrapper.component.ts |  9 +++
 .../extension-anon-layout-wrapper.stories.ts  | 70 +++++++++++++++++++
 3 files changed, 80 insertions(+), 1 deletion(-)

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 @@
 
     <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>
 
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<void> {
@@ -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<AccountSwitcherService>,
+        },
         {
           provide: AuthService,
           useValue: {
@@ -300,3 +309,64 @@ export const DynamicContentExample: Story = {
     ],
   }),
 };
+
+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: "testuser@bitwarden.com",
+        id: "123e4567-e89b-12d3-a456-426614174000",
+        server: "bitwarden.com",
+        status: 2,
+        isActive: false,
+      },
+      {
+        name: "addAccount",
+        id: "addAccount",
+        isActive: false,
+      },
+    ],
+  }),
+};