Initial Implementation of Profile Pictures

src/app/header/header-dropdown/header-dropdown.component.html

@@ -1,9 +1,9 @@
-<div 
+<div
-    class="dropdown" 
+    class="dropdown"
-    appClickedOutside 
+    appClickedOutside
-    (clickOutside)="onClickedOutside()" 
+    (clickOutside)="onClickedOutside()"
     [includeClickedOutside]="[management]"
-    [ignoreElementList]="ignoreClickOutside" 
+    [ignoreElementList]="ignoreClickOutside"
     [@dropdownState]="dropDownState"
     (@dropdownState.start)="$event.element.style.display = 'block'"
     (@dropdownState.done)="$event.element.style.display = (state ? 'block' : 'none')">
@@ -46,4 +46,4 @@
             </li>
         </ul>
     </div>
-</div>
+</div>

src/app/header/header-dropdown/header-dropdown.component.ts

@@ -1,10 +1,10 @@
 import { animate, state, style, transition, trigger } from '@angular/animations';
 import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
 import { faEdit, faQuestionCircle, faSignOutAlt, faUser } from '@fortawesome/free-solid-svg-icons';
-import { Subscription, timeout } from 'rxjs';
+import { Subscription } from 'rxjs';
 import { AuthService } from 'src/app/shared/auth/auth.service';
