feat: add login state to header
MODIFY
src/app/components/header/header.component.html
src/app/components/header/header.component.html
<h1 class="mt-40" #heroTitle>{{heroService.hero.title}}</h1>
<p #heroSubtitle>{{heroService.hero.subtitle}}</p>
</div>
- <div id="hero-btn">
- <button mat-raised-button color="primary">Register / Login</button>
+ <div id="hero-btn" *ngIf="!loggedIn">
+ <button mat-raised-button color="primary" routerLink="/account">Register / Login</button>
</div>
</div>
</div>

MODIFY
src/app/components/header/header.component.ts
src/app/components/header/header.component.ts
@@ -2,6 +2,7 @@ import {AfterViewInit, Component, ElementRef, EventEmitter, OnInit, Renderer2, V
import config from './../../../../config.json';
import {HeroService} from '../../services/hero/hero.service';
import {Data} from '@angular/router';
+import {KeycloakService} from "keycloak-angular";
@Component({
selector: 'app-header',
@@ -14,13 +15,18 @@ export class HeaderComponent implements AfterViewInit {
@ViewChild('heroSubtitle') heroSubtitle!: ElementRef;
@ViewChild('heroOverlay') heroOverlay!: ElementRef;
+ loggedIn = false;
+
constructor(private renderer: Renderer2,
- public heroService: HeroService) { }
+ public heroService: HeroService,
+ private keycloak: KeycloakService) { }
- ngAfterViewInit(): void {
+ async ngAfterViewInit() {
this.renderer.setStyle(this.heroImageDiv.nativeElement, 'background-image', 'url(\"' + this.heroService.hero.heroImgUrl + '\")');
this.renderer.setStyle(this.heroTitle.nativeElement, 'color', this.heroService.hero.fontColor.title);
this.renderer.setStyle(this.heroSubtitle.nativeElement, 'color', this.heroService.hero.fontColor.subtitle);
this.renderer.setStyle(this.heroOverlay.nativeElement, 'background-color', this.heroService.hero.overlayColor);
+
+ this.loggedIn = await this.keycloak.isLoggedIn();
}
}

feat: add login state to header