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);
}