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)"
>
- {{ a.value.profile.email }}
- {{ a.value.serverUrl }}
- {{ a.value.profile.authenticationStatus }}
+
+
+ {{ a.value.profile.email }}
+ {{
+ a.value.serverUrl
+ }}
+ {{ a.value.profile.authenticationStatus }}
+
+
+
-
- {{ "addAccount" | i18n }}
-
+
+
+ {{ "addAccount" | i18n }}
+
+
+
+ {{ "accountSwitcherLimitReached" | i18n }}
+
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;
+ }
}