Adding profile component (de)activation logic

src/app/app-routing.module.ts

@@ -1,8 +1,8 @@
 import {NgModule} from '@angular/core';
 import {RouterModule, Routes} from '@angular/router';
-import { GamenightComponent } from './pages/gamenight/gamenight.component';
+import {GamenightComponent} from './pages/gamenight/gamenight.component';
 import {HomeComponent} from './pages/home/home.component';
-import { StatsComponent } from './pages/stats/stats.component';
+import {StatsComponent} from './pages/stats/stats.component';
 
 const routes: Routes = [
 	{path: '', component: HomeComponent, pathMatch: 'full'},

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/app.module.ts

@@ -3,11 +3,11 @@ import {BrowserModule} from '@angular/platform-browser';
 
 import {AppRoutingModule} from './app-routing.module';
 import {AppComponent} from './app.component';
-import { HomeComponent } from './pages/home/home.component';
-import { StatsComponent } from './pages/stats/stats.component';
-import { GamenightComponent } from './pages/gamenight/gamenight.component';
-import { HeaderComponent } from './components/header/header.component';
-import { ProfileComponent } from './components/profile/profile.component';
+import {HomeComponent} from './pages/home/home.component';
+import {StatsComponent} from './pages/stats/stats.component';
+import {GamenightComponent} from './pages/gamenight/gamenight.component';
+import {HeaderComponent} from './components/header/header.component';
+import {ProfileComponent} from './components/profile/profile.component';
 
 @NgModule({
 	declarations: [

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.spec.ts

@@ -1,6 +1,6 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
 
-import { HeaderComponent } from './header.component';
+import {HeaderComponent} from './header.component';
 
 describe('HeaderComponent', () => {
 	let component: HeaderComponent;
@@ -8,7 +8,7 @@ describe('HeaderComponent', () => {
 
 	beforeEach(async () => {
 		await TestBed.configureTestingModule({
-      declarations: [ HeaderComponent ]
+			declarations: [HeaderComponent]
 		})
 			.compileComponents();
 

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

@@ -16,8 +16,10 @@ export class HeaderComponent implements OnInit {
 	}
 
 	openProfile(): void {
-		console.log('Called');
-		this.showProfilePopover = !this.showProfilePopover;
+		this.showProfilePopover = true;
 	}
 
+	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.spec.ts

@@ -1,6 +1,6 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
 
-import { ProfileComponent } from './profile.component';
+import {ProfileComponent} from './profile.component';
 
 describe('ProfileComponent', () => {
 	let component: ProfileComponent;
@@ -8,7 +8,7 @@ describe('ProfileComponent', () => {
 
 	beforeEach(async () => {
 		await TestBed.configureTestingModule({
-      declarations: [ ProfileComponent ]
+			declarations: [ProfileComponent]
 		})
 			.compileComponents();
 

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/models/game.ts

@@ -1,6 +1,6 @@
 import {Player} from './player';
 import {Announcement} from './enums/announcement';
-import { Solo } from './enums/solo';
+import {Solo} from './enums/solo';
 
 export interface Game {
 	gameId: number;

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

@@ -1,6 +1,6 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
 
-import { GamenightComponent } from './gamenight.component';
+import {GamenightComponent} from './gamenight.component';
 
 describe('GamenightComponent', () => {
 	let component: GamenightComponent;
@@ -8,7 +8,7 @@ describe('GamenightComponent', () => {
 
 	beforeEach(async () => {
 		await TestBed.configureTestingModule({
-      declarations: [ GamenightComponent ]
+			declarations: [GamenightComponent]
 		})
 			.compileComponents();
 

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

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 
 @Component({
 	selector: 'app-gamenight',
@@ -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.spec.ts

@@ -1,6 +1,6 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
 
-import { HomeComponent } from './home.component';
+import {HomeComponent} from './home.component';
 
 describe('HomeComponent', () => {
 	let component: HomeComponent;
@@ -8,7 +8,7 @@ describe('HomeComponent', () => {
 
 	beforeEach(async () => {
 		await TestBed.configureTestingModule({
-      declarations: [ HomeComponent ]
+			declarations: [HomeComponent]
 		})
 			.compileComponents();
 

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

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {ActivatedRoute} from '@angular/router';
 
 @Component({
@@ -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.spec.ts

@@ -1,6 +1,6 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
 
-import { StatsComponent } from './stats.component';
+import {StatsComponent} from './stats.component';
 
 describe('StatsComponent', () => {
 	let component: StatsComponent;
@@ -8,7 +8,7 @@ describe('StatsComponent', () => {
 
 	beforeEach(async () => {
 		await TestBed.configureTestingModule({
-      declarations: [ StatsComponent ]
+			declarations: [StatsComponent]
 		})
 			.compileComponents();
 

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

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 
 @Component({
 	selector: 'app-stats',
@@ -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 {