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 }} + -
- - - {{ "addAccount" | i18n }} - - - - {{ "accountSwitcherLimitReached" | i18n }} + +
+ + + {{ "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; } }