mirror of
https://github.com/bitwarden/browser
synced 2025-12-26 13:13:22 +00:00
90bad00cb5
* add server url to account switcher tab * add serverUrl to SwitcherAccount(s) * refactor serverUrl getter * cleanup urls * adjust styling * remove SwitcherAccount class * remove authenticationStatus from AccountProfile * rename to inactiveAccounts for clarity * move business logic to environmentService * use tokenService instead of stateService * cleanup type and comments * remove unused property * replace magic strings * remove unused function * minor refactoring * refactor to use environmentService insead of getServerConfig * use Utils.getHost() instead of Utils.getDomain() * create getHost() method * remove comment * get base url as fallback * resolve eslint error * Update apps/desktop/src/app/layout/account-switcher.component.html Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com> --------- Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>
111 lines
3.6 KiB
HTML
111 lines
3.6 KiB
HTML
<!-- Please remove this disable statement when editing this file! -->
|
|
<!-- eslint-disable @angular-eslint/template/button-has-type -->
|
|
<button
|
|
class="account-switcher"
|
|
(click)="toggle()"
|
|
cdkOverlayOrigin
|
|
#trigger="cdkOverlayOrigin"
|
|
[hidden]="!showSwitcher"
|
|
aria-haspopup="dialog"
|
|
>
|
|
<ng-container *ngIf="activeAccount?.email != null; else noActiveAccount">
|
|
<app-avatar
|
|
[text]="activeAccount.name"
|
|
[id]="activeAccount.id"
|
|
[color]="activeAccount.avatarColor"
|
|
[size]="25"
|
|
[circle]="true"
|
|
[fontSize]="14"
|
|
[dynamic]="true"
|
|
*ngIf="activeAccount.email != null"
|
|
aria-hidden="true"
|
|
></app-avatar>
|
|
<div class="active-account">
|
|
<div>{{ activeAccount.email }}</div>
|
|
<span>{{ activeAccount.server }}</span>
|
|
<span class="sr-only"> ({{ "switchAccount" | i18n }})</span>
|
|
</div>
|
|
</ng-container>
|
|
<ng-template #noActiveAccount>
|
|
<span>{{ "switchAccount" | i18n }}</span>
|
|
</ng-template>
|
|
<i
|
|
class="bwi"
|
|
aria-hidden="true"
|
|
[ngClass]="{ 'bwi-angle-down': !isOpen, 'bwi-angle-up': isOpen }"
|
|
></i>
|
|
</button>
|
|
|
|
<ng-template
|
|
cdkConnectedOverlay
|
|
[cdkConnectedOverlayOrigin]="trigger"
|
|
[cdkConnectedOverlayHasBackdrop]="true"
|
|
[cdkConnectedOverlayBackdropClass]="'cdk-overlay-transparent-backdrop'"
|
|
(backdropClick)="close()"
|
|
(detach)="close()"
|
|
[cdkConnectedOverlayOpen]="showSwitcher && isOpen"
|
|
[cdkConnectedOverlayPositions]="overlayPosition"
|
|
cdkConnectedOverlayMinWidth="250px"
|
|
>
|
|
<div
|
|
class="account-switcher-dropdown"
|
|
[@transformPanel]="'open'"
|
|
cdkTrapFocus
|
|
cdkTrapFocusAutoCapture
|
|
role="dialog"
|
|
aria-modal="true"
|
|
>
|
|
<div class="accounts" *ngIf="numberOfAccounts > 0">
|
|
<button
|
|
*ngFor="let account of inactiveAccounts | keyvalue"
|
|
class="account"
|
|
(click)="switch(account.key)"
|
|
>
|
|
<app-avatar
|
|
[text]="account.value.name ?? account.value.email"
|
|
[id]="account.value.id"
|
|
[size]="25"
|
|
[circle]="true"
|
|
[fontSize]="14"
|
|
[dynamic]="true"
|
|
[color]="account.value.avatarColor"
|
|
*ngIf="account.value.email != null"
|
|
aria-hidden="true"
|
|
></app-avatar>
|
|
<div class="accountInfo">
|
|
<span class="sr-only">{{ "switchAccount" | i18n }}: </span>
|
|
<span class="email" aria-hidden="true">{{ account.value.email }}</span>
|
|
<span class="server" aria-hidden="true">
|
|
<span class="sr-only"> / </span>{{ account.value.server }}
|
|
</span>
|
|
<span class="status" aria-hidden="true"
|
|
><span class="sr-only"> (</span
|
|
>{{
|
|
(account.value.authenticationStatus === authStatus.Unlocked ? "unlocked" : "locked")
|
|
| i18n
|
|
}}<span class="sr-only">)</span></span
|
|
>
|
|
</div>
|
|
<i
|
|
class="bwi bwi-2x text-muted"
|
|
[ngClass]="
|
|
account.value.authenticationStatus === authStatus.Unlocked ? 'bwi-unlock' : 'bwi-lock'
|
|
"
|
|
aria-hidden="true"
|
|
></i>
|
|
</button>
|
|
</div>
|
|
<ng-container *ngIf="activeAccount?.email != null">
|
|
<div class="border" *ngIf="numberOfAccounts > 0"></div>
|
|
<ng-container *ngIf="numberOfAccounts < 4">
|
|
<button type="button" class="add" (click)="addAccount()">
|
|
<i class="bwi bwi-plus" aria-hidden="true"></i> {{ "addAccount" | i18n }}
|
|
</button>
|
|
</ng-container>
|
|
<ng-container *ngIf="numberOfAccounts === 4">
|
|
<span class="accountLimitReached">{{ "accountSwitcherLimitReached" | i18n }} </span>
|
|
</ng-container>
|
|
</ng-container>
|
|
</div>
|
|
</ng-template>
|