Refactoring, adding some login logic stuff

src/app/app.component.ts

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {Player} from './models/player';
+import {Player} from './models/doppelkopf/player';
 
 @Component({
 	selector: 'app-root',

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">
+	<div *ngIf="this.user">
-		<h2 class="heading">Hello, Paddy!</h2>
+		<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;

src/app/pages/home/home.component.ts

@@ -1,5 +1,8 @@
 import {Component, OnInit} from '@angular/core';
 import {ActivatedRoute} from '@angular/router';
+import {User} from '../../models/user';
+import {ApiService} from '../../services/api.service';
+import {StorageService} from '../../services/storage.service';
 
 @Component({
 	selector: 'app-home',
@@ -14,9 +17,25 @@ export class HomeComponent implements OnInit {
 	}
 
 	ngOnInit(): void {
-		this.route.queryParams.subscribe(params => {
+		this.authenticateUser();
-			// Read params
-		});
 	}
 
+	/**
+	 * Reads authentication details from query parameters and tries to authenticate the user with the API.
+	 * @private
+	 */
+	private authenticateUser() {
+		this.route.queryParams.subscribe(params => {
+			let user: User = {
+				firebonkId: params['firebonkId'],
+				uuid: '',
+				firstName: params['firstName'],
+				token: params['token'],
+				sessionKey: ''
+			};
+
+			let authenticatedUser = ApiService.performAuthentication(user);
+			StorageService.setUserInfo(authenticatedUser);
+		});
+	}
 }

src/app/services/api.service.ts

@@ -0,0 +1,13 @@
+import {User} from '../models/user';
+
+export class ApiService {
+	static apiUrl = 'https://api.plutodev.de/fbcards/';
+
+	/**
+	 * Sends user info to API to retrieve a session key.
+	 * @param user
+	 */
+	static performAuthentication(user: User): User {
+		return user;
+	}
+}

src/app/services/storage.service.ts

@@ -1,7 +1,11 @@
 import {User} from '../models/user';
 
 export class StorageService {
-	getUserInfo(): User {
+	static getUserInfo(): User | undefined {
+		if(localStorage.getItem('user_loggedIn') !== '1') {
+			return undefined;
+		}
+
 		const firebonkId = parseInt((localStorage.getItem('user_firebonkId') ?? '-1'), 10);
 		const uuid = localStorage.getItem('user_uuid') ?? '';
 		const firstName = localStorage.getItem('user_firstName') ?? '';
@@ -17,7 +21,8 @@ export class StorageService {
 		};
 	}
 
-	setUserInfo(user: User): void {
+	static setUserInfo(user: User): void {
+		localStorage.setItem('user_loggedIn', '1');
 		localStorage.setItem('user_firebonkId', String(user.firebonkId));
 		localStorage.setItem('user_uuid', String(user.uuid));
 		localStorage.setItem('user_firstName', String(user.firstName));