From 12bb8b060cb81634b5dfc60d2b4218ddb649c5ec Mon Sep 17 00:00:00 2001
From: Daniel James Smith <djsmith85@users.noreply.github.com>
Date: Wed, 19 Jan 2022 17:03:34 +0100
Subject: [PATCH] [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
---
 .../layout/account-switcher.component.html    | 37 +++++++++++++---
 src/app/layout/account-switcher.component.ts  |  8 ++++
 src/locales/en/messages.json                  |  3 ++
 src/scss/header.scss                          | 42 ++++++++++++-------
 4 files changed, 68 insertions(+), 22 deletions(-)

diff --git a/src/app/layout/account-switcher.component.html b/src/app/layout/account-switcher.component.html
index 5a89046733..153dd30aab 100644
--- a/src/app/layout/account-switcher.component.html
+++ b/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>
diff --git a/src/app/layout/account-switcher.component.ts b/src/app/layout/account-switcher.component.ts
index 88e810f27c..18315a7225 100644
--- a/src/app/layout/account-switcher.component.ts
+++ b/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,
diff --git a/src/locales/en/messages.json b/src/locales/en/messages.json
index 00d50a467f..a56f8cfb9f 100644
--- a/src/locales/en/messages.json
+++ b/src/locales/en/messages.json
@@ -1792,5 +1792,8 @@
   },
   "accountLimitReached": {
     "message": "No more than 5 accounts may be logged in at the same time."
+  },
+  "accountSwitcherLimitReached": {
+    "message": "Account limit reached. Log out of an account to add another."
   }
 }
diff --git a/src/scss/header.scss b/src/scss/header.scss
index 3e1ed867c0..66efc7db81 100644
--- a/src/scss/header.scss
+++ b/src/scss/header.scss
@@ -130,28 +130,33 @@
   }
 
   .accounts {
-    padding: 4px 0;
+    padding: 7px 0;
 
     .account {
       display: grid;
-      grid-column-gap: 5px;
-      grid-template:
-        [row1-start] "email  status" [row1-end]
-        [row2-start] "server server" [row2-end]
-        / 1fr auto;
-      align-items: baseline;
+      grid-template-columns: 24px auto 24px;
+      grid-column-gap: 11px;
+      align-items: center;
+      justify-items: left;
 
-      .server {
-        font-size: $font-size-small;
-      }
+      .accountInfo {
+        display: grid;
 
-      .email {
-        font-size: $font-size-large;
-      }
+        .email {
+          font-size: $font-size-base;
+          max-width: 168px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
 
-      .status {
-        font-style: italic;
-        grid-area: status;
+        .server {
+          font-size: $font-size-small;
+        }
+
+        .status {
+          font-size: $font-size-small;
+          font-style: italic;
+        }
       }
     }
   }
@@ -169,4 +174,9 @@
   .add {
     margin: 4px 0;
   }
+
+  .accountLimitReached {
+    margin: 4px 0;
+    font-size: $font-size-small;
+  }
 }