diff options
Diffstat (limited to 'src/DevHive.Angular')
5 files changed, 104 insertions, 58 deletions
diff --git a/src/DevHive.Angular/src/app/components/feed/feed.component.html b/src/DevHive.Angular/src/app/components/feed/feed.component.html index ffbad14..03ce497 100644 --- a/src/DevHive.Angular/src/app/components/feed/feed.component.html +++ b/src/DevHive.Angular/src/app/components/feed/feed.component.html @@ -1,4 +1,9 @@ -<div id="feed-page"> +<!-- TODO: replace with loading component --> +<div id="content" *ngIf="!dataArrived"> + Loading... +</div> + +<div id="feed-page" *ngIf="dataArrived"> <nav id="profile-bar" class="rounded-border"> <img id="profile-bar-profile-pic" class="round-image" src="assets/images/feed/profile-pic.png" alt=""/> <div id="profile-bar-name"> diff --git a/src/DevHive.Angular/src/app/components/feed/feed.component.ts b/src/DevHive.Angular/src/app/components/feed/feed.component.ts index 2889e7f..144e76a 100644 --- a/src/DevHive.Angular/src/app/components/feed/feed.component.ts +++ b/src/DevHive.Angular/src/app/components/feed/feed.component.ts @@ -1,13 +1,9 @@ import { Component, OnInit } from '@angular/core'; import { Title } from '@angular/platform-browser'; import { Router } from '@angular/router'; -import { Guid } from 'guid-typescript'; -import jwt_decode from 'jwt-decode'; -import { FeedService } from 'src/app/services/feed.service'; import { User } from 'src/models/identity/user'; -import { IJWTPayload } from 'src/interfaces/jwt-payload'; -import { IUserCredentials } from 'src/interfaces/user-credentials'; import { PostComponent } from '../post/post.component'; +import { UserService } from '../../services/user.service'; @Component({ selector: 'app-feed', @@ -16,17 +12,16 @@ import { PostComponent } from '../post/post.component'; }) export class FeedComponent implements OnInit { private _title = 'Feed'; + private _timeoutFetchData = 500; + public dataArrived = false; public user: User; public posts: PostComponent[]; - constructor(private titleService: Title, private service: FeedService, private router: Router) { + constructor(private titleService: Title, private router: Router, private userService: UserService) { this.titleService.setTitle(this._title); } ngOnInit(): void { - // Default values, so it doesn't give an error while initializing - this.user = new User(Guid.createEmpty(), '', '', '', ''); - this.posts = [ new PostComponent(), new PostComponent(), @@ -35,21 +30,20 @@ export class FeedComponent implements OnInit { ]; if (sessionStorage.getItem('UserCred')) { - const jwt: IJWTPayload = JSON.parse(sessionStorage.getItem('UserCred') ?? ''); - const userCred = jwt_decode<IUserCredentials>(jwt.token); - this.saveUserData(userCred.ID, jwt.token); + // Workaround for waiting the fetch response + // TODO: properly wait for it, before loading the page contents + setTimeout(() => + { + this.user = this.userService.fetchUserFromSessionStorage(); + }, + this._timeoutFetchData); + setTimeout(() => + { + this.dataArrived = true; + }, + this._timeoutFetchData + 100); } else { this.router.navigate(['/login']); } } - - saveUserData(userId: Guid, authToken: string): void { - fetch(`http://localhost:5000/api/User?Id=${userId}`, { - method: 'GET', - headers: { - 'Content-Type': 'application/json', - Authorization: 'Bearer ' + authToken - } - }).then(response => response.json()).then(data => Object.assign(this.user, data)); - } } diff --git a/src/DevHive.Angular/src/app/components/login/login.component.ts b/src/DevHive.Angular/src/app/components/login/login.component.ts index b3698e2..de40a21 100644 --- a/src/DevHive.Angular/src/app/components/login/login.component.ts +++ b/src/DevHive.Angular/src/app/components/login/login.component.ts @@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core'; import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms'; import { Router } from '@angular/router'; import { Title } from '@angular/platform-browser'; +import { UserService } from 'src/app/services/user.service'; @Component({ selector: 'app-login', @@ -13,7 +14,7 @@ export class LoginComponent implements OnInit { private _title = 'Login'; - constructor(private titleService: Title, private fb: FormBuilder, private router: Router) { + constructor(private titleService: Title, private fb: FormBuilder, private router: Router, private userService: UserService) { titleService.setTitle(this._title); } @@ -29,19 +30,7 @@ export class LoginComponent implements OnInit { } async onSubmit(): Promise<void> { - const response = await fetch('http://localhost:5000/api/User/login', { - method: 'POST', - body: JSON.stringify({ - UserName: this.loginUserFormGroup.get('username')?.value, - Password: this.loginUserFormGroup.get('password')?.value - }), - headers: { - 'Content-Type': 'application/json' - } - }); - const userCred: string = await response.json(); - - sessionStorage.setItem('UserCred', JSON.stringify(userCred)); + this.userService.loginUser(this.loginUserFormGroup); this.router.navigate(['/']); } diff --git a/src/DevHive.Angular/src/app/components/register/register.component.ts b/src/DevHive.Angular/src/app/components/register/register.component.ts index 7304589..b8bd779 100644 --- a/src/DevHive.Angular/src/app/components/register/register.component.ts +++ b/src/DevHive.Angular/src/app/components/register/register.component.ts @@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core'; import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms'; import { Title } from '@angular/platform-browser'; import { Router } from '@angular/router'; +import { UserService } from 'src/app/services/user.service'; @Component({ selector: 'app-register', @@ -13,7 +14,7 @@ export class RegisterComponent implements OnInit { private _title = 'Register'; - constructor(private titleService: Title, private fb: FormBuilder, private router: Router) { + constructor(private titleService: Title, private fb: FormBuilder, private router: Router, private userService: UserService) { titleService.setTitle(this._title); } @@ -45,26 +46,8 @@ export class RegisterComponent implements OnInit { this.registerUserFormGroup.valueChanges.subscribe(console.log); } - async onSubmit(): Promise<void> { - // TODO: add a check for form data validity - - const response = await fetch('http://localhost:5000/api/User/register', { - method: 'POST', - body: JSON.stringify({ - UserName: this.registerUserFormGroup.get('username')?.value, - Email: this.registerUserFormGroup.get('email')?.value, - FirstName: this.registerUserFormGroup.get('firstName')?.value, - LastName: this.registerUserFormGroup.get('lastName')?.value, - Password: this.registerUserFormGroup.get('password')?.value - }), - headers: { - 'Content-Type': 'application/json' - } - }); - const userCred: string = await response.json(); - - // TODO: don't redirect if there is an error response - sessionStorage.setItem('UserCred', JSON.stringify(userCred)); + onSubmit(): void { + this.userService.registerUser(this.registerUserFormGroup); this.router.navigate(['/']); } diff --git a/src/DevHive.Angular/src/app/services/user.service.ts b/src/DevHive.Angular/src/app/services/user.service.ts new file mode 100644 index 0000000..35215e0 --- /dev/null +++ b/src/DevHive.Angular/src/app/services/user.service.ts @@ -0,0 +1,75 @@ +import { Injectable } from '@angular/core'; +import {Guid} from 'guid-typescript'; +import { User } from '../../models/identity/user'; +import jwt_decode from 'jwt-decode'; +import { IJWTPayload } from '../../interfaces/jwt-payload'; +import { IUserCredentials } from '../../interfaces/user-credentials'; +import { FormGroup } from '@angular/forms'; + +@Injectable({ + providedIn: 'root' +}) +export class UserService { + constructor() { } + + fetchUserFromSessionStorage(): User { + // Get the token and userid from session storage + const jwt: IJWTPayload = JSON.parse(sessionStorage.getItem('UserCred') ?? ''); + const userCred = jwt_decode<IUserCredentials>(jwt.token); + + return this.fetchUser(userCred.ID, jwt.token); + } + + fetchUser(userId: Guid, authToken: string): User { + const fetchedUser: User = new User(Guid.createEmpty(), '', '', '', ''); + + // Fetch the data and assign it to fetchedUser + fetch(`http://localhost:5000/api/User?Id=${userId}`, { + method: 'GET', + headers: { + 'Content-Type': 'application/json', + Authorization: 'Bearer ' + authToken + } + }).then(response => response.json()) + .then(data => Object.assign(fetchedUser, data)); + + return fetchedUser; + } + + // TODO: make return bool when the response is an error + loginUser(loginUserFormGroup: FormGroup): void { + // Save the fetch reponse in the sessionStorage + fetch('http://localhost:5000/api/User/login', { + method: 'POST', + body: JSON.stringify({ + UserName: loginUserFormGroup.get('username')?.value, + Password: loginUserFormGroup.get('password')?.value + }), + headers: { + 'Content-Type': 'application/json' + } + }).then(response => response.json()) + .then(data => sessionStorage.setItem('UserCred', JSON.stringify(data))); + } + + // TODO: make return bool when the response is an error + registerUser(registerUserFormGroup: FormGroup): void { + // TODO: add a check for form data validity + + // Like in login, save the fetch reponse in the sessionStorage + fetch('http://localhost:5000/api/User/register', { + method: 'POST', + body: JSON.stringify({ + UserName: registerUserFormGroup.get('username')?.value, + Email: registerUserFormGroup.get('email')?.value, + FirstName: registerUserFormGroup.get('firstName')?.value, + LastName: registerUserFormGroup.get('lastName')?.value, + Password: registerUserFormGroup.get('password')?.value + }), + headers: { + 'Content-Type': 'application/json' + } + }).then(response => response.json()) + .then(data => sessionStorage.setItem('UserCred', JSON.stringify(data))); + } +} |