Show logged in user
MODIFY
src/app/pas-header/pas-header.component.html
src/app/pas-header/pas-header.component.html
<img class="logo" src="assets/ScheerPASLogo.svg">
<div class="rightMenu">
+ <div class="floatRight">
<mat-icon id="header-icon">desktop_windows</mat-icon>
<div id="app-header">API Developer Portal</div>
+ <mat-icon id="user-icon">person</mat-icon>
+ <div id="app-user">{{user}}</div>
<div><mat-icon id="logout" (click)="logout()">power_settings_new</mat-icon></div>
</div>
+ </div>
</nav>

MODIFY
src/app/pas-header/pas-header.component.scss
src/app/pas-header/pas-header.component.scss
@@ -20,22 +20,39 @@ nav {
}
.rightMenu {
+ display: flex;
float: right;
- width: 210px;
+ text-align: right;
+}
+
+.floatRight {
+ width: 100%;
+ display: flex;
+ float: right;
+ justify-content: right;
+}
+
+mat-icon {
+ margin-left: 15px;
+ margin-right: 2px;
}
#header-icon {
- float: left;
padding-right: 5px;
}
#app-header {
- float: left;
margin-top: 3px;
}
+#app-user {
+ margin-top: 3px;
+}
+
+#user-icon {
+}
+
#logout {
- float: right;
cursor: pointer;
color: darkred;
}

MODIFY
src/app/pas-header/pas-header.component.ts
src/app/pas-header/pas-header.component.ts
@@ -8,6 +8,8 @@ import { KeycloakService } from 'keycloak-angular';
})
export class PasHeaderComponent implements OnInit {
+ public user: string = this.keycloak.getKeycloakInstance().profile.username;
+
constructor(private keycloak: KeycloakService) { }
ngOnInit() {

GW-263: Show logged in user