From d211b3fcd2dc7c49ebd832a6c9eeaaa3b03b9b13 Mon Sep 17 00:00:00 2001
From: Addison Beck <abeck@bitwarden.com>
Date: Mon, 24 Jan 2022 07:28:39 -0500
Subject: [PATCH] Unset active account when adding additional accounts (#1258)

---
 .../layout/account-switcher.component.html    | 41 +++++++++++--------
 src/app/layout/account-switcher.component.ts  |  9 +++-
 src/locales/en/messages.json                  |  3 ++
 src/scss/header.scss                          |  2 +
 4 files changed, 37 insertions(+), 18 deletions(-)

diff --git a/src/app/layout/account-switcher.component.html b/src/app/layout/account-switcher.component.html
index 96fa4226..1d50532f 100644
--- a/src/app/layout/account-switcher.component.html
+++ b/src/app/layout/account-switcher.component.html
@@ -5,15 +5,20 @@
   #trigger="cdkOverlayOrigin"
   [hidden]="!showSwitcher"
 >
-  <app-avatar
-    [data]="activeAccountEmail"
-    size="25"
-    [circle]="true"
-    [fontSize]="14"
-    [dynamic]="true"
-    *ngIf="activeAccountEmail != null"
-  ></app-avatar>
-  <span>{{ activeAccountEmail }}</span>
+  <ng-container *ngIf="activeAccountEmail != null; else noActiveAccount">
+    <app-avatar
+      [data]="activeAccountEmail"
+      size="25"
+      [circle]="true"
+      [fontSize]="14"
+      [dynamic]="true"
+      *ngIf="activeAccountEmail != null"
+    ></app-avatar>
+    <span>{{ activeAccountEmail }}</span>
+  </ng-container>
+  <ng-template #noActiveAccount>
+    <span>{{ "switchAccount" | i18n }}</span>
+  </ng-template>
   <i
     class="fa"
     aria-hidden="true"
@@ -65,14 +70,16 @@
         ></i>
       </a>
     </div>
-    <div class="border" *ngIf="numberOfAccounts > 0"></div>
-    <ng-container *ngIf="numberOfAccounts < 4">
-      <a class="add" routerLink="/login" (click)="toggle()">
-        <i class="fa fa-plus" aria-hidden="true"></i> {{ "addAccount" | i18n }}
-      </a>
-    </ng-container>
-    <ng-container *ngIf="numberOfAccounts == 4">
-      <a class="accountLimitReached">{{ "accountSwitcherLimitReached" | i18n }} </a>
+    <ng-container *ngIf="activeAccountEmail != null">
+      <div class="border" *ngIf="numberOfAccounts > 0"></div>
+      <ng-container *ngIf="numberOfAccounts < 4">
+        <a class="add" routerLink="/login" (click)="addAccount()">
+          <i class="fa fa-plus" aria-hidden="true"></i> {{ "addAccount" | i18n }}
+        </a>
+      </ng-container>
+      <ng-container *ngIf="numberOfAccounts == 4">
+        <span class="accountLimitReached">{{ "accountSwitcherLimitReached" | i18n }} </span>
+      </ng-container>
     </ng-container>
   </div>
 </ng-template>
diff --git a/src/app/layout/account-switcher.component.ts b/src/app/layout/account-switcher.component.ts
index e56b00a8..ed7de861 100644
--- a/src/app/layout/account-switcher.component.ts
+++ b/src/app/layout/account-switcher.component.ts
@@ -65,7 +65,9 @@ export class AccountSwitcherComponent implements OnInit {
   ];
 
   get showSwitcher() {
-    return !Utils.isNullOrWhitespace(this.activeAccountEmail);
+    const userIsInAVault = !Utils.isNullOrWhitespace(this.activeAccountEmail);
+    const userIsAddingAnAdditionalAccount = Object.keys(this.accounts).length > 0;
+    return userIsInAVault || userIsAddingAnAdditionalAccount;
   }
 
   get numberOfAccounts() {
@@ -111,6 +113,11 @@ export class AccountSwitcherComponent implements OnInit {
     this.messagingService.send("switchAccount", { userId: userId });
   }
 
+  async addAccount() {
+    this.toggle();
+    await this.stateService.setActiveUser(null);
+  }
+
   private async createSwitcherAccounts(baseAccounts: {
     [userId: string]: Account;
   }): Promise<{ [userId: string]: SwitcherAccount }> {
diff --git a/src/locales/en/messages.json b/src/locales/en/messages.json
index 0a16b01c..621a7356 100644
--- a/src/locales/en/messages.json
+++ b/src/locales/en/messages.json
@@ -1807,5 +1807,8 @@
         "example": "jdoe@example.com"
       }
     }
+  },
+  "switchAccount": {
+    "message": "Switch Account"
   }
 }
diff --git a/src/scss/header.scss b/src/scss/header.scss
index 66efc7db..1c18ad3d 100644
--- a/src/scss/header.scss
+++ b/src/scss/header.scss
@@ -176,7 +176,9 @@
   }
 
   .accountLimitReached {
+    display: block;
     margin: 4px 0;
+    padding: 5px 10px;
     font-size: $font-size-small;
   }
 }