diff --git a/src/app/header/header-dropdown/header-dropdown.component.html b/src/app/header/header-dropdown/header-dropdown.component.html index db4f94c..83a5e37 100644 --- a/src/app/header/header-dropdown/header-dropdown.component.html +++ b/src/app/header/header-dropdown/header-dropdown.component.html @@ -1,9 +1,9 @@ -
@@ -46,4 +46,4 @@
- \ No newline at end of file + diff --git a/src/app/header/header-dropdown/header-dropdown.component.ts b/src/app/header/header-dropdown/header-dropdown.component.ts index 256b09e..f1ac932 100644 --- a/src/app/header/header-dropdown/header-dropdown.component.ts +++ b/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 'src/app/shared/model/user/user.model'; +import {User} from "../../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 = res; } else { diff --git a/src/app/header/header-slider/nav-slider/nav-slider.component.css b/src/app/header/header-slider/nav-slider/nav-slider.component.css index 5e691cb..2237b90 100644 --- a/src/app/header/header-slider/nav-slider/nav-slider.component.css +++ b/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; - width: 45px; + height: 50px; + width: 50px; } .profile .profile-btn fa-icon { - font-size: 25px; -} \ No newline at end of file + font-size: 28px; +} diff --git a/src/app/header/header-slider/nav-slider/nav-slider.component.html b/src/app/header/header-slider/nav-slider/nav-slider.component.html index 5752de2..b87d00c 100644 --- a/src/app/header/header-slider/nav-slider/nav-slider.component.html +++ b/src/app/header/header-slider/nav-slider/nav-slider.component.html @@ -16,7 +16,13 @@ #profile>
- + + Profile Picture
- \ No newline at end of file + diff --git a/src/app/header/header-slider/nav-slider/nav-slider.component.ts b/src/app/header/header-slider/nav-slider/nav-slider.component.ts index f5a820e..5b702ac 100644 --- a/src/app/header/header-slider/nav-slider/nav-slider.component.ts +++ b/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 = res; + } else { + this.loggedUser = null; + } + } + ) + } + + ngOnDestroy(): void { + this.userSubscription.unsubscribe(); + } + onProfileButtonClicked() { this.profileButtonClicked.emit(); } diff --git a/src/app/header/header.component.css b/src/app/header/header.component.css index 203049c..3aa86b5 100644 --- a/src/app/header/header.component.css +++ b/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; - width: 45px; + height: 50px; + 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; } -} \ No newline at end of file +} diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html index 38c38d8..51edca0 100644 --- a/src/app/header/header.component.html +++ b/src/app/header/header.component.html @@ -16,11 +16,18 @@
- + + Profile Picture
-
- +
- @@ -57,14 +64,3 @@
- - \ No newline at end of file diff --git a/src/app/header/header.component.ts b/src/app/header/header.component.ts index a21ae99..84086aa 100644 --- a/src/app/header/header.component.ts +++ b/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; private signupComponent!: ComponentRef; - 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 = 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 { } -} \ No newline at end of file +} diff --git a/src/app/shared/model/httpError/httpError.model-ti.ts b/src/app/shared/model/httpError/httpError.model-ti.ts index f2008f3..9efdffa 100644 --- a/src/app/shared/model/httpError/httpError.model-ti.ts +++ b/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; diff --git a/src/app/shared/model/httpError/httpErrorChecker.ts b/src/app/shared/model/httpError/httpErrorChecker.ts index 97a8283..5c707b9 100644 --- a/src/app/shared/model/httpError/httpErrorChecker.ts +++ b/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']; -export default HttpErrorChecker; \ No newline at end of file +const HttpErrorChecker = createCheckers(HttpError)['HttpError']; +export default HttpErrorChecker; diff --git a/src/app/shared/model/user/user.checker.ts b/src/app/shared/model/user/user.checker.ts index d51a62b..ec4d3db 100644 --- a/src/app/shared/model/user/user.checker.ts +++ b/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 UserTI from "./user.model-ti"; +import User from "./user.model-ti"; +import Token from "../token/token.model-ti"; -const UserChecker = createCheckers(UserTI, TokenTI)['User']; -export default UserChecker; \ No newline at end of file +const UserChecker = createCheckers(User, Token)['User']; +export default UserChecker; diff --git a/src/app/shared/model/user/user.model-ti.ts b/src/app/shared/model/user/user.model-ti.ts index 9568695..f806613 100644 --- a/src/app/shared/model/user/user.model-ti.ts +++ b/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([], { - "authority": "string", - }))), + "roles": t.opt(t.array("string")), }); -const UserTI: t.ITypeSuite = { +const exportedTypeSuite: t.ITypeSuite = { User, }; -export default UserTI; \ No newline at end of file +export default exportedTypeSuite; diff --git a/src/app/shared/model/user/user.model.ts b/src/app/shared/model/user/user.model.ts index a75c9c7..fc43e94 100644 --- a/src/app/shared/model/user/user.model.ts +++ b/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, validateAccessToken?: () => Token | undefined; -}; \ No newline at end of file +};