[Account switching] Design changes (#1240)

* Various design changes to the account switcher

* Hide serverUrl on cloud accounts

* Display account limit reached instead of add account

src/app/layout/account-switcher.component.html

@@ -39,14 +39,39 @@
         href="#"
         (mousedown)="switch(a.key)"
       >
-        <span class="email">{{ a.value.profile.email }}</span>
-        <span class="server">{{ a.value.serverUrl }}</span>
-        <span class="status">{{ a.value.profile.authenticationStatus }}</span>
+        <app-avatar
+          [data]="a.value.profile.email"
+          size="25"
+          [circle]="true"
+          [fontSize]="14"
+          [dynamic]="true"
+          *ngIf="a.value.profile.email != null"
+        ></app-avatar>
+        <div class="accountInfo">
+          <span class="email">{{ a.value.profile.email }}</span>
+          <span class="server" *ngIf="a.value.serverUrl != 'bitwarden.com'">{{
+            a.value.serverUrl
+          }}</span>
+          <span class="status">{{ a.value.profile.authenticationStatus }}</span>
+        </div>
+        <i
+          class="fa fa-unlock fa-2x text-muted"
+          *ngIf="a.value.profile.authenticationStatus == 'unlocked'"
+        ></i>
+        <i
+          class="fa fa-lock fa-2x text-muted"
+          *ngIf="a.value.profile.authenticationStatus == 'locked'"
+        ></i>
       </a>
     </div>
     <div class="border"></div>
-    <a class="add" routerLink="/login" (click)="toggle()">
-      <i class="fa fa-plus" aria-hidden="true"></i> {{ "addAccount" | i18n }}
-    </a>
+    <ng-container *ngIf="numberOfAccounts < 5">
+      <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 == 5">
+      <a class="accountLimitReached">{{ "accountSwitcherLimitReached" | i18n }} </a>
+    </ng-container>
   </div>
 </ng-template>

src/app/layout/account-switcher.component.ts

@@ -60,6 +60,14 @@ export class AccountSwitcherComponent implements OnInit {
     return !Utils.isNullOrWhitespace(this.activeAccountEmail);
   }
 
+  get numberOfAccounts() {
+    if (this.accounts == null) {
+      this.isOpen = false;
+      return 0;
+    }
+    return Object.keys(this.accounts).length;
+  }
+
   constructor(
     private stateService: StateService,
     private vaultTimeoutService: VaultTimeoutService,