79 lines
2.4 KiB
HTML
79 lines
2.4 KiB
HTML
<a
|
|
class="account-switcher"
|
|
(click)="toggle()"
|
|
cdkOverlayOrigin
|
|
#trigger="cdkOverlayOrigin"
|
|
[hidden]="!showSwitcher"
|
|
>
|
|
<app-avatar
|
|
[data]="activeAccountEmail"
|
|
size="25"
|
|
[circle]="true"
|
|
[fontSize]="14"
|
|
[dynamic]="true"
|
|
*ngIf="activeAccountEmail != null"
|
|
></app-avatar>
|
|
<span>{{ activeAccountEmail }}</span>
|
|
<i
|
|
class="fa"
|
|
aria-hidden="true"
|
|
[ngClass]="{ 'fa-chevron-down': !isOpen, 'fa-chevron-up': isOpen }"
|
|
></i>
|
|
</a>
|
|
|
|
<ng-template
|
|
cdkConnectedOverlay
|
|
[cdkConnectedOverlayOrigin]="trigger"
|
|
[cdkConnectedOverlayHasBackdrop]="true"
|
|
[cdkConnectedOverlayBackdropClass]="'cdk-overlay-transparent-backdrop'"
|
|
(backdropClick)="toggle()"
|
|
[cdkConnectedOverlayOpen]="showSwitcher && isOpen"
|
|
[cdkConnectedOverlayPositions]="overlayPostition"
|
|
cdkConnectedOverlayMinWidth="250px"
|
|
>
|
|
<div class="account-switcher-dropdown" [@transformPanel]="'open'">
|
|
<div class="accounts">
|
|
<a
|
|
*ngFor="let a of accounts | keyvalue"
|
|
class="account"
|
|
[ngClass]="{ active: a.value.profile.authenticationStatus == 'active' }"
|
|
href="#"
|
|
(mousedown)="switch(a.key)"
|
|
>
|
|
<app-avatar
|
|
[data]="a.value.profile.email"
|
|
size="25"
|
|
[circle]="true"
|
|
[fontSize]="14"
|
|
[dynamic]="true"
|
|
*ngIf="a.value.profile.email != null"
|
|
></app-avatar>
|
|
<div class="accountInfo">
|
|
<span class="email">{{ a.value.profile.email }}</span>
|
|
<span class="server" *ngIf="a.value.serverUrl != 'bitwarden.com'">{{
|
|
a.value.serverUrl
|
|
}}</span>
|
|
<span class="status">{{ a.value.profile.authenticationStatus }}</span>
|
|
</div>
|
|
<i
|
|
class="fa fa-unlock fa-2x text-muted"
|
|
*ngIf="a.value.profile.authenticationStatus == 'unlocked'"
|
|
></i>
|
|
<i
|
|
class="fa fa-lock fa-2x text-muted"
|
|
*ngIf="a.value.profile.authenticationStatus == 'locked'"
|
|
></i>
|
|
</a>
|
|
</div>
|
|
<div class="border"></div>
|
|
<ng-container *ngIf="numberOfAccounts < 4">
|
|
<a class="add" routerLink="/login" (click)="toggle()">
|
|
<i class="fa fa-plus" aria-hidden="true"></i> {{ "addAccount" | i18n }}
|
|
</a>
|
|
</ng-container>
|
|
<ng-container *ngIf="numberOfAccounts == 4">
|
|
<a class="accountLimitReached">{{ "accountSwitcherLimitReached" | i18n }} </a>
|
|
</ng-container>
|
|
</div>
|
|
</ng-template>
|