mirror of
https://github.com/bitwarden/browser.git
synced 2025-01-22 21:21:35 +01:00
Remove v1 account switcher (#12577)
Remove conditional rendering for extensionRefresh feature flag Co-authored-by: Daniel James Smith <djsmith85@users.noreply.github.com>
This commit is contained in:
Daniel James Smith
GitHub
parent
1f00eb1bfb
commit
654eef1de2
@ -1,182 +1,78 @@
|
||||
<ng-container *ngIf="extensionRefreshFlag">
|
||||
<popup-page [loading]="loading">
|
||||
<popup-header slot="header" pageTitle="{{ 'accountActions' | i18n }}" showBackButton>
|
||||
<ng-container slot="end">
|
||||
<app-pop-out></app-pop-out>
|
||||
<app-current-account></app-current-account>
|
||||
</ng-container>
|
||||
</popup-header>
|
||||
|
||||
<ng-container *ngIf="availableAccounts$ | async as availableAccounts">
|
||||
<bit-section [disableMargin]="!enableAccountSwitching">
|
||||
<ng-container *ngFor="let availableAccount of availableAccounts; first as isFirst">
|
||||
<div *ngIf="availableAccount.isActive" [ngClass]="{ 'tw-mb-6': enableAccountSwitching }">
|
||||
<auth-account
|
||||
[account]="availableAccount"
|
||||
[extensionRefreshFlag]="extensionRefreshFlag"
|
||||
(loading)="loading = $event"
|
||||
></auth-account>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
|
||||
<!--
|
||||
If the user has not reached the account limit, the last 'availableAccount' will have an 'id' of
|
||||
'SPECIAL_ADD_ACCOUNT_ID'. Since we don't want to count this as one of the actual accounts,
|
||||
we check to make sure the 'id' of the last 'availableAccount' is not equal to 'SPECIAL_ADD_ACCOUNT_ID'
|
||||
-->
|
||||
<p
|
||||
class="tw-text-sm tw-text-muted"
|
||||
*ngIf="
|
||||
availableAccounts.length >= accountLimit &&
|
||||
availableAccounts[availableAccounts.length - 1].id !== specialAddAccountId
|
||||
"
|
||||
>
|
||||
{{ "accountLimitReached" | i18n }}
|
||||
</p>
|
||||
</bit-section>
|
||||
<popup-page [loading]="loading">
|
||||
<popup-header slot="header" pageTitle="{{ 'accountActions' | i18n }}" showBackButton>
|
||||
<ng-container slot="end">
|
||||
<app-pop-out></app-pop-out>
|
||||
<app-current-account></app-current-account>
|
||||
</ng-container>
|
||||
</popup-header>
|
||||
|
||||
<div class="tw-mt-8" *ngIf="currentAccount$ | async as currentAccount">
|
||||
<bit-section>
|
||||
<bit-section-header>
|
||||
<h2 bitTypography="h6" class="tw-font-semibold">
|
||||
{{ "options" | i18n }}
|
||||
</h2>
|
||||
</bit-section-header>
|
||||
<ng-container *ngIf="availableAccounts$ | async as availableAccounts">
|
||||
<bit-section [disableMargin]="!enableAccountSwitching">
|
||||
<ng-container *ngFor="let availableAccount of availableAccounts; first as isFirst">
|
||||
<div *ngIf="availableAccount.isActive" [ngClass]="{ 'tw-mb-6': enableAccountSwitching }">
|
||||
<auth-account [account]="availableAccount" (loading)="loading = $event"></auth-account>
|
||||
</div>
|
||||
|
||||
<bit-item>
|
||||
<button
|
||||
type="button"
|
||||
bit-item-content
|
||||
(click)="lock(currentAccount.id)"
|
||||
[disabled]="currentAccount.status === lockedStatus || !activeUserCanLock"
|
||||
[title]="!activeUserCanLock ? ('unlockMethodNeeded' | i18n) : ''"
|
||||
>
|
||||
<i slot="start" class="bwi bwi-lock tw-text-2xl tw-text-main" aria-hidden="true"></i>
|
||||
{{ "lockNow" | i18n }}
|
||||
</button>
|
||||
</bit-item>
|
||||
<bit-item>
|
||||
<button type="button" bit-item-content (click)="logOut(currentAccount.id)">
|
||||
<i
|
||||
slot="start"
|
||||
class="bwi bwi-sign-out tw-text-2xl tw-text-main"
|
||||
aria-hidden="true"
|
||||
></i>
|
||||
{{ "logOut" | i18n }}
|
||||
</button>
|
||||
</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 }}
|
||||
</button>
|
||||
</bit-item>
|
||||
</bit-section>
|
||||
</div>
|
||||
</popup-page>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="enableAccountSwitching">
|
||||
<bit-section-header *ngIf="isFirst">
|
||||
<h2 bitTypography="h6" class="tw-font-semibold">{{ "availableAccounts" | i18n }}</h2>
|
||||
</bit-section-header>
|
||||
|
||||
<ng-container *ngIf="!extensionRefreshFlag">
|
||||
<app-header>
|
||||
<div class="left">
|
||||
<button type="button" (click)="back()">{{ "close" | i18n }}</button>
|
||||
</div>
|
||||
<div class="center tw-font-bold">{{ "switchAccounts" | i18n }}</div>
|
||||
</app-header>
|
||||
<div *ngIf="!availableAccount.isActive">
|
||||
<auth-account [account]="availableAccount" (loading)="loading = $event"></auth-account>
|
||||
</div>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
|
||||
<main
|
||||
*ngIf="loading"
|
||||
class="tw-absolute tw-z-50 tw-box-border tw-flex tw-cursor-not-allowed tw-items-center tw-justify-center tw-bg-background tw-opacity-60"
|
||||
>
|
||||
<i class="bwi bwi-spinner bwi-2x bwi-spin" aria-hidden="true"></i>
|
||||
</main>
|
||||
<main>
|
||||
<div class="tw-p-2">
|
||||
<div *ngIf="availableAccounts$ | async as availableAccounts">
|
||||
<ul class="tw-grid tw-list-none tw-gap-2" role="listbox">
|
||||
<ng-container *ngFor="let availableAccount of availableAccounts; first as isFirst">
|
||||
<li *ngIf="availableAccount.isActive" class="tw-mb-4" 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>
|
||||
<!--
|
||||
<!--
|
||||
If the user has not reached the account limit, the last 'availableAccount' will have an 'id' of
|
||||
'SPECIAL_ADD_ACCOUNT_ID'. Since we don't want to count this as one of the actual accounts,
|
||||
we check to make sure the 'id' of the last 'availableAccount' is not equal to 'SPECIAL_ADD_ACCOUNT_ID'
|
||||
-->
|
||||
<p
|
||||
class="tw-text-sm tw-text-muted"
|
||||
*ngIf="
|
||||
availableAccounts.length >= accountLimit &&
|
||||
availableAccounts[availableAccounts.length - 1].id !== specialAddAccountId
|
||||
"
|
||||
>
|
||||
{{ "accountLimitReached" | i18n }}
|
||||
</p>
|
||||
</div>
|
||||
<p
|
||||
class="tw-text-sm tw-text-muted"
|
||||
*ngIf="
|
||||
availableAccounts.length >= accountLimit &&
|
||||
availableAccounts[availableAccounts.length - 1].id !== specialAddAccountId
|
||||
"
|
||||
>
|
||||
{{ "accountLimitReached" | i18n }}
|
||||
</p>
|
||||
</bit-section>
|
||||
</ng-container>
|
||||
|
||||
<div class="tw-mt-8" *ngIf="currentAccount$ | async as currentAccount">
|
||||
<div class="tw-mb-2 tw-uppercase tw-text-muted">{{ "options" | i18n }}</div>
|
||||
<div class="tw-grid tw-gap-2">
|
||||
<button
|
||||
type="button"
|
||||
class="account-switcher-row tw-flex tw-w-full tw-items-center tw-gap-3 tw-rounded-md tw-p-3 disabled:tw-cursor-not-allowed disabled:tw-border-text-muted/60 disabled:!tw-text-muted/60"
|
||||
(click)="lock(currentAccount.id)"
|
||||
[disabled]="currentAccount.status === lockedStatus || !activeUserCanLock"
|
||||
[title]="!activeUserCanLock ? ('unlockMethodNeeded' | i18n) : ''"
|
||||
>
|
||||
<i class="bwi bwi-lock tw-text-2xl" aria-hidden="true"></i>
|
||||
{{ "lockNow" | i18n }}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="account-switcher-row tw-flex tw-w-full tw-items-center tw-gap-3 tw-rounded-md tw-p-3"
|
||||
(click)="logOut(currentAccount.id)"
|
||||
>
|
||||
<i class="bwi bwi-sign-out tw-text-2xl" aria-hidden="true"></i>
|
||||
{{ "logOut" | i18n }}
|
||||
</button>
|
||||
<button
|
||||
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 }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</ng-container>
|
||||
<div class="tw-mt-8" *ngIf="currentAccount$ | async as currentAccount">
|
||||
<bit-section>
|
||||
<bit-section-header>
|
||||
<h2 bitTypography="h6" class="tw-font-semibold">
|
||||
{{ "options" | i18n }}
|
||||
</h2>
|
||||
</bit-section-header>
|
||||
|
||||
<bit-item>
|
||||
<button
|
||||
type="button"
|
||||
bit-item-content
|
||||
(click)="lock(currentAccount.id)"
|
||||
[disabled]="currentAccount.status === lockedStatus || !activeUserCanLock"
|
||||
[title]="!activeUserCanLock ? ('unlockMethodNeeded' | i18n) : ''"
|
||||
>
|
||||
<i slot="start" class="bwi bwi-lock tw-text-2xl tw-text-main" aria-hidden="true"></i>
|
||||
{{ "lockNow" | i18n }}
|
||||
</button>
|
||||
</bit-item>
|
||||
<bit-item>
|
||||
<button type="button" bit-item-content (click)="logOut(currentAccount.id)">
|
||||
<i slot="start" class="bwi bwi-sign-out tw-text-2xl tw-text-main" aria-hidden="true"></i>
|
||||
{{ "logOut" | i18n }}
|
||||
</button>
|
||||
</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 }}
|
||||
</button>
|
||||
</bit-item>
|
||||
</bit-section>
|
||||
</div>
|
||||
</popup-page>
|
||||
|
||||
@ -10,9 +10,7 @@ import { VaultTimeoutService } from "@bitwarden/common/abstractions/vault-timeou
|
||||
import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
|
||||
import { AuthService } from "@bitwarden/common/auth/abstractions/auth.service";
|
||||
import { AuthenticationStatus } from "@bitwarden/common/auth/enums/authentication-status";
|
||||
import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
|
||||
import { VaultTimeoutAction } from "@bitwarden/common/enums/vault-timeout-action.enum";
|
||||
import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
|
||||
import { UserId } from "@bitwarden/common/types/guid";
|
||||
import {
|
||||
AvatarModule,
|
||||
@ -25,7 +23,6 @@ import {
|
||||
|
||||
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";
|
||||
import { PopupPageComponent } from "../../../platform/popup/layout/popup-page.component";
|
||||
|
||||
@ -44,7 +41,6 @@ import { AccountSwitcherService } from "./services/account-switcher.service";
|
||||
AvatarModule,
|
||||
PopupPageComponent,
|
||||
PopupHeaderComponent,
|
||||
HeaderComponent,
|
||||
PopOutComponent,
|
||||
CurrentAccountComponent,
|
||||
AccountComponent,
|
||||
@ -58,7 +54,6 @@ export class AccountSwitcherComponent implements OnInit, OnDestroy {
|
||||
|
||||
loading = false;
|
||||
activeUserCanLock = false;
|
||||
extensionRefreshFlag = false;
|
||||
enableAccountSwitching = true;
|
||||
|
||||
constructor(
|
||||
@ -70,7 +65,6 @@ export class AccountSwitcherComponent implements OnInit, OnDestroy {
|
||||
private router: Router,
|
||||
private vaultTimeoutSettingsService: VaultTimeoutSettingsService,
|
||||
private authService: AuthService,
|
||||
private configService: ConfigService,
|
||||
private lockService: LockService,
|
||||
) {}
|
||||
|
||||
@ -109,9 +103,6 @@ export class AccountSwitcherComponent implements OnInit, OnDestroy {
|
||||
|
||||
async ngOnInit() {
|
||||
this.enableAccountSwitching = enableAccountSwitching();
|
||||
this.extensionRefreshFlag = await this.configService.getFeatureFlag(
|
||||
FeatureFlag.ExtensionRefresh,
|
||||
);
|
||||
|
||||
const availableVaultTimeoutActions = await firstValueFrom(
|
||||
this.vaultTimeoutSettingsService.availableVaultTimeoutActions$(),
|
||||
|
||||
@ -1,109 +1,44 @@
|
||||
<ng-container *ngIf="extensionRefreshFlag">
|
||||
<bit-item *ngIf="account.id !== specialAccountAddId">
|
||||
<button bit-item-content type="button" (click)="selectAccount(account.id)">
|
||||
<bit-avatar
|
||||
slot="start"
|
||||
[id]="account.id"
|
||||
[text]="account.name"
|
||||
[color]="account.avatarColor"
|
||||
size="small"
|
||||
aria-hidden="true"
|
||||
></bit-avatar>
|
||||
<bit-item *ngIf="account.id !== specialAccountAddId">
|
||||
<button bit-item-content type="button" (click)="selectAccount(account.id)">
|
||||
<bit-avatar
|
||||
slot="start"
|
||||
[id]="account.id"
|
||||
[text]="account.name"
|
||||
[color]="account.avatarColor"
|
||||
size="small"
|
||||
aria-hidden="true"
|
||||
></bit-avatar>
|
||||
|
||||
<span class="tw-sr-only" *ngIf="status.text === 'active'">
|
||||
{{ "activeAccount" | i18n }}:
|
||||
</span>
|
||||
<span class="tw-sr-only" *ngIf="status.text !== 'active'">
|
||||
{{ "switchToAccount" | i18n }}
|
||||
</span>
|
||||
<div class="tw-max-w-64 tw-truncate">
|
||||
{{ account.email }}
|
||||
</div>
|
||||
|
||||
<ng-container slot="secondary">
|
||||
<div class="tw-max-w-64 tw-truncate tw-text-sm">
|
||||
<span class="tw-sr-only">{{ "hostedAt" | i18n }}</span>
|
||||
{{ account.server }}
|
||||
</div>
|
||||
|
||||
<div class="tw-text-sm tw-italic" [attr.aria-hidden]="status.text === 'active'">
|
||||
<span class="tw-sr-only">(</span>
|
||||
<span [ngClass]="status.text === 'active' ? 'tw-font-bold tw-text-success' : ''">{{
|
||||
status.text
|
||||
}}</span>
|
||||
<span class="tw-sr-only">)</span>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<i slot="end" class="bwi tw-text-2xl" [ngClass]="status.icon" aria-hidden="true"></i>
|
||||
</button>
|
||||
</bit-item>
|
||||
|
||||
<bit-item *ngIf="account.id === specialAccountAddId">
|
||||
<button type="button" bit-item-content (click)="selectAccount(account.id)">
|
||||
<i slot="start" class="bwi bwi-plus tw-text-2xl tw-text-main" aria-hidden="true"></i>
|
||||
{{ account.name | i18n }}
|
||||
</button>
|
||||
</bit-item>
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngIf="!extensionRefreshFlag">
|
||||
<button
|
||||
*ngIf="account.id !== specialAccountAddId"
|
||||
type="button"
|
||||
class="account-switcher-row tw-flex tw-w-full tw-items-center tw-gap-3 tw-rounded-md tw-border-none tw-p-3"
|
||||
(click)="selectAccount(account.id)"
|
||||
>
|
||||
<div class="tw-flex-shrink-0">
|
||||
<bit-avatar
|
||||
[id]="account.id"
|
||||
[text]="account.name"
|
||||
[color]="account.avatarColor"
|
||||
size="small"
|
||||
aria-hidden="true"
|
||||
></bit-avatar>
|
||||
<span class="tw-sr-only" *ngIf="status.text === 'active'"> {{ "activeAccount" | i18n }}: </span>
|
||||
<span class="tw-sr-only" *ngIf="status.text !== 'active'">
|
||||
{{ "switchToAccount" | i18n }}
|
||||
</span>
|
||||
<div class="tw-max-w-64 tw-truncate">
|
||||
{{ account.email }}
|
||||
</div>
|
||||
<div class="tw-text-left">
|
||||
<span class="tw-sr-only" *ngIf="status.text === 'active'">
|
||||
{{ "activeAccount" | i18n }}:
|
||||
</span>
|
||||
<span class="tw-sr-only" *ngIf="status.text !== 'active'">
|
||||
{{ "switchToAccount" | i18n }}
|
||||
</span>
|
||||
<div class="tw-max-w-64 tw-truncate">
|
||||
{{ account.email }}
|
||||
</div>
|
||||
|
||||
<div class="account-switcher-row-details tw-max-w-64 tw-truncate tw-text-sm">
|
||||
<ng-container slot="secondary">
|
||||
<div class="tw-max-w-64 tw-truncate tw-text-sm">
|
||||
<span class="tw-sr-only">{{ "hostedAt" | i18n }}</span>
|
||||
{{ account.server }}
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="account-switcher-row-details tw-text-sm tw-italic"
|
||||
[attr.aria-hidden]="status.text === 'active'"
|
||||
>
|
||||
<div class="tw-text-sm tw-italic" [attr.aria-hidden]="status.text === 'active'">
|
||||
<span class="tw-sr-only">(</span>
|
||||
<span [ngClass]="status.text === 'active' ? 'tw-font-bold tw-text-success' : ''">{{
|
||||
status.text
|
||||
}}</span>
|
||||
<span class="tw-sr-only">)</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tw-ml-auto tw-flex-shrink-0">
|
||||
<i class="bwi tw-text-2xl" [ngClass]="status.icon" aria-hidden="true"></i>
|
||||
</div>
|
||||
</button>
|
||||
</ng-container>
|
||||
|
||||
<button
|
||||
*ngIf="account.id === specialAccountAddId"
|
||||
type="button"
|
||||
class="account-switcher-row tw-flex tw-w-full tw-items-center tw-gap-3 tw-rounded-md tw-border-none tw-p-3"
|
||||
(click)="selectAccount(account.id)"
|
||||
>
|
||||
<i class="bwi bwi-plus tw-text-2xl" aria-hidden="true"></i>
|
||||
<div>
|
||||
{{ account.name | i18n }}
|
||||
</div>
|
||||
<i slot="end" class="bwi tw-text-2xl" [ngClass]="status.icon" aria-hidden="true"></i>
|
||||
</button>
|
||||
</ng-container>
|
||||
</bit-item>
|
||||
|
||||
<bit-item *ngIf="account.id === specialAccountAddId">
|
||||
<button type="button" bit-item-content (click)="selectAccount(account.id)">
|
||||
<i slot="start" class="bwi bwi-plus tw-text-2xl tw-text-main" aria-hidden="true"></i>
|
||||
{{ account.name | i18n }}
|
||||
</button>
|
||||
</bit-item>
|
||||
|
||||
@ -19,7 +19,6 @@ import { AccountSwitcherService, AvailableAccount } from "./services/account-swi
|
||||
})
|
||||
export class AccountComponent {
|
||||
@Input() account: AvailableAccount;
|
||||
@Input() extensionRefreshFlag: boolean = false;
|
||||
@Output() loading = new EventEmitter<boolean>();
|
||||
|
||||
constructor(
|
||||
|
||||
Loading…
Reference in New Issue
Block a user