Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2024-12-21 16:18:28 +01:00
Code Issues Projects Releases Wiki Activity

[PM-5430] Separate Active Account from other accounts (#7374)

Browse Source 
* make spacing consistent between log out and lock all buttons

* update color of avatar when no active account

* separate active account from other available accounts

* remove unnecessary ng-container
This commit is contained in:
rr-bw 2024-01-01 21:21:15 -08:00 committed by GitHub
parent ec417cf2aa
commit 565846f837
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 32 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
apps/browser/src/_locales/en/messages.json
View File

@ -2835,6 +2835,9 @@
"activeAccount": {
"message": "Active account"
},
"availableAccounts": {
"message": "Available accounts"
},
"accountLimitReached": {
"message": "Account limit reached. Log out of an account to add another."
},

19
apps/browser/src/auth/popup/account-switching/account-switcher.component.html
View File

@ -15,9 +15,20 @@
<div class="tw-p-2">
<div *ngIf="availableAccounts$ | async as availableAccounts">
<ul class="tw-grid tw-list-none tw-gap-2" role="listbox">
<li *ngFor="let availableAccount of availableAccounts" role="option">
<auth-account [account]="availableAccount" (loading)="loading = $event"></auth-account>
</li>
<ng-container
*ngFor="let availableAccount of availableAccounts; first as isFirst"
role="option"
>
<li *ngIf="availableAccount.isActive" class="tw-mb-4">
<auth-account [account]="availableAccount" (loading)="loading = $event"></auth-account>
</li>
<div *ngIf="isFirst" class="tw-uppercase tw-text-muted">
{{ "availableAccounts" | i18n }}
</div>
<li *ngIf="!availableAccount.isActive">
<auth-account [account]="availableAccount" (loading)="loading = $event"></auth-account>
</li>
</ng-container>
</ul>
<!--
If the user has not reached the account limit, the last 'availableAccount' will have an 'id' of
@ -58,7 +69,7 @@
</button>
<button
type="button"
class="account-switcher-row tw-mt-2 tw-flex tw-w-full tw-items-center tw-gap-3 tw-rounded-md tw-p-3"
class="account-switcher-row tw-flex tw-w-full tw-items-center tw-gap-3 tw-rounded-md tw-p-3"
(click)="lockAll()"
>
<i class="bwi bwi-lock tw-text-2xl" aria-hidden="true"></i>

2
apps/browser/src/auth/popup/account-switching/account.component.ts
View File

@ -42,7 +42,7 @@ export class AccountComponent {
}
get status() {
if (this.account.isActive && this.account.status !== AuthenticationStatus.Locked) {
if (this.account.isActive) {
return { text: this.i18nService.t("active"), icon: "bwi-check-circle" };
}

2
apps/browser/src/auth/popup/account-switching/current-account.component.html
View File

@ -25,7 +25,7 @@
<span class="tw-sr-only">{{ "switchAccounts" | i18n }}</span>
<bit-avatar
[text]="'&hellip;'"
[color]="'#175DDC'"
[color]="'#6795E8'"
size="small"
aria-hidden="true"
class="[&>img]:tw-block"

14
apps/browser/src/auth/popup/account-switching/services/account-switcher.service.ts
View File

@ -77,11 +77,21 @@ export class AccountSwitcherService {
options.push({
name: "Add account",
id: this.SPECIAL_ADD_ACCOUNT_ID,
isActive: activeAccount?.id == null,
isActive: false,
});
}
return options;
return options.sort((a, b) => {
// Active account is always first
if (a.isActive) {
return -1;
}
// "Add Account" button is always last
if (a.id === this.SPECIAL_ADD_ACCOUNT_ID) {
return 1;
}
});
}),
);