-import UserChecker from 'src/app/shared/model/user/user.checker';
+import {User} from "../../shared/model/user/user.model";
-import { User } from 'src/app/shared/model/user/user.model';
+import UserChecker from "../../shared/model/user/user.checker";
 
 @Component({
     selector: 'app-header-dropdown',
@@ -24,7 +24,7 @@ import { User } from 'src/app/shared/model/user/user.model';
     ]
 })
 export class HeaderDropdownComponent implements OnInit, OnDestroy {
-    
+
     userIcon = faUser;
 
     editIcon = faEdit;
@@ -57,6 +57,7 @@ export class HeaderDropdownComponent implements OnInit, OnDestroy {
     ngOnInit(): void {
         this.userSubscription = this.authService.authSubject.subscribe(
             res => {
+                console.log(UserChecker.test(res));
                 if (res && UserChecker.test(res)) {
                     this.user = <User>res;
                 } else {

src/app/header/header-slider/nav-slider/nav-slider.component.css

@@ -56,6 +56,11 @@
     width: 45px;
 }
 
+.profile-picture {
+    border-radius: 50%;
+    border: 2px solid #ffffff;
+}
+
 .profile .profile-btn {
     display: flex;
     border: 5px solid #ffffff;
@@ -63,10 +68,10 @@
     justify-content: center;
     align-items: center;
     color: #ffffff;
-    height: 45px;
+    height: 50px;
-    width: 45px;
+    width: 50px;
 }
 
 .profile .profile-btn fa-icon {
-    font-size: 25px;
+    font-size: 28px;
-}
+}

src/app/header/header-slider/nav-slider/nav-slider.component.html

@@ -16,7 +16,13 @@
     #profile>
         <div class="profile-btn"
         (click)="onProfileButtonClicked()">
-            <fa-icon class="fas fa-user" [icon]="userIcon"></fa-icon>
+            <fa-icon *ngIf="!loggedUser || !(loggedUser.profilePictureUrl)"
+                     class="fas fa-user" [icon]="userIcon"></fa-icon>
+            <img *ngIf="!!loggedUser && !!(loggedUser.profilePictureUrl)"
+                 class="profile-picture"
+                 [ngSrc]="loggedUser.profilePictureUrl"
+                 width="50" height="50"
+                 alt="Profile Picture" priority/>
         </div>
     </div>
-</div>
+</div>

src/app/header/header-slider/nav-slider/nav-slider.component.ts

@@ -1,14 +1,18 @@
-import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+import {Component, EventEmitter, OnDestroy, OnInit, Output} from '@angular/core';
 import { faUser } from '@fortawesome/free-solid-svg-icons';
 import { SliderItemComponent } from 'src/app/shared/components/slider-item/slider-item.component';
+import UserChecker from "../../../shared/model/user/user.checker";
+import {User} from "../../../shared/model/user/user.model";
+import {AuthService} from "../../../shared/auth/auth.service";
+import {Subscription} from "rxjs";
 
 @Component({
     selector: 'app-nav-slider',
     templateUrl: './nav-slider.component.html',
     styleUrls: ['./nav-slider.component.css']
 })
-export class NavSliderComponent extends SliderItemComponent {
+export class NavSliderComponent extends SliderItemComponent implements OnInit, OnDestroy {
-    
+
     userIcon = faUser;
 
     navLink = [
@@ -18,13 +22,34 @@ export class NavSliderComponent extends SliderItemComponent {
         { page: "About", link: "/home" }
     ]
 
+    loggedUser!: User | null;
+
+    private userSubscription!: Subscription;
+
     @Output()
         profileButtonClicked = new EventEmitter();
 
-    constructor() {
+    constructor(private authService: AuthService) {
         super();
     }
 
+    ngOnInit(): void {
+        this.userSubscription = this.authService.authSubject.subscribe(
+            res => {
+                console.log(UserChecker.test(res));
+                if (res && UserChecker.test(res)) {
+                    this.loggedUser = <User>res;
+                } else {
+                    this.loggedUser = null;
+                }
+            }
+        )
+    }
+
+    ngOnDestroy(): void {
+        this.userSubscription.unsubscribe();
+    }
+
     onProfileButtonClicked() {
         this.profileButtonClicked.emit();
     }

src/app/header/header.component.css

@@ -104,14 +104,14 @@ app-header-slider {
         all: unset;
         width: 50%;
     }
-    
+
     .link-container {
         display: flex;
         justify-content: space-around;
         padding: 0;
         margin: 0;
     }
-    
+
     .link-container li {
         display: flex;
         justify-content: center;
@@ -119,7 +119,7 @@ app-header-slider {
         color: #ffffff;
         text-decoration: none;
     }
-    
+
     .link-container li a {
         font-family: 'Montserrat', sans-serif;
         text-decoration: none;
@@ -136,6 +136,11 @@ app-header-slider {
         cursor: pointer;
     }
 
+    .profile-picture {
+        border-radius: 50%;
+        border: 2px solid #ffffff;
+    }
+
     .profile .profile-btn {
         display: flex;
         border: 5px solid #ffffff;
@@ -143,8 +148,8 @@ app-header-slider {
         justify-content: center;
         align-items: center;
         color: #ffffff;
-        height: 45px;
+        height: 50px;
-        width: 45px;
+        width: 50px;
     }
 
     .profile .dropdown {
@@ -153,7 +158,7 @@ app-header-slider {
     }
 
     .profile .profile-btn fa-icon {
-        font-size: 25px;
+        font-size: 28px;
     }
 
     .burger-container {
@@ -176,4 +181,4 @@ app-header-slider {
         opacity: 0;
     }
 
-}
+}

src/app/header/header.component.html

@@ -16,11 +16,18 @@
 
         <div class="profile" #profileDropdown>
             <div class="profile-btn" (click)="toogleProfileDropdown()" #profileBtn>
-                <fa-icon class="fas fa-user" [icon]="userIcon"></fa-icon>
+                <fa-icon *ngIf="!loggedUser || !(loggedUser.profilePictureUrl)"
+                         class="fas fa-user" [icon]="userIcon"></fa-icon>
+                <img *ngIf="!!loggedUser && !!(loggedUser.profilePictureUrl)"
+                     class="profile-picture"
+                     [ngSrc]="loggedUser.profilePictureUrl"
+                     width="50" height="50"
+                     alt="Profile Picture" priority/>
             </div>
-            <app-header-dropdown 
+
-                class="dropdown" 
+            <app-header-dropdown
-                (clickOutside)="closeDropdown()" 
+                class="dropdown"
+                (clickOutside)="closeDropdown()"
                 [ignoreClickOutside]="[profileBtn]"
                 [state]="profileDropdownState"
                 (loginPopupState)="loginPopupStateChange($event)"
@@ -43,12 +50,12 @@
             </app-nav-slider>
         </app-header-slider>
     </div>
-    
+
     <div #user>
         <app-header-slider
         [(state)]="userSliderStatus"
         [ignoreClickOutside]="[header, nav]">
-            <app-user-slider 
+            <app-user-slider
                 [state]="userSliderStatus"
                 (loginPopupState)="loginPopupStateChange($event)"
                 (signupPopupState)="signupPopupStateChange($event)">
@@ -57,14 +64,3 @@
     </div>
 </div>
 <div class="header-spacer"></div>
-
-<!-- <app-login 
-*ngIf="loginPopupState"
-[(state)]="loginPopupState"
-[ignoreClickOutside]="[profileBtn, profileDropdown, user]">
-</app-login>
-
-<app-signup
-[(state)]="signupPopupState"
-[ignoreClickOutside]="[profileBtn, profileDropdown, user]">
-</app-signup> -->

src/app/header/header.component.ts

@@ -1,14 +1,18 @@
-import { Component, ComponentRef, ElementRef, OnInit, ViewChild, ViewContainerRef } from '@angular/core';
+import {Component, ComponentRef, ElementRef, OnDestroy, OnInit, ViewChild, ViewContainerRef} from '@angular/core';
 import { faUser } from '@fortawesome/free-solid-svg-icons';
 import { LoginComponent } from './header-popup/login/login.component';
 import { SignupComponent } from './header-popup/signup/signup.component';
+import {AuthService} from "../shared/auth/auth.service";
+import UserChecker from "../shared/model/user/user.checker";
+import {User} from "../shared/model/user/user.model";
+import {Subscription} from "rxjs";
 
 @Component({
     selector: 'app-header',
     templateUrl: './header.component.html',
     styleUrls: ['./header.component.css']
 })
-export class HeaderComponent {
+export class HeaderComponent implements OnInit, OnDestroy {
 
     userIcon = faUser;
 
@@ -21,18 +25,39 @@ export class HeaderComponent {
 
     @ViewChild('profileBtn')
         profileBtnElementRef!: ElementRef;
-    
+
     @ViewChild('profileDropdown')
         profileDropdownElementRef!: ElementRef;
-    
+
     @ViewChild('user')
         userElementRef!: ElementRef;
 
+    loggedUser!: User | null;
+
+    private userSubscription!: Subscription;
+
     private loginComponent!: ComponentRef<LoginComponent>;
 
     private signupComponent!: ComponentRef<SignupComponent>;
 
-    constructor(private viewContainerRef: ViewContainerRef) { }
+    constructor(private viewContainerRef: ViewContainerRef, private authService: AuthService) { }
+
+    ngOnInit(): void {
+        this.userSubscription = this.authService.authSubject.subscribe(
+            res => {
+                console.log(UserChecker.test(res));
+                if (res && UserChecker.test(res)) {
+                    this.loggedUser = <User>res;
+                } else {
+                    this.loggedUser = null;
+                }
+            }
+        )
+    }
+
+    ngOnDestroy(): void {
+        this.userSubscription.unsubscribe();
+    }
 
 
     public toogleProfileDropdown(): void {
@@ -63,7 +88,7 @@ export class HeaderComponent {
         if (this.userSliderStatus) {
             this.userSliderStatus = false;
         } else {
-            this.navSliderStatus = false;   
+            this.navSliderStatus = false;
         }
     }
 
@@ -142,4 +167,4 @@ export class HeaderComponent {
 
     }
 
-}
+}

src/app/shared/model/httpError/httpError.model-ti.ts

@@ -12,7 +12,7 @@ export const HttpError = t.iface([], {
     "timestamp": "string",
 });
 
-const HttpErrorTI: t.ITypeSuite = {
+const exportedTypeSuite: t.ITypeSuite = {
     HttpError,
 };
-export default HttpErrorTI;
+export default exportedTypeSuite;

src/app/shared/model/httpError/httpErrorChecker.ts

@@ -1,5 +1,5 @@
 import { createCheckers } from "ts-interface-checker";
-import HttpErrorTI from "./httpError.model-ti";
+import HttpError from "./httpError.model-ti";
 
-const HttpErrorChecker = createCheckers(HttpErrorTI)['HttpError'];
+const HttpErrorChecker = createCheckers(HttpError)['HttpError'];
-export default HttpErrorChecker;
+export default HttpErrorChecker;

src/app/shared/model/user/user.checker.ts

@@ -1,6 +1,6 @@
 import { createCheckers } from "ts-interface-checker";
-import TokenTI from "../token/token.model-ti";
+import User from "./user.model-ti";
-import UserTI from "./user.model-ti";
+import Token from "../token/token.model-ti";
 
-const UserChecker = createCheckers(UserTI, TokenTI)['User'];
+const UserChecker = createCheckers(User, Token)['User'];
-export default UserChecker;
+export default UserChecker;

src/app/shared/model/user/user.model-ti.ts

@@ -10,14 +10,13 @@ export const User = t.iface([], {
     "email": t.opt("string"),
     "username": "string",
     "password": t.opt("string"),
+    "profilePictureUrl": t.opt("string"),
     "accessToken": t.opt("Token"),
     "refreshToken": t.opt("Token"),
-    "authorities": t.opt(t.array(t.iface([], {
+    "roles": t.opt(t.array("string")),
-        "authority": "string",
-    }))),
 });
 
-const UserTI: t.ITypeSuite = {
+const exportedTypeSuite: t.ITypeSuite = {
     User,
 };
-export default UserTI;
+export default exportedTypeSuite;

src/app/shared/model/user/user.model.ts

@@ -6,8 +6,9 @@ export interface User {
     email?: string,
     username: string,
     password?: string,
+    profilePictureUrl?: string,
     accessToken?: Token,
     refreshToken?: Token,
-    authorities?: Array<{authority: string}>,
+    roles?: Array<string>,
     validateAccessToken?: () => Token | undefined;
-};
+};