diff --git a/webapp/src/app/layout/main-layout/main-layout.component.html b/webapp/src/app/layout/main-layout/main-layout.component.html index 89fef42..a58ad32 100644 --- a/webapp/src/app/layout/main-layout/main-layout.component.html +++ b/webapp/src/app/layout/main-layout/main-layout.component.html @@ -65,6 +65,9 @@ Expert
+ @if (username()) { + {{ username() }} + } {{ userId }} @if (currentKey()) { {{ currentKey()!.keytoken_id }} diff --git a/webapp/src/app/layout/main-layout/main-layout.component.scss b/webapp/src/app/layout/main-layout/main-layout.component.scss index efb71fc..05e7f2e 100644 --- a/webapp/src/app/layout/main-layout/main-layout.component.scss +++ b/webapp/src/app/layout/main-layout/main-layout.component.scss @@ -85,6 +85,12 @@ align-items: flex-end; line-height: 1.3; + .username { + color: #333; + font-size: 13px; + font-weight: 600; + } + .user-id { color: #666; font-size: 13px; diff --git a/webapp/src/app/layout/main-layout/main-layout.component.ts b/webapp/src/app/layout/main-layout/main-layout.component.ts index 93f1b16..2c0c411 100644 --- a/webapp/src/app/layout/main-layout/main-layout.component.ts +++ b/webapp/src/app/layout/main-layout/main-layout.component.ts @@ -40,10 +40,12 @@ export class MainLayoutComponent implements OnInit { isCollapsed = signal(false); userId = this.authService.getUserId(); currentKey = signal(null); + username = signal(null); expertMode = this.settingsService.expertMode; ngOnInit(): void { this.loadCurrentKey(); + this.loadUser(); } private loadCurrentKey(): void { @@ -55,6 +57,15 @@ export class MainLayoutComponent implements OnInit { }); } + private loadUser(): void { + const userId = this.userId; + if (!userId) return; + + this.apiService.getUser(userId).subscribe({ + next: (user) => this.username.set(user.username) + }); + } + toggleCollapsed(): void { this.isCollapsed.update(v => !v); }