Refactoring, adding some login logic stuff

src/app/components/header/header.component.html

@@ -1,8 +1,8 @@
 <div id="header">
 	<p id="header-title">Doppelkopf-Stats</p>
 	<span id="user-info">
-		<p>Paddy</p>
+		<p>{{getUserName()}}</p>
 		<img src="assets/images/user.png" alt="User Icon" (click)="openProfile()">
 	</span>
-	<app-profile (showProfilePopoverChange)="closeProfile()" *ngIf="showProfilePopover"></app-profile>
+	<app-profile (showProfilePopoverChange)="closeProfile()" *ngIf="showProfilePopover" [user]="this.user"></app-profile>
 </div>

src/app/components/header/header.component.ts

@@ -1,4 +1,6 @@
 import {Component, OnInit} from '@angular/core';
+import {User} from '../../models/user';
+import {StorageService} from '../../services/storage.service';
 
 @Component({
 	selector: 'app-header',
@@ -8,8 +10,10 @@ import {Component, OnInit} from '@angular/core';
 export class HeaderComponent implements OnInit {
 
 	showProfilePopover: boolean = false;
+	user?: User;
 
 	constructor() {
+		this.user = StorageService.getUserInfo();
 	}
 
 	ngOnInit(): void {
@@ -22,4 +26,8 @@ export class HeaderComponent implements OnInit {
 	closeProfile(): void {
 		this.showProfilePopover = false;
 	}
+
+	getUserName(): string {
+		return this.user ? this.user.firstName : 'Logged out';
+	}
 }

src/app/components/profile/profile.component.html

@@ -1,10 +1,10 @@
 <div id="profile-popover">
-	<div *ngIf="isLoggedIn">
-		<h2 class="heading">Hello, Paddy!</h2>
+	<div *ngIf="this.user">
+		<h2 class="heading">Hello, {{this.user!.firstName}}!</h2>
 		<p>You're successfully logged in.</p>
-		<p>Your id is: 1</p>
+		<p>Your id is: {{this.user!.firebonkId}}</p>
 	</div>
-	<div *ngIf="!isLoggedIn">
+	<div *ngIf="!this.user">
 		<h2 class="heading">Not logged in</h2>
 		<p>Please log in to continue</p>
 	</div>

src/app/components/profile/profile.component.ts

@@ -1,4 +1,5 @@
-import {Component, ElementRef, EventEmitter, HostListener, OnInit, Output} from '@angular/core';
+import {Component, ElementRef, EventEmitter, HostListener, Input, OnInit, Output} from '@angular/core';
+import {User} from '../../models/user';
 
 @Component({
 	selector: 'app-profile',
@@ -8,6 +9,7 @@ import {Component, ElementRef, EventEmitter, HostListener, OnInit, Output} from
 export class ProfileComponent implements OnInit {
 
 	initialClick = true;
+	@Input() user?: User;
 	@Output() showProfilePopoverChange = new EventEmitter<boolean>();
 
 	isLoggedIn = true;