Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2024-09-23 03:22:50 +02:00
Code Issues Projects Releases Wiki Activity

[PM-9839] Extension - Safari - Disable Account Switching (#10364)

Browse Source 
* only show account switching when enableAccountSwitching is true

* update the title of the account switcher component

* only show "Lock All" when more than one account is present

* implement account switching restrictions on non-extension refresh page
This commit is contained in:
Nick Krantz 2024-08-01 16:11:52 -05:00 committed by GitHub
parent 95e813f238
commit 82d6b26b18
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 51 additions and 24 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

@ -4093,5 +4093,8 @@
},
"bitwardenNewLookDesc": {
"message": "It's easier and more intuitive than ever to autofill and search from the Vault tab. Take a look around!"
},
"accountActions": {
"message": "Account actions"
}
}

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

@ -1,6 +1,6 @@
<ng-container *ngIf="extensionRefreshFlag">
<popup-page [loading]="loading">
<popup-header slot="header" pageTitle="{{ 'switchAccounts' | i18n }}" showBackButton>
<popup-header slot="header" pageTitle="{{ 'accountActions' | i18n }}" showBackButton>
<ng-container slot="end">
<app-pop-out></app-pop-out>
<app-current-account></app-current-account>
@ -8,9 +8,9 @@
</popup-header>
<ng-container *ngIf="availableAccounts$ | async as availableAccounts">
<bit-section>
<bit-section [disableMargin]="!enableAccountSwitching">
<ng-container *ngFor="let availableAccount of availableAccounts; first as isFirst">
<div *ngIf="availableAccount.isActive" class="tw-mb-6">
<div *ngIf="availableAccount.isActive" [ngClass]="{ 'tw-mb-6': enableAccountSwitching }">
<auth-account
[account]="availableAccount"
[extensionRefreshFlag]="extensionRefreshFlag"
@ -18,17 +18,19 @@
></auth-account>
</div>
<bit-section-header *ngIf="isFirst">
<h2 bitTypography="h6" class="tw-font-semibold">{{ "availableAccounts" | i18n }}</h2>
</bit-section-header>
<ng-container *ngIf="enableAccountSwitching">
<bit-section-header *ngIf="isFirst">
<h2 bitTypography="h6" class="tw-font-semibold">{{ "availableAccounts" | i18n }}</h2>
</bit-section-header>
<div *ngIf="!availableAccount.isActive">
<auth-account
[account]="availableAccount"
[extensionRefreshFlag]="extensionRefreshFlag"
(loading)="loading = $event"
></auth-account>
</div>
<div *ngIf="!availableAccount.isActive">
<auth-account
[account]="availableAccount"
[extensionRefreshFlag]="extensionRefreshFlag"
(loading)="loading = $event"
></auth-account>
</div>
</ng-container>
</ng-container>
<!--
@ -78,7 +80,7 @@
{{ "logOut" | i18n }}
</button>
</bit-item>
<bit-item>
<bit-item *ngIf="showLockAll$ | async">
<button type="button" bit-item-content (click)="lockAll()">
<i slot="start" class="bwi bwi-lock tw-text-2xl tw-text-main" aria-hidden="true"></i>
{{ "lockAll" | i18n }}
@ -114,15 +116,17 @@
(loading)="loading = $event"
></auth-account>
</li>
<div *ngIf="isFirst" class="tw-uppercase tw-text-muted">
{{ "availableAccounts" | i18n }}
</div>
<li *ngIf="!availableAccount.isActive" role="option">
<auth-account
[account]="availableAccount"
(loading)="loading = $event"
></auth-account>
</li>
<ng-container *ngIf="enableAccountSwitching">
<div *ngIf="isFirst" class="tw-uppercase tw-text-muted">
{{ "availableAccounts" | i18n }}
</div>
<li *ngIf="!availableAccount.isActive" role="option">
<auth-account
[account]="availableAccount"
(loading)="loading = $event"
></auth-account>
</li>
</ng-container>
</ng-container>
</ul>
<!--
@ -166,6 +170,7 @@
type="button"
class="account-switcher-row tw-flex tw-w-full tw-items-center tw-gap-3 tw-rounded-md tw-p-3"
(click)="lockAll()"
*ngIf="showLockAll$ | async"
>
<i class="bwi bwi-lock tw-text-2xl" aria-hidden="true"></i>
{{ "lockAll" | i18n }}

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

@ -1,7 +1,7 @@
import { CommonModule, Location } from "@angular/common";
import { Component, OnDestroy, OnInit } from "@angular/core";
import { Router } from "@angular/router";
import { Subject, firstValueFrom, map, of, switchMap, takeUntil } from "rxjs";
import { Subject, firstValueFrom, map, of, startWith, switchMap, takeUntil } from "rxjs";
import { JslibModule } from "@bitwarden/angular/jslib.module";
import { VaultTimeoutSettingsService } from "@bitwarden/common/abstractions/vault-timeout/vault-timeout-settings.service";
@ -22,6 +22,7 @@ import {
SectionHeaderComponent,
} from "@bitwarden/components";
import { enableAccountSwitching } from "../../../platform/flags";
import { PopOutComponent } from "../../../platform/popup/components/pop-out.component";
import { HeaderComponent } from "../../../platform/popup/header.component";
import { PopupHeaderComponent } from "../../../platform/popup/layout/popup-header.component";
@ -57,6 +58,7 @@ export class AccountSwitcherComponent implements OnInit, OnDestroy {
loading = false;
activeUserCanLock = false;
extensionRefreshFlag = false;
enableAccountSwitching = true;
constructor(
private accountSwitcherService: AccountSwitcherService,
@ -87,7 +89,24 @@ export class AccountSwitcherComponent implements OnInit, OnDestroy {
),
);
readonly showLockAll$ = this.availableAccounts$.pipe(
startWith([]),
map((accounts) => accounts.filter((a) => !a.isActive)),
switchMap((accounts) => {
// If account switching is disabled, don't show the lock all button
// as only one account should be shown.
if (!enableAccountSwitching()) {
return of(false);
}
// When there are an inactive accounts provide the option to lock all accounts
// Note: "Add account" is counted as an inactive account, so check for more than one account
return of(accounts.length > 1);
}),
);
async ngOnInit() {
this.enableAccountSwitching = enableAccountSwitching();
this.extensionRefreshFlag = await this.configService.getFeatureFlag(
FeatureFlag.ExtensionRefresh,
);