mirror of
https://github.com/bitwarden/browser
synced 2026-01-31 08:43:54 +00:00
split account-menu to new component
This commit is contained in:
William Martin
63
apps/web/src/app/layouts/header/account-menu.component.html
Normal file
63
apps/web/src/app/layouts/header/account-menu.component.html
Normal file
@@ -0,0 +1,63 @@
|
||||
@let account = account$ | async;
|
||||
@if (account) {
|
||||
<button
|
||||
type="button"
|
||||
[bitMenuTriggerFor]="accountMenu"
|
||||
class="tw-border-0 tw-bg-transparent tw-p-0 tw-shrink-0"
|
||||
>
|
||||
<dynamic-avatar [id]="account.id" [text]="account | userName"></dynamic-avatar>
|
||||
</button>
|
||||
|
||||
<bit-menu #accountMenu>
|
||||
<div class="tw-flex tw-min-w-52 tw-max-w-72 tw-flex-col">
|
||||
<div
|
||||
class="tw-flex tw-items-center tw-px-4 tw-py-1 tw-leading-tight tw-text-muted"
|
||||
appStopProp
|
||||
>
|
||||
<dynamic-avatar [id]="account.id" [text]="account | userName"></dynamic-avatar>
|
||||
<div class="tw-ml-2 tw-block tw-overflow-hidden tw-whitespace-nowrap">
|
||||
<span>{{ "loggedInAs" | i18n }}</span>
|
||||
<small class="tw-block tw-overflow-hidden tw-whitespace-nowrap">
|
||||
{{ account | userName }}
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if (selfHosted) {
|
||||
<bit-menu-divider></bit-menu-divider>
|
||||
<span class="tw-break-all tw-px-4 tw-py-1 tw-text-left tw-text-muted">
|
||||
{{ hostname }}
|
||||
</span>
|
||||
}
|
||||
|
||||
<bit-menu-divider></bit-menu-divider>
|
||||
|
||||
<a bitMenuItem routerLink="/settings/account">
|
||||
<i class="bwi bwi-fw bwi-user" aria-hidden="true"></i>
|
||||
{{ "accountSettings" | i18n }}
|
||||
</a>
|
||||
<a bitMenuItem href="https://bitwarden.com/help/" target="_blank" rel="noreferrer">
|
||||
<i class="bwi bwi-fw bwi-question-circle" aria-hidden="true"></i>
|
||||
{{ "getHelp" | i18n }}
|
||||
</a>
|
||||
<a bitMenuItem href="https://bitwarden.com/download/" target="_blank" rel="noreferrer">
|
||||
<i class="bwi bwi-fw bwi-download" aria-hidden="true"></i>
|
||||
{{ "getApps" | i18n }}
|
||||
</a>
|
||||
|
||||
<bit-menu-divider></bit-menu-divider>
|
||||
|
||||
@if (canLock$ | async) {
|
||||
<button bitMenuItem type="button" (click)="lock()">
|
||||
<i class="bwi bwi-fw bwi-lock" aria-hidden="true"></i>
|
||||
{{ "lockNow" | i18n }}
|
||||
</button>
|
||||
}
|
||||
|
||||
<button bitMenuItem type="button" (click)="logout()">
|
||||
<i class="bwi bwi-fw bwi-sign-out" aria-hidden="true"></i>
|
||||
{{ "logOut" | i18n }}
|
||||
</button>
|
||||
</div>
|
||||
</bit-menu>
|
||||
}
|
||||
41
apps/web/src/app/layouts/header/account-menu.component.ts
Normal file
41
apps/web/src/app/layouts/header/account-menu.component.ts
Normal file
@@ -0,0 +1,41 @@
|
||||
import { ChangeDetectionStrategy, Component, inject } from "@angular/core";
|
||||
import { map, Observable } from "rxjs";
|
||||
|
||||
import { Account, AccountService } from "@bitwarden/common/auth/abstractions/account.service";
|
||||
import {
|
||||
VaultTimeoutAction,
|
||||
VaultTimeoutSettingsService,
|
||||
} from "@bitwarden/common/key-management/vault-timeout";
|
||||
import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
|
||||
import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
|
||||
|
||||
import { DynamicAvatarComponent } from "../../components/dynamic-avatar.component";
|
||||
import { SharedModule } from "../../shared";
|
||||
|
||||
@Component({
|
||||
selector: "app-account-menu",
|
||||
templateUrl: "./account-menu.component.html",
|
||||
imports: [SharedModule, DynamicAvatarComponent],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
})
|
||||
export class AccountMenuComponent {
|
||||
private readonly platformUtilsService = inject(PlatformUtilsService);
|
||||
private readonly vaultTimeoutSettingsService = inject(VaultTimeoutSettingsService);
|
||||
private readonly messagingService = inject(MessagingService);
|
||||
private readonly accountService = inject(AccountService);
|
||||
|
||||
protected readonly account$: Observable<Account | null> = this.accountService.activeAccount$;
|
||||
protected readonly canLock$: Observable<boolean> = this.vaultTimeoutSettingsService
|
||||
.availableVaultTimeoutActions$()
|
||||
.pipe(map((actions) => actions.includes(VaultTimeoutAction.Lock)));
|
||||
protected readonly selfHosted = this.platformUtilsService.isSelfHost();
|
||||
protected readonly hostname = globalThis.location.hostname;
|
||||
|
||||
protected lock() {
|
||||
this.messagingService.send("lockVault");
|
||||
}
|
||||
|
||||
protected logout() {
|
||||
this.messagingService.send("logout");
|
||||
}
|
||||
}
|
||||
@@ -7,70 +7,7 @@
|
||||
|
||||
<ng-content></ng-content>
|
||||
<product-switcher></product-switcher>
|
||||
|
||||
@let account = account$ | async;
|
||||
@if (account) {
|
||||
<button
|
||||
type="button"
|
||||
[bitMenuTriggerFor]="accountMenu"
|
||||
class="tw-border-0 tw-bg-transparent tw-p-0 tw-shrink-0"
|
||||
>
|
||||
<dynamic-avatar [id]="account.id" [text]="account | userName"></dynamic-avatar>
|
||||
</button>
|
||||
|
||||
<bit-menu #accountMenu>
|
||||
<div class="tw-flex tw-min-w-52 tw-max-w-72 tw-flex-col">
|
||||
<div
|
||||
class="tw-flex tw-items-center tw-px-4 tw-py-1 tw-leading-tight tw-text-muted"
|
||||
appStopProp
|
||||
>
|
||||
<dynamic-avatar [id]="account.id" [text]="account | userName"></dynamic-avatar>
|
||||
<div class="tw-ml-2 tw-block tw-overflow-hidden tw-whitespace-nowrap">
|
||||
<span>{{ "loggedInAs" | i18n }}</span>
|
||||
<small class="tw-block tw-overflow-hidden tw-whitespace-nowrap">
|
||||
{{ account | userName }}
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if (selfHosted) {
|
||||
<bit-menu-divider></bit-menu-divider>
|
||||
<span class="tw-break-all tw-px-4 tw-py-1 tw-text-left tw-text-muted">
|
||||
{{ hostname }}
|
||||
</span>
|
||||
}
|
||||
|
||||
<bit-menu-divider></bit-menu-divider>
|
||||
|
||||
<a bitMenuItem routerLink="/settings/account">
|
||||
<i class="bwi bwi-fw bwi-user" aria-hidden="true"></i>
|
||||
{{ "accountSettings" | i18n }}
|
||||
</a>
|
||||
<a bitMenuItem href="https://bitwarden.com/help/" target="_blank" rel="noreferrer">
|
||||
<i class="bwi bwi-fw bwi-question-circle" aria-hidden="true"></i>
|
||||
{{ "getHelp" | i18n }}
|
||||
</a>
|
||||
<a bitMenuItem href="https://bitwarden.com/download/" target="_blank" rel="noreferrer">
|
||||
<i class="bwi bwi-fw bwi-download" aria-hidden="true"></i>
|
||||
{{ "getApps" | i18n }}
|
||||
</a>
|
||||
|
||||
<bit-menu-divider></bit-menu-divider>
|
||||
|
||||
@if (canLock$ | async) {
|
||||
<button bitMenuItem type="button" (click)="lock()">
|
||||
<i class="bwi bwi-fw bwi-lock" aria-hidden="true"></i>
|
||||
{{ "lockNow" | i18n }}
|
||||
</button>
|
||||
}
|
||||
|
||||
<button bitMenuItem type="button" (click)="logout()">
|
||||
<i class="bwi bwi-fw bwi-sign-out" aria-hidden="true"></i>
|
||||
{{ "logOut" | i18n }}
|
||||
</button>
|
||||
</div>
|
||||
</bit-menu>
|
||||
}
|
||||
<app-account-menu></app-account-menu>
|
||||
|
||||
<ng-container slot="title-suffix">
|
||||
<ng-content select="[slot=title-suffix]"></ng-content>
|
||||
|
||||
@@ -2,37 +2,27 @@ import { ChangeDetectionStrategy, Component, inject, input } from "@angular/core
|
||||
import { ActivatedRoute } from "@angular/router";
|
||||
import { map, Observable } from "rxjs";
|
||||
|
||||
import { Account, AccountService } from "@bitwarden/common/auth/abstractions/account.service";
|
||||
import {
|
||||
VaultTimeoutAction,
|
||||
VaultTimeoutSettingsService,
|
||||
} from "@bitwarden/common/key-management/vault-timeout";
|
||||
import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
|
||||
import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
|
||||
import { BannerModule, HeaderComponent } from "@bitwarden/components";
|
||||
|
||||
import { DynamicAvatarComponent } from "../../components/dynamic-avatar.component";
|
||||
import { SharedModule } from "../../shared";
|
||||
import { ProductSwitcherModule } from "../product-switcher/product-switcher.module";
|
||||
|
||||
import { AccountMenuComponent } from "./account-menu.component";
|
||||
|
||||
@Component({
|
||||
selector: "app-header",
|
||||
templateUrl: "./web-header.component.html",
|
||||
imports: [
|
||||
SharedModule,
|
||||
DynamicAvatarComponent,
|
||||
ProductSwitcherModule,
|
||||
BannerModule,
|
||||
HeaderComponent,
|
||||
AccountMenuComponent,
|
||||
],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
})
|
||||
export class WebHeaderComponent {
|
||||
private route = inject(ActivatedRoute);
|
||||
private platformUtilsService = inject(PlatformUtilsService);
|
||||
private vaultTimeoutSettingsService = inject(VaultTimeoutSettingsService);
|
||||
private messagingService = inject(MessagingService);
|
||||
private accountService = inject(AccountService);
|
||||
|
||||
/**
|
||||
* Custom title that overrides the route data `titleId`
|
||||
@@ -51,18 +41,4 @@ export class WebHeaderComponent {
|
||||
};
|
||||
}),
|
||||
);
|
||||
protected account$: Observable<Account | null> = this.accountService.activeAccount$;
|
||||
protected canLock$: Observable<boolean> = this.vaultTimeoutSettingsService
|
||||
.availableVaultTimeoutActions$()
|
||||
.pipe(map((actions) => actions.includes(VaultTimeoutAction.Lock)));
|
||||
protected readonly selfHosted = this.platformUtilsService.isSelfHost();
|
||||
protected readonly hostname = globalThis.location.hostname;
|
||||
|
||||
protected lock() {
|
||||
this.messagingService.send("lockVault");
|
||||
}
|
||||
|
||||
protected logout() {
|
||||
this.messagingService.send("logout");
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user