diff --git a/src/app/layout/account-switcher.component.html b/src/app/layout/account-switcher.component.html
index 96fa4226a9..1d50532fc8 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"
>
-
- {{ activeAccountEmail }}
+
+
+ {{ activeAccountEmail }}
+
+
+ {{ "switchAccount" | i18n }}
+
-
0">
-
-
- {{ "addAccount" | i18n }}
-
-
-
- {{ "accountSwitcherLimitReached" | i18n }}
+
+ 0">
+
+
+ {{ "addAccount" | i18n }}
+
+
+
+ {{ "accountSwitcherLimitReached" | i18n }}
+
diff --git a/src/app/layout/account-switcher.component.ts b/src/app/layout/account-switcher.component.ts
index e56b00a814..ed7de861bc 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 0a16b01c57..621a7356ba 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 66efc7db81..1c18ad3d6c 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;
}
}