import { Component, inject } from '@angular/core'; import { MenuItem } from 'primeng/api'; import { RouterModule } from '@angular/router'; import { CommonModule } from '@angular/common'; import { StyleClassModule } from 'primeng/styleclass'; import { AppConfigurator } from './app.configurator'; import { LayoutService } from '../service/layout.service'; import { Popover } from 'primeng/popover'; import Keycloak from 'keycloak-js'; import { KEYCLOAK_EVENT_SIGNAL } from 'keycloak-angular'; import { Button } from 'primeng/button'; import { Tag } from 'primeng/tag'; @Component({ selector: 'app-topbar', standalone: true, imports: [RouterModule, CommonModule, StyleClassModule, AppConfigurator, Popover, Button, Tag], template: `
@if (keycloak.authenticated) { @if(keycloak) { } @for (item of keycloak.realmAccess?.roles; track $index) { } } @if (!keycloak.authenticated) { }
` }) export class AppTopbar { items!: MenuItem[]; protected keycloak = inject(Keycloak); private keycloakSignal = inject(KEYCLOAK_EVENT_SIGNAL); public loggedIn: boolean = false; public firstName?: string = 'unknown'; public lastName?: string = 'unknown'; public email?: string = 'unknown'; constructor(public layoutService: LayoutService) { if (this.keycloak.authenticated) { // console.log('KC', this.keycloak); this.loggedIn = true; this.keycloak.loadUserProfile().then((userProfile) => { this.firstName = userProfile.firstName; this.lastName = userProfile.lastName; this.email = userProfile.email; }); } } logout() { this.keycloak.logout(); } toggleDarkMode() { this.layoutService.layoutConfig.update((state) => ({ ...state, darkTheme: !state.darkTheme })); } }