Unset active account when adding additional accounts (#1258)

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>

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 }> {

src/locales/en/messages.json

@@ -1807,5 +1807,8 @@
         "example": "jdoe@example.com"
       }
     }
+  },
+  "switchAccount": {
+    "message": "Switch Account"
   }
 }

src/scss/header.scss

@@ -176,7 +176,9 @@
   }
 
   .accountLimitReached {
+    display: block;
     margin: 4px 0;
+    padding: 5px 10px;
     font-size: $font-size-small;
   }
 }