Adding profile component (de)activation logic

src/app/app.component.ts

@@ -1,4 +1,4 @@
-import {Component, OnDestroy, OnInit} from '@angular/core';
+import {Component} from '@angular/core';
 import {Player} from './models/player';
 
 @Component({

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

@@ -4,5 +4,5 @@
 		<p>Paddy</p>
 		<img src="assets/images/user.png" alt="User Icon" (click)="openProfile()">
 	</span>
-	<app-profile *ngIf="showProfilePopover"></app-profile>
+	<app-profile (showProfilePopoverChange)="closeProfile()" *ngIf="showProfilePopover"></app-profile>
 </div>

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

@@ -16,8 +16,10 @@ export class HeaderComponent implements OnInit {
 	}
 
 	openProfile(): void {
-		console.log('Called');
+		this.showProfilePopover = true;
-		this.showProfilePopover = !this.showProfilePopover;
 	}
 
+	closeProfile(): void {
+		this.showProfilePopover = false;
+	}
 }

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

@@ -1,3 +1,11 @@
 <div id="profile-popover">
-	<p>Test</p>
+	<div *ngIf="isLoggedIn">
+		<h2 class="heading">Hello, Paddy!</h2>
+		<p>You're successfully logged in.</p>
+		<p>Your id is: 1</p>
+	</div>
+	<div *ngIf="!isLoggedIn">
+		<h2 class="heading">Not logged in</h2>
+		<p>Please log in to continue</p>
+	</div>
 </div>

src/app/components/profile/profile.component.scss

@@ -8,6 +8,11 @@
 	color: $text;
 	background-color: $secondary;
 	width: 15em;
-	height: 20em;
 	border-radius: 1em;
+	padding: 1em;
+}
+
+h2.heading {
+	text-align: center;
+	font-weight: bold;
 }

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

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, ElementRef, EventEmitter, HostListener, OnInit, Output} from '@angular/core';
 
 @Component({
 	selector: 'app-profile',
@@ -7,9 +7,32 @@ import { Component, OnInit } from '@angular/core';
 })
 export class ProfileComponent implements OnInit {
 
-  constructor() { }
+	initialClick = true;
+	@Output() showProfilePopoverChange = new EventEmitter<boolean>();
+
+	isLoggedIn = true;
+
+	constructor(private eRef: ElementRef) {
+	}
 
 	ngOnInit(): void {
 	}
 
+	/**
+	 * Used to close Profile component when user clicks outside the component
+	 * @param event
+	 */
+	@HostListener('document:click', ['$event'])
+	@HostListener('document:touchstart', ['$event'])
+	handleOutsideClick(event: any) {
+		if (this.initialClick) {
+			this.initialClick = false;
+			return;
+		}
+
+		if (!this.eRef.nativeElement.contains(event.target)) {
+			this.showProfilePopoverChange.emit(false);
+		}
+	}
+
 }

src/app/pages/gamenight/gamenight.component.ts

@@ -7,7 +7,8 @@ import { Component, OnInit } from '@angular/core';
 })
 export class GamenightComponent implements OnInit {
 
-  constructor() { }
+	constructor() {
+	}
 
 	ngOnInit(): void {
 	}

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

@@ -10,12 +10,13 @@ export class HomeComponent implements OnInit {
 
 	constructor(
 		private route: ActivatedRoute
-  ) { }
+	) {
+	}
 
 	ngOnInit(): void {
 		this.route.queryParams.subscribe(params => {
-		  console.table(params);
+			// Read params
-	  })
+		});
 	}
 
 }

src/app/pages/stats/stats.component.ts

@@ -7,7 +7,8 @@ import { Component, OnInit } from '@angular/core';
 })
 export class StatsComponent implements OnInit {
 
-  constructor() { }
+	constructor() {
+	}
 
 	ngOnInit(): void {
 	}

src/app/services/storage.service.ts

@@ -14,7 +14,7 @@ export class StorageService {
 			firstName: firstName,
 			token: token,
 			sessionKey: sessionKey
-		}
+		};
 	}
 
 	setUserInfo(user: User): void {