Merge branch 'dev' of github.com:Team-Kaleidoscope/DevHive into dev

37 files changed, 468 insertions, 296 deletions

diff --git a/src/DevHive.Angular/src/app/app-constants.module.ts b/src/DevHive.Angular/src/app/app-constants.module.ts
index cbb1ec1..101ab44 100644
--- a/src/DevHive.Angular/src/app/app-constants.module.ts
+++ b/src/DevHive.Angular/src/app/app-constants.module.ts
@@ -13,4 +13,6 @@ export class AppConstants {
 
   public static PAGE_SIZE = 5;
   public static FALLBACK_PROFILE_ICON = 'assets/images/feed/profile-pic.png';
+
+  public static SESSION_TOKEN_KEY = 'UserCred';
 }
diff --git a/src/DevHive.Angular/src/app/app-routing.module.ts b/src/DevHive.Angular/src/app/app-routing.module.ts
index c9a8c61..e4e3d63 100644
--- a/src/DevHive.Angular/src/app/app-routing.module.ts
+++ b/src/DevHive.Angular/src/app/app-routing.module.ts
@@ -4,8 +4,9 @@ import { FeedComponent } from './components/feed/feed.component';
 import { LoginComponent } from './components/login/login.component';
 import { RegisterComponent } from './components/register/register.component';
 import { ProfileComponent } from './components/profile/profile.component';
-import {ProfileSettingsComponent} from './components/profile-settings/profile-settings.component';
-import {NotFoundComponent} from './components/not-found/not-found.component';
+import { ProfileSettingsComponent } from './components/profile-settings/profile-settings.component';
+import { NotFoundComponent } from './components/not-found/not-found.component';
+import { PostPageComponent } from './components/post-page/post-page.component';
 
 const routes: Routes = [
   { path: '', component: FeedComponent },
@@ -13,6 +14,7 @@ const routes: Routes = [
   { path: 'register', component: RegisterComponent },
   { path: 'profile/:username', component: ProfileComponent },
   { path: 'profile/:username/settings', component: ProfileSettingsComponent },
+  { path: 'post/:id', component: PostPageComponent },
   { path: 'not-found', component: NotFoundComponent },
   { path: '**', component: NotFoundComponent }
 ];
diff --git a/src/DevHive.Angular/src/app/app.module.ts b/src/DevHive.Angular/src/app/app.module.ts
index 586064e..1867787 100644
--- a/src/DevHive.Angular/src/app/app.module.ts
+++ b/src/DevHive.Angular/src/app/app.module.ts
@@ -19,6 +19,7 @@ import { NotFoundComponent } from './components/not-found/not-found.component';
 import { LoadingComponent } from './components/loading/loading.component';
 import { ErrorBarComponent } from './components/error-bar/error-bar.component';
 import { SuccessBarComponent } from './components/success-bar/success-bar.component';
+import { PostPageComponent } from './components/post-page/post-page.component';
 
 @NgModule({
   declarations: [
@@ -32,7 +33,8 @@ import { SuccessBarComponent } from './components/success-bar/success-bar.compon
     NotFoundComponent,
     LoadingComponent,
     ErrorBarComponent,
-    SuccessBarComponent
+    SuccessBarComponent,
+    PostPageComponent
   ],
   imports: [
     BrowserModule,
diff --git a/src/DevHive.Angular/src/app/components/error-bar/error-bar.component.ts b/src/DevHive.Angular/src/app/components/error-bar/error-bar.component.ts
index c24448e..111bac8 100644
--- a/src/DevHive.Angular/src/app/components/error-bar/error-bar.component.ts
+++ b/src/DevHive.Angular/src/app/components/error-bar/error-bar.component.ts
@@ -1,6 +1,6 @@
-import {HttpErrorResponse} from '@angular/common/http';
+import { HttpErrorResponse } from '@angular/common/http';
 import { Component, OnInit } from '@angular/core';
-import {IApiError} from 'src/interfaces/api-error';
+import { IApiError } from 'src/interfaces/api-error';
 
 @Component({
   selector: 'app-error-bar',
@@ -10,14 +10,20 @@ import {IApiError} from 'src/interfaces/api-error';
 export class ErrorBarComponent implements OnInit {
   public errorMsg = '';
 
-  constructor() { }
+  constructor()
+  { }
 
   ngOnInit(): void {
     this.hideError();
   }
 
   showError(error: HttpErrorResponse): void {
-    const test: IApiError = { type: '', title: 'Error!', status: 0, traceId: '' };
+    const test: IApiError = {
+      type: '',
+      title: 'Error!',
+      status: 0,
+      traceId: ''
+    };
     Object.assign(test, error.error);
     this.errorMsg = test.title;
   }
diff --git a/src/DevHive.Angular/src/app/components/feed/feed.component.css b/src/DevHive.Angular/src/app/components/feed/feed.component.css
index f810e83..73e1f3e 100644
--- a/src/DevHive.Angular/src/app/components/feed/feed.component.css
+++ b/src/DevHive.Angular/src/app/components/feed/feed.component.css
@@ -75,6 +75,11 @@
 
 /* Top bar */
 
+form {
+  width: 100%;
+  height: 100%;
+}
+
 #top-bar {
   display: flex;
   width: 98%;
@@ -98,6 +103,7 @@
   flex: 1;
   font-size: inherit;
   width: 100%;
+  height: 100%;
   margin: 0 auto;
   box-sizing: border-box;
   border: 2px solid var(--bg-color);
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 e3c6e83..1ec040b 100644
--- a/src/DevHive.Angular/src/app/components/feed/feed.component.html
+++ b/src/DevHive.Angular/src/app/components/feed/feed.component.html
@@ -17,7 +17,10 @@
 	<div id="feed-content">
 		<nav id="top-bar" class="rounded-border">
 			<img id="top-bar-profile-pic" class="round-image" [src]="user.imageUrl" alt="" (click)="goToProfile()">
-			<input id="top-bar-create-post" type="text" placeholder="What's on your mind?"/>
+			<form [formGroup]="createPostFormGroup" (ngSubmit)="createPost()">
+				<input id="top-bar-create-post" type="text" formControlName="newPostMessage" placeholder="What's on your mind?"/>
+				<input type="submit" style="display: none" /> <!-- You need this element, so when you press enter the request is sent -->
+			</form>
 			<a id="top-bar-open-chat" href="">
 				<img src="assets/images/feed/chat-pic.png" alt=""/>
 			</a>
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 f260fd4..f583078 100644
--- a/src/DevHive.Angular/src/app/components/feed/feed.component.ts
+++ b/src/DevHive.Angular/src/app/components/feed/feed.component.ts
@@ -1,12 +1,15 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { Title } from '@angular/platform-browser';
 import { Router } from '@angular/router';
 import { User } from 'src/models/identity/user';
 import { UserService } from '../../services/user.service';
 import { AppConstants } from 'src/app/app-constants.module';
-import {HttpErrorResponse} from '@angular/common/http';
-import {FeedService} from 'src/app/services/feed.service';
-import {Post} from 'src/models/post';
+import { HttpErrorResponse } from '@angular/common/http';
+import { FeedService } from 'src/app/services/feed.service';
+import { Post } from 'src/models/post';
+import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
+import { PostService } from 'src/app/services/post.service';
+import { TokenService } from 'src/app/services/token.service';
 
 @Component({
   selector: 'app-feed',
@@ -15,34 +18,44 @@ import {Post} from 'src/models/post';
 })
 export class FeedComponent implements OnInit {
   private _title = 'Feed';
-  private _timeLoaded: string;
+  private _timeLoaded: string; // we send the time to the api as a string
   public dataArrived = false;
   public user: User;
-  public posts: Post[] = [];
+  public posts: Post[];
+  public createPostFormGroup: FormGroup;
 
-  constructor(private _titleService: Title, private _router: Router, private _userService: UserService, private _feedService: FeedService) {
+  constructor(private _titleService: Title, private _fb: FormBuilder, private _router: Router, private _userService: UserService, private _feedService: FeedService, private _postService: PostService, private _tokenService: TokenService) {
     this._titleService.setTitle(this._title);
   }
 
   ngOnInit(): void {
+    this.posts = [];
     this.user = this._userService.getDefaultUser();
+
     const now = new Date();
     now.setHours(now.getHours() + 2); // accounting for eastern european timezone
     this._timeLoaded = now.toISOString();
 
+    this.createPostFormGroup = this._fb.group({
+      newPostMessage: new FormControl('')
+    });
+
     if (sessionStorage.getItem('UserCred')) {
       this._userService.getUserFromSessionStorageRequest().subscribe(
-        (res: object) => this.loadFeed(res),
-        (err: HttpErrorResponse) => this.bailOnBadToken()
+        (res: object) => {
+          Object.assign(this.user, res);
+          this.loadFeed();
+        },
+        (err: HttpErrorResponse) => {
+          this.logout();
+        }
       );
     } else {
       this._router.navigate(['/login']);
     }
   }
 
-  private loadFeed(res: object): void {
-    Object.assign(this.user, res);
-
+  private loadFeed(): void {
     this._feedService.getUserFeedFromSessionStorageRequest(1, this._timeLoaded, AppConstants.PAGE_SIZE).subscribe(
       (result: object) => {
         this.posts = Object.values(result)[0];
@@ -55,17 +68,9 @@ export class FeedComponent implements OnInit {
   }
 
   private finishUserLoading(): void {
-    if (this.user.imageUrl === '') {
-      this.user.imageUrl = AppConstants.FALLBACK_PROFILE_ICON;
-    }
     this.dataArrived = true;
   }
 
-  private bailOnBadToken(): void {
-    this._userService.logoutUserFromSessionStorage();
-    this._router.navigate(['/login']);
-  }
-
   goToProfile(): void {
     this._router.navigate(['/profile/' + this.user.userName]);
   }
@@ -75,7 +80,17 @@ export class FeedComponent implements OnInit {
   }
 
   logout(): void {
-    this._userService.logoutUserFromSessionStorage();
+    this._tokenService.logoutUserFromSessionStorage();
     this._router.navigate(['/login']);
   }
+
+  createPost(): void {
+    const postMessage = this.createPostFormGroup.get('newPostMessage')?.value;
+
+    this._postService.createPostFromSessionStorageRequest(postMessage).subscribe(
+      (result: object) => {
+        this.goToProfile();
+      }
+    );
+  }
 }
diff --git a/src/DevHive.Angular/src/app/components/loading/loading.component.ts b/src/DevHive.Angular/src/app/components/loading/loading.component.ts
index 4dff0cd..e203484 100644
--- a/src/DevHive.Angular/src/app/components/loading/loading.component.ts
+++ b/src/DevHive.Angular/src/app/components/loading/loading.component.ts
@@ -7,9 +7,9 @@ import { Component, OnInit } from '@angular/core';
 })
 export class LoadingComponent implements OnInit {
 
-  constructor() { }
+  constructor()
+  { }
 
   ngOnInit(): void {
   }
-
 }
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 c424060..6e285db 100644
--- a/src/DevHive.Angular/src/app/components/login/login.component.ts
+++ b/src/DevHive.Angular/src/app/components/login/login.component.ts
@@ -1,11 +1,11 @@
-import { Component, ErrorHandler, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
 import { FormGroup, FormBuilder, Validators, FormControl, AbstractControl } from '@angular/forms';
 import { Router } from '@angular/router';
 import { Title } from '@angular/platform-browser';
 import { UserService } from 'src/app/services/user.service';
-import {AppConstants} from 'src/app/app-constants.module';
-import {HttpErrorResponse, HttpResponse} from '@angular/common/http';
-import {ErrorBarComponent} from '../error-bar/error-bar.component';
+import { HttpErrorResponse } from '@angular/common/http';
+import { ErrorBarComponent } from '../error-bar/error-bar.component';
+import { TokenService } from 'src/app/services/token.service';
 
 @Component({
   selector: 'app-login',
@@ -15,9 +15,9 @@ import {ErrorBarComponent} from '../error-bar/error-bar.component';
 export class LoginComponent implements OnInit {
   @ViewChild(ErrorBarComponent) private _errorBar: ErrorBarComponent;
   private _title = 'Login';
-  loginUserFormGroup: FormGroup;
+  public loginUserFormGroup: FormGroup;
 
-  constructor(private _titleService: Title, private _fb: FormBuilder, private _router: Router, private _userService: UserService) {
+  constructor(private _titleService: Title, private _fb: FormBuilder, private _router: Router, private _userService: UserService, private _tokenService: TokenService) {
     this._titleService.setTitle(this._title);
   }
 
@@ -35,16 +35,16 @@ export class LoginComponent implements OnInit {
   onSubmit(): void {
     this._errorBar.hideError();
     this._userService.loginUserRequest(this.loginUserFormGroup).subscribe(
-        res => this.finishLogin(res),
-        (err: HttpErrorResponse) => this._errorBar.showError(err)
+        res => {
+          this._tokenService.setUserTokenToSessionStorage(res);
+          this._router.navigate(['/']);
+        },
+        (err: HttpErrorResponse) => {
+          this._errorBar.showError(err);
+        }
     );
   }
 
-  private finishLogin(res: object): void {
-    this._userService.setUserTokenToSessionStorage(res);
-    this._router.navigate(['/']);
-  }
-
   onRedirectRegister(): void {
     this._router.navigate(['/register']);
   }
diff --git a/src/DevHive.Angular/src/app/components/not-found/not-found.component.ts b/src/DevHive.Angular/src/app/components/not-found/not-found.component.ts
index 157fb97..89a230d 100644
--- a/src/DevHive.Angular/src/app/components/not-found/not-found.component.ts
+++ b/src/DevHive.Angular/src/app/components/not-found/not-found.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import {Router} from '@angular/router';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-not-found',
diff --git a/src/DevHive.Angular/src/app/components/post-page/post-page.component.css b/src/DevHive.Angular/src/app/components/post-page/post-page.component.css
new file mode 100644
index 0000000..50adee5
--- /dev/null
+++ b/src/DevHive.Angular/src/app/components/post-page/post-page.component.css
@@ -0,0 +1,19 @@
+#content {
+  justify-content: flex-start !important;
+}
+
+#content > * {
+  width: 100%;
+}
+
+#back-btns {
+  width: 100%;
+  display: flex;
+}
+
+.submit-btn {
+  flex: 1;
+  max-width: 98%;
+  margin: 0 auto;
+  margin-bottom: .5em;
+}
diff --git a/src/DevHive.Angular/src/app/components/post-page/post-page.component.html b/src/DevHive.Angular/src/app/components/post-page/post-page.component.html
new file mode 100644
index 0000000..4f6f33d
--- /dev/null
+++ b/src/DevHive.Angular/src/app/components/post-page/post-page.component.html
@@ -0,0 +1,6 @@
+<div id="content">
+	<div id="back-btns">
+		<button class="submit-btn" type="submit" (click)="backToFeed()">ᐊ Back to feed</button>
+	</div>
+	<app-post [paramId]="postId.toString()"></app-post>
+<div>
diff --git a/src/DevHive.Angular/src/app/components/post-page/post-page.component.ts b/src/DevHive.Angular/src/app/components/post-page/post-page.component.ts
new file mode 100644
index 0000000..56e146d
--- /dev/null
+++ b/src/DevHive.Angular/src/app/components/post-page/post-page.component.ts
@@ -0,0 +1,23 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { Guid } from 'guid-typescript';
+
+@Component({
+  selector: 'app-post-page',
+  templateUrl: './post-page.component.html',
+  styleUrls: ['./post-page.component.css']
+})
+export class PostPageComponent implements OnInit {
+  public postId: Guid;
+
+  constructor(private _router: Router)
+  { }
+
+  ngOnInit(): void {
+    this.postId = Guid.parse(this._router.url.substring(6));
+  }
+
+  backToFeed(): void {
+    this._router.navigate(['/']);
+  }
+}
diff --git a/src/DevHive.Angular/src/app/components/post/post.component.css b/src/DevHive.Angular/src/app/components/post/post.component.css
index c3e3caa..1ae5d8f 100644
--- a/src/DevHive.Angular/src/app/components/post/post.component.css
+++ b/src/DevHive.Angular/src/app/components/post/post.component.css
@@ -47,6 +47,7 @@ hr {
 
 .message {
   margin: .3em 0;
+  word-break: break-all;
 }
 
 .timestamp {
@@ -54,13 +55,18 @@ hr {
   color: gray;
 }
 
+.message:hover, .timestamp:hover {
+  cursor: pointer;
+}
+
 /* Rating */
 
 .rating {
   display: flex;
   flex-direction: column;
   align-items: center;
-  margin-right: -.1em;
+  min-height: 4.4em;
+  margin: auto -.1em auto 0;
 }
 
 .score {
diff --git a/src/DevHive.Angular/src/app/components/post/post.component.html b/src/DevHive.Angular/src/app/components/post/post.component.html
index 8fbda35..ea81bdf 100644
--- a/src/DevHive.Angular/src/app/components/post/post.component.html
+++ b/src/DevHive.Angular/src/app/components/post/post.component.html
@@ -1,3 +1,5 @@
+<app-loading *ngIf="!loaded"></app-loading>
+
 <div class="post rounded-border" *ngIf="loaded">
 	<div class="content">
 		<div class="author" (click)="goToAuthorProfile()">
@@ -11,10 +13,10 @@
 				</div>
 			</div>
 		</div>
-		<div class="message">
+		<div class="message" (click)="goToPostPage()">
 			{{ post.message }}
 		</div>
-		<div class="timestamp">
+		<div class="timestamp" (click)="goToPostPage()">
 			{{ timeCreated }}
 		</div>
 	</div>
diff --git a/src/DevHive.Angular/src/app/components/post/post.component.ts b/src/DevHive.Angular/src/app/components/post/post.component.ts
index 7a6b5c0..0842e3c 100644
--- a/src/DevHive.Angular/src/app/components/post/post.component.ts
+++ b/src/DevHive.Angular/src/app/components/post/post.component.ts
@@ -1,12 +1,10 @@
 import { Component, Input, OnInit } from '@angular/core';
-import {Router} from '@angular/router';
+import { Router } from '@angular/router';
 import { Guid } from 'guid-typescript';
-import {AppConstants} from 'src/app/app-constants.module';
-import {FeedService} from 'src/app/services/feed.service';
-import {PostService} from 'src/app/services/post.service';
-import {UserService} from 'src/app/services/user.service';
+import { PostService } from 'src/app/services/post.service';
+import { UserService } from 'src/app/services/user.service';
 import { User } from 'src/models/identity/user';
-import {Post} from 'src/models/post';
+import { Post } from 'src/models/post';
 
 @Component({
   selector: 'app-post',
@@ -14,15 +12,15 @@ import {Post} from 'src/models/post';
   styleUrls: ['./post.component.css'],
 })
 export class PostComponent implements OnInit {
+  public loaded = false;
   public user: User;
   public post: Post;
   public votesNumber: number;
   public timeCreated: string;
-  public loaded = false;
   @Input() paramId: string;
 
   constructor(private _postService: PostService, private _userService: UserService, private _router: Router)
-  {}
+  { }
 
   ngOnInit(): void {
     this.post = this._postService.getDefaultPost();
@@ -31,11 +29,12 @@ export class PostComponent implements OnInit {
     this._postService.getPostRequest(Guid.parse(this.paramId)).subscribe(
       (result: object) => {
         Object.assign(this.post, result);
+        this.votesNumber = 23;
+
         this.timeCreated = new Date(this.post.timeCreated).toLocaleString('en-GB');
         this.loadUser();
       }
     );
-    this.votesNumber = 23;
   }
 
   private loadUser(): void {
@@ -50,4 +49,8 @@ export class PostComponent implements OnInit {
   goToAuthorProfile(): void {
     this._router.navigate(['/profile/' + this.user.userName]);
   }
+
+  goToPostPage(): void {
+    this._router.navigate(['/post/' + this.post.postId]);
+  }
 }
diff --git a/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.css b/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.css
index 2aecef5..83f66f1 100644
--- a/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.css
+++ b/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.css
@@ -55,12 +55,6 @@ hr {
   flex-wrap: wrap;
 }
 
-#all-languages > *, #all-technologies > * {
-  width: fit-content;
-  margin-top: .1em;
-  margin-bottom: .1em;
-}
-
 /* Buttons */
 
 .edit-btn {
diff --git a/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.html b/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.html
index 1b713d7..c38a6d7 100644
--- a/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.html
+++ b/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.html
@@ -2,7 +2,7 @@
 
 <div id="content" *ngIf="dataArrived">
 	<nav id="navigation">
-		<button class="submit-btn" (click)="goBack()">ᐊ Back</button>
+		<button class="submit-btn" (click)="goToProfile()">ᐊ Back</button>
 		<button class="submit-btn" (click)="logout()">Logout</button>
 	</nav>
 	<hr>
diff --git a/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.ts b/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.ts
index e348b8b..769c1bb 100644
--- a/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.ts
+++ b/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.ts
@@ -1,15 +1,17 @@
-import {Location} from '@angular/common';
-import {HttpErrorResponse} from '@angular/common/http';
+import { Location } from '@angular/common';
+import { HttpErrorResponse } from '@angular/common/http';
 import { Component, OnInit, ViewChild } from '@angular/core';
-import {FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';
-import {Router} from '@angular/router';
-import {AppConstants} from 'src/app/app-constants.module';
-import {LanguageService} from 'src/app/services/language.service';
-import {UserService} from 'src/app/services/user.service';
-import {TechnologyService} from 'src/app/services/technology.service';
-import {Language, Technology, User} from 'src/models/identity/user';
-import {ErrorBarComponent} from '../error-bar/error-bar.component';
-import {SuccessBarComponent} from '../success-bar/success-bar.component';
+import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { Router } from '@angular/router';
+import { LanguageService } from 'src/app/services/language.service';
+import { UserService } from 'src/app/services/user.service';
+import { TechnologyService } from 'src/app/services/technology.service';
+import { User } from 'src/models/identity/user';
+import { ErrorBarComponent } from '../error-bar/error-bar.component';
+import { SuccessBarComponent } from '../success-bar/success-bar.component';
+import { Language } from 'src/models/language';
+import { Technology } from 'src/models/technology';
+import { TokenService } from 'src/app/services/token.service';
 
 @Component({
   selector: 'app-profile-settings',
@@ -20,26 +22,34 @@ export class ProfileSettingsComponent implements OnInit {
   @ViewChild(ErrorBarComponent) private _errorBar: ErrorBarComponent;
   @ViewChild(SuccessBarComponent) private _successBar: SuccessBarComponent;
   private _urlUsername: string;
-  public updateUserFormGroup: FormGroup;
   public dataArrived = false;
-  public user: User;
   public deleteAccountConfirm = false;
   public showLanguages = false;
-  public availableLanguages: Language[] = [];
   public showTechnologies = false;
-  public availableTechnologies: Technology[] = [];
+  public updateUserFormGroup: FormGroup;
+  public user: User;
+  public availableLanguages: Language[];
+  public availableTechnologies: Technology[];
 
-  constructor(private _router: Router, private _userService: UserService, private _languageService: LanguageService, private _technologyService: TechnologyService, private _fb: FormBuilder, private _location: Location)
+  constructor(private _router: Router, private _userService: UserService, private _languageService: LanguageService, private _technologyService: TechnologyService, private _tokenService: TokenService, private _fb: FormBuilder, private _location: Location)
   { }
 
   ngOnInit(): void {
     this._urlUsername = this._router.url.substring(9);
     this._urlUsername = this._urlUsername.substring(0, this._urlUsername.length - 9);
+
     this.user = this._userService.getDefaultUser();
+    this.availableLanguages = [];
+    this.availableTechnologies = [];
 
     this._userService.getUserByUsernameRequest(this._urlUsername).subscribe(
-      (res: object) => this.finishUserLoading(res),
-      (err: HttpErrorResponse) => { this._router.navigate(['/not-found']); }
+      (res: object) => {
+        Object.assign(this.user, res);
+        this.finishUserLoading();
+      },
+      (err: HttpErrorResponse) => {
+        this._router.navigate(['/not-found']);
+      }
     );
 
     this._languageService.getAllLanguagesWithSessionStorageRequest().subscribe(
@@ -54,12 +64,7 @@ export class ProfileSettingsComponent implements OnInit {
     );
   }
 
-  private finishUserLoading(res: object): void {
-    Object.assign(this.user, res);
-    if (this.user.imageUrl === '') {
-      this.user.imageUrl = AppConstants.FALLBACK_PROFILE_ICON;
-    }
-
+  private finishUserLoading(): void {
     if (sessionStorage.getItem('UserCred')) {
       const userFromToken: User = this._userService.getDefaultUser();
 
@@ -75,7 +80,9 @@ export class ProfileSettingsComponent implements OnInit {
             this.goToProfile();
           }
         },
-        (err: HttpErrorResponse) => this.bailOnBadToken()
+        (err: HttpErrorResponse) => {
+          this.logout();
+        }
       );
     }
     else {
@@ -119,11 +126,13 @@ export class ProfileSettingsComponent implements OnInit {
       technologies: new FormControl('')
     });
 
-    this.getLanguagesForShowing()
-      .then(value => this.updateUserFormGroup.patchValue({ languageInput : value }));
+    this.getLanguagesForShowing().then(value => {
+        this.updateUserFormGroup.patchValue({ languageInput : value });
+    });
 
-    this.getTechnologiesForShowing()
-      .then(value => this.updateUserFormGroup.patchValue({ technologyInput : value }));
+    this.getTechnologiesForShowing().then(value => {
+      this.updateUserFormGroup.patchValue({ technologyInput : value });
+    });
 
     this.updateUserFormGroup.valueChanges.subscribe(() => {
       this._successBar?.hideMsg();
@@ -132,28 +141,21 @@ export class ProfileSettingsComponent implements OnInit {
   }
 
   private getLanguagesForShowing(): Promise<string> {
-    return new Promise(resolve =>
-      this._languageService.getFullLanguagesFromIncomplete(this.user.languages)
-        .then(value => {
-          this.user.languages = value;
-          resolve(value.map(x => x.name).join(' '));
-        })
-      );
+    return new Promise(resolve => {
+      this._languageService.getFullLanguagesFromIncomplete(this.user.languages).then(value => {
+        this.user.languages = value;
+        resolve(value.map(x => x.name).join(' '));
+      });
+    });
   }
 
   private getTechnologiesForShowing(): Promise<string> {
-    return new Promise(resolve =>
-      this._technologyService.getFullTechnologiesFromIncomplete(this.user.technologies)
-        .then(value => {
-          this.user.technologies = value;
-          resolve(value.map(x => x.name).join(' '));
-        })
-      );
-  }
-
-  private bailOnBadToken(): void {
-    this._userService.logoutUserFromSessionStorage();
-    this._router.navigate(['/login']);
+    return new Promise(resolve => {
+      this._technologyService.getFullTechnologiesFromIncomplete(this.user.technologies).then(value => {
+        this.user.technologies = value;
+        resolve(value.map(x => x.name).join(' '));
+      });
+    });
   }
 
   onSubmit(): void {
@@ -163,9 +165,13 @@ export class ProfileSettingsComponent implements OnInit {
     this.patchLanguagesControl();
     this.patchTechnologiesControl();
 
-    this._userService.putUserFromSessionStorageRequest(this.updateUserFormGroup).subscribe(
-        res => this._successBar.showMsg('Profile updated successfully!'),
-        (err: HttpErrorResponse) => this._errorBar.showError(err)
+    this._userService.putUserFromSessionStorageRequest(this.updateUserFormGroup, this.user.roles, this.user.friends).subscribe(
+        res => {
+          this._successBar.showMsg('Profile updated successfully!');
+        },
+        (err: HttpErrorResponse) => {
+          this._errorBar.showError(err);
+        }
     );
   }
 
@@ -225,21 +231,12 @@ export class ProfileSettingsComponent implements OnInit {
     }
   }
 
-
   goToProfile(): void {
     this._router.navigate([this._router.url.substring(0, this._router.url.length - 9)]);
   }
 
-  goBack(): void {
-    const currURL = this._location.path();
-    this._location.back();
-    if (this._location.path() === currURL) {
-      this.goToProfile();
-    }
-  }
-
   logout(): void {
-    this._userService.logoutUserFromSessionStorage();
+    this._tokenService.logoutUserFromSessionStorage();
     this.goToProfile();
   }
 
@@ -255,10 +252,11 @@ export class ProfileSettingsComponent implements OnInit {
     if (this.deleteAccountConfirm) {
       this._userService.deleteUserFromSessionStorageRequest().subscribe(
         (res: object) => {
-          this._userService.logoutUserFromSessionStorage();
-          this._router.navigate(['/login']);
+          this.logout();
         },
-        (err: HttpErrorResponse) => console.log(err)
+        (err: HttpErrorResponse) => {
+          this._errorBar.showError(err);
+        }
       );
     }
     else {
diff --git a/src/DevHive.Angular/src/app/components/profile/profile.component.css b/src/DevHive.Angular/src/app/components/profile/profile.component.css
index f312ebd..fb84af3 100644
--- a/src/DevHive.Angular/src/app/components/profile/profile.component.css
+++ b/src/DevHive.Angular/src/app/components/profile/profile.component.css
@@ -72,6 +72,7 @@ hr {
   width: 100%;
   display: flex;
   align-items: center;
+  flex-wrap: wrap;
 }
 
 /* Posts */
diff --git a/src/DevHive.Angular/src/app/components/profile/profile.component.html b/src/DevHive.Angular/src/app/components/profile/profile.component.html
index ac0c07e..9cb4dd2 100644
--- a/src/DevHive.Angular/src/app/components/profile/profile.component.html
+++ b/src/DevHive.Angular/src/app/components/profile/profile.component.html
@@ -26,7 +26,7 @@
 					{{ lang.name }}
 				</div>
 			</div>
-			<div *ngIf="showNoLangMsg">
+			<div *ngIf="user.languages.length === 0">
 				&nbsp;None
 			</div>
 		</div>
@@ -37,7 +37,7 @@
 					{{ tech.name }}
 				</div>
 			</div>
-			<div *ngIf="showNoTechMsg">
+			<div *ngIf="user.technologies.length === 0">
 				&nbsp;None
 			</div>
 		</div>
diff --git a/src/DevHive.Angular/src/app/components/profile/profile.component.ts b/src/DevHive.Angular/src/app/components/profile/profile.component.ts
index 7717505..5dd965e 100644
--- a/src/DevHive.Angular/src/app/components/profile/profile.component.ts
+++ b/src/DevHive.Angular/src/app/components/profile/profile.component.ts
@@ -3,12 +3,13 @@ import { Router } from '@angular/router';
 import { UserService } from 'src/app/services/user.service';
 import { User } from 'src/models/identity/user';
 import { AppConstants } from 'src/app/app-constants.module';
-import {HttpErrorResponse} from '@angular/common/http';
-import {Location} from '@angular/common';
-import {LanguageService} from 'src/app/services/language.service';
-import {TechnologyService} from 'src/app/services/technology.service';
-import {Post} from 'src/models/post';
-import {FeedService} from 'src/app/services/feed.service';
+import { HttpErrorResponse } from '@angular/common/http';
+import { Location } from '@angular/common';
+import { LanguageService } from 'src/app/services/language.service';
+import { TechnologyService } from 'src/app/services/technology.service';
+import { Post } from 'src/models/post';
+import { FeedService } from 'src/app/services/feed.service';
+import { TokenService } from 'src/app/services/token.service';
 
 @Component({
   selector: 'app-profile',
@@ -20,11 +21,9 @@ export class ProfileComponent implements OnInit {
   public loggedInUser = false;
   public dataArrived = false;
   public user: User;
-  public userPosts: Post[] = [];
-  public showNoLangMsg = false;
-  public showNoTechMsg = false;
+  public userPosts: Post[];
 
-  constructor(private _router: Router, private _userService: UserService, private _languageService: LanguageService, private _technologyService: TechnologyService, private _feedService: FeedService, private _location: Location)
+  constructor(private _router: Router, private _userService: UserService, private _languageService: LanguageService, private _technologyService: TechnologyService, private _feedService: FeedService, private _location: Location, private _tokenService: TokenService)
   { }
 
   private setDefaultUser(): void {
@@ -34,26 +33,28 @@ export class ProfileComponent implements OnInit {
   ngOnInit(): void {
     this._urlUsername = this._router.url.substring(9);
     this.user = this._userService.getDefaultUser();
+    this.userPosts = [];
 
     this._userService.getUserByUsernameRequest(this._urlUsername).subscribe(
-      (res: object) => this.loadLanguages(res),
-      (err: HttpErrorResponse) => { this._router.navigate(['/not-found']); }
+      (res: object) => {
+        Object.assign(this.user, res);
+        this.loadLanguages();
+      },
+      (err: HttpErrorResponse) => {
+        this._router.navigate(['/not-found']);
+      }
     );
   }
 
-  private loadLanguages(res: object): void {
-    Object.assign(this.user, res);
-
+  private loadLanguages(): void {
     if (this.user.languages.length > 0) {
       // When user has languages, get their names and load technologies
-      this._languageService.getFullLanguagesFromIncomplete(this.user.languages)
-        .then(value => {
-          this.user.languages = value;
-          this.loadTechnologies();
-       });
+      this._languageService.getFullLanguagesFromIncomplete(this.user.languages).then(value => {
+        this.user.languages = value;
+        this.loadTechnologies();
+      });
     }
     else {
-      this.showNoLangMsg = true;
       this.loadTechnologies();
     }
   }
@@ -61,14 +62,12 @@ export class ProfileComponent implements OnInit {
   private loadTechnologies(): void {
     if (this.user.technologies.length > 0) {
       // When user has technologies, get their names and then load posts
-      this._technologyService.getFullTechnologiesFromIncomplete(this.user.technologies)
-        .then(value => {
-          this.user.technologies = value;
-          this.loadPosts();
-        });
+      this._technologyService.getFullTechnologiesFromIncomplete(this.user.technologies).then(value => {
+        this.user.technologies = value;
+        this.loadPosts();
+      });
     }
     else {
-      this.showNoTechMsg = true;
       this.loadPosts();
     }
   }
@@ -89,10 +88,6 @@ export class ProfileComponent implements OnInit {
   }
 
   private finishUserLoading(): void {
-    if (this.user.imageUrl === '') {
-      this.user.imageUrl = AppConstants.FALLBACK_PROFILE_ICON;
-    }
-
     if (sessionStorage.getItem('UserCred')) {
       const userFromToken: User = this._userService.getDefaultUser();
 
@@ -105,7 +100,9 @@ export class ProfileComponent implements OnInit {
           }
           this.dataArrived = true;
         },
-        (err: HttpErrorResponse) => this.bailOnBadToken()
+        (err: HttpErrorResponse) => {
+          this.logout();
+        }
       );
     }
     else {
@@ -113,17 +110,8 @@ export class ProfileComponent implements OnInit {
     }
   }
 
-  private bailOnBadToken(): void {
-    this._userService.logoutUserFromSessionStorage();
-    this._router.navigate(['/login']);
-  }
-
   goBack(): void {
-    const currURL = this._location.path();
-    this._location.back();
-    if (this._location.path() === currURL) {
-      this._router.navigate(['/']);
-    }
+    this._router.navigate(['/']);
   }
 
   navigateToSettings(): void {
@@ -131,7 +119,7 @@ export class ProfileComponent implements OnInit {
   }
 
   logout(): void {
-    this._userService.logoutUserFromSessionStorage();
+    this._tokenService.logoutUserFromSessionStorage();
 
     // Reload the page
     this._router.routeReuseStrategy.shouldReuseRoute = () => false;
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 832d176..36eaa55 100644
--- a/src/DevHive.Angular/src/app/components/register/register.component.ts
+++ b/src/DevHive.Angular/src/app/components/register/register.component.ts
@@ -1,10 +1,11 @@
-import {HttpErrorResponse} from '@angular/common/http';
+import { HttpErrorResponse } from '@angular/common/http';
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { AbstractControl, FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
 import { Title } from '@angular/platform-browser';
 import { Router } from '@angular/router';
+import { TokenService } from 'src/app/services/token.service';
 import { UserService } from 'src/app/services/user.service';
-import {ErrorBarComponent} from '../error-bar/error-bar.component';
+import { ErrorBarComponent } from '../error-bar/error-bar.component';
 
 @Component({
   selector: 'app-register',
@@ -16,7 +17,7 @@ export class RegisterComponent implements OnInit {
   private _title = 'Register';
   public registerUserFormGroup: FormGroup;
 
-  constructor(private _titleService: Title, private _fb: FormBuilder, private _router: Router, private _userService: UserService) {
+  constructor(private _titleService: Title, private _fb: FormBuilder, private _router: Router, private _userService: UserService, private _tokenService: TokenService) {
     this._titleService.setTitle(this._title);
   }
 
@@ -50,16 +51,15 @@ export class RegisterComponent implements OnInit {
 
   onSubmit(): void {
     this._userService.registerUserRequest(this.registerUserFormGroup).subscribe(
-        res => this.finishRegister(res),
-        (err: HttpErrorResponse) => this._errorBar.showError(err)
+        res => {
+          this._tokenService.setUserTokenToSessionStorage(res);
+          this._router.navigate(['/']);
+        },
+        (err: HttpErrorResponse) => {
+          this._errorBar.showError(err);
+        }
     );
   }
-
-  private finishRegister(res: object): void {
-    this._userService.setUserTokenToSessionStorage(res);
-    this._router.navigate(['/']);
-  }
-
   onRedirectLogin(): void {
     this._router.navigate(['/login']);
   }
diff --git a/src/DevHive.Angular/src/app/components/success-bar/success-bar.component.ts b/src/DevHive.Angular/src/app/components/success-bar/success-bar.component.ts
index f7db0e2..f7c7e54 100644
--- a/src/DevHive.Angular/src/app/components/success-bar/success-bar.component.ts
+++ b/src/DevHive.Angular/src/app/components/success-bar/success-bar.component.ts
@@ -8,7 +8,8 @@ import { Component, OnInit } from '@angular/core';
 export class SuccessBarComponent implements OnInit {
   public successMsg = '';
 
-  constructor() { }
+  constructor()
+  { }
 
   ngOnInit(): void {
     this.hideMsg();
diff --git a/src/DevHive.Angular/src/app/services/feed.service.ts b/src/DevHive.Angular/src/app/services/feed.service.ts
index cb82bcd..d160f6d 100644
--- a/src/DevHive.Angular/src/app/services/feed.service.ts
+++ b/src/DevHive.Angular/src/app/services/feed.service.ts
@@ -1,24 +1,28 @@
-import {HttpClient, HttpHeaders, HttpParams} from '@angular/common/http';
-import {Injectable} from '@angular/core';
-import {Guid} from 'guid-typescript';
-import {Observable} from 'rxjs';
-import {IJWTPayload} from 'src/interfaces/jwt-payload';
-import {AppConstants} from '../app-constants.module';
-import jwt_decode from 'jwt-decode';
-import {IUserCredentials} from 'src/interfaces/user-credentials';
+import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Guid } from 'guid-typescript';
+import { Observable } from 'rxjs';
+import { AppConstants } from '../app-constants.module';
+import { TokenService } from './token.service';
 
 @Injectable({
   providedIn: 'root'
 })
 export class FeedService {
-  constructor(private http: HttpClient) { }
+  constructor(private _http: HttpClient, private _tokenService: TokenService)
+  { }
+
+  /* Requests from session storage */
 
   getUserFeedFromSessionStorageRequest(pageNumber: number, firstTimeIssued: string, pageSize: number): Observable<object> {
-    const jwt: IJWTPayload = { token: sessionStorage.getItem('UserCred') ?? '' };
-    const userCred = jwt_decode<IUserCredentials>(jwt.token);
-    return this.getUserFeedRequest(userCred.ID, jwt.token, pageNumber, firstTimeIssued, pageSize);
+    const token = this._tokenService.getTokenFromSessionStorage();
+    const userId = this._tokenService.getUserIdFromSessionStorageToken();
+
+    return this.getUserFeedRequest(userId, token, pageNumber, firstTimeIssued, pageSize);
   }
 
+  /* Feed requests */
+
   getUserFeedRequest(userId: Guid, authToken: string, pageNumber: number, firstTimeIssued: string, pageSize: number): Observable<object> {
     const body = {
       pageNumber: pageNumber,
@@ -29,7 +33,7 @@ export class FeedService {
       params: new HttpParams().set('UserId', userId.toString()),
       headers: new HttpHeaders().set('Authorization', 'Bearer ' + authToken)
     };
-    return this.http.post(AppConstants.API_FEED_URL + '/GetPosts', body, options);
+    return this._http.post(AppConstants.API_FEED_URL + '/GetPosts', body, options);
   }
 
   getUserPostsRequest(userName: string, pageNumber: number, firstTimeIssued: string, pageSize: number): Observable<object> {
@@ -41,6 +45,6 @@ export class FeedService {
     const options = {
       params: new HttpParams().set('UserName', userName)
     };
-    return this.http.post(AppConstants.API_FEED_URL + '/GetUserPosts', body, options);
+    return this._http.post(AppConstants.API_FEED_URL + '/GetUserPosts', body, options);
   }
 }
diff --git a/src/DevHive.Angular/src/app/services/language.service.ts b/src/DevHive.Angular/src/app/services/language.service.ts
index d85f178..49be537 100644
--- a/src/DevHive.Angular/src/app/services/language.service.ts
+++ b/src/DevHive.Angular/src/app/services/language.service.ts
@@ -1,33 +1,40 @@
-import {HttpClient, HttpHeaders, HttpParams} from '@angular/common/http';
-import {Injectable} from '@angular/core';
-import {Guid} from 'guid-typescript';
-import {Observable} from 'rxjs';
-import {Language} from 'src/models/identity/user';
-import {AppConstants} from '../app-constants.module';
+import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Guid } from 'guid-typescript';
+import { Observable } from 'rxjs';
+import { Language } from 'src/models/language';
+import { AppConstants } from '../app-constants.module';
+import { TokenService } from './token.service';
 
 @Injectable({
   providedIn: 'root'
 })
 export class LanguageService {
-  constructor(private http: HttpClient) { }
+  constructor(private _http: HttpClient, private _tokenService: TokenService)
+  { }
+
+  /* Requests from session storage */
+
+  getAllLanguagesWithSessionStorageRequest(): Observable<object> {
+    const token = this._tokenService.getTokenFromSessionStorage();
+
+    return this.getAllLanguagesRequest(token);
+  }
+
+  /* Language requests */
 
   getLanguageRequest(langId: Guid): Observable<object> {
     const options = {
       params: new HttpParams().set('Id', langId.toString()),
     };
-    return this.http.get(AppConstants.API_LANGUAGE_URL, options);
-  }
-
-  getAllLanguagesWithSessionStorageRequest(): Observable<object> {
-    const token = sessionStorage.getItem('UserCred') ?? '';
-    return this.getAllLanguagesRequest(token);
+    return this._http.get(AppConstants.API_LANGUAGE_URL, options);
   }
 
   getAllLanguagesRequest(authToken: string): Observable<object> {
     const options = {
       headers: new HttpHeaders().set('Authorization', 'Bearer ' + authToken)
     };
-    return this.http.get(AppConstants.API_LANGUAGE_URL + '/GetLanguages', options);
+    return this._http.get(AppConstants.API_LANGUAGE_URL + '/GetLanguages', options);
   }
 
   getFullLanguagesFromIncomplete(givenLanguages: Language[]): Promise<Language[]> {
diff --git a/src/DevHive.Angular/src/app/services/post.service.ts b/src/DevHive.Angular/src/app/services/post.service.ts
index 4cd96bc..a35a323 100644
--- a/src/DevHive.Angular/src/app/services/post.service.ts
+++ b/src/DevHive.Angular/src/app/services/post.service.ts
@@ -1,25 +1,49 @@
-import {HttpClient, HttpParams} from '@angular/common/http';
-import {Injectable} from '@angular/core';
-import {Guid} from 'guid-typescript';
-import {Observable} from 'rxjs';
-import {Post} from 'src/models/post';
-import {AppConstants} from '../app-constants.module';
+import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Guid } from 'guid-typescript';
+import { Observable } from 'rxjs';
+import { Post } from 'src/models/post';
+import { AppConstants } from '../app-constants.module';
+import { TokenService } from './token.service';
 
 @Injectable({
   providedIn: 'root'
 })
 export class PostService {
-  constructor(private http: HttpClient) { }
+  constructor(private _http: HttpClient, private _tokenService: TokenService)
+  { }
 
   getDefaultPost(): Post {
     return new Post(Guid.createEmpty(), 'Gosho', 'Trapov', 'gosho_trapov', 'Your opinion on my idea?', new Date());
   }
 
+  /* Requests from session storage */
+
+  createPostFromSessionStorageRequest(postMessage: string): Observable<object> {
+    const userId = this._tokenService.getUserIdFromSessionStorageToken();
+    const token = this._tokenService.getTokenFromSessionStorage();
+
+    return this.createPostRequest(userId, token, postMessage);
+  }
+
+  /* Post requests */
+
+  createPostRequest(userId: Guid, authToken: string, postMessage: string): Observable<object> {
+    const body = {
+      message: postMessage,
+      files: []
+    };
+    const options = {
+      params: new HttpParams().set('UserId', userId.toString()),
+      headers: new HttpHeaders().set('Authorization', 'Bearer ' + authToken)
+    };
+    return this._http.post(AppConstants.API_POST_URL, body, options);
+  }
+
   getPostRequest(id: Guid): Observable<object> {
     const options = {
       params: new HttpParams().set('Id', id.toString())
     };
-    return this.http.get(AppConstants.API_POST_URL, options);
+    return this._http.get(AppConstants.API_POST_URL, options);
   }
 }
-
diff --git a/src/DevHive.Angular/src/app/services/technology.service.ts b/src/DevHive.Angular/src/app/services/technology.service.ts
index 207303f..3d0829b 100644
--- a/src/DevHive.Angular/src/app/services/technology.service.ts
+++ b/src/DevHive.Angular/src/app/services/technology.service.ts
@@ -1,33 +1,40 @@
-import {HttpClient, HttpHeaders, HttpParams} from '@angular/common/http';
-import {Injectable} from '@angular/core';
-import {Guid} from 'guid-typescript';
-import {Observable} from 'rxjs';
-import {Technology} from 'src/models/identity/user';
-import {AppConstants} from '../app-constants.module';
+import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Guid } from 'guid-typescript';
+import { Observable } from 'rxjs';
+import { Technology } from 'src/models/technology';
+import { AppConstants } from '../app-constants.module';
+import { TokenService } from './token.service';
 
 @Injectable({
   providedIn: 'root'
 })
 export class TechnologyService {
-  constructor(private http: HttpClient) { }
+  constructor(private _http: HttpClient, private _tokenService: TokenService)
+  { }
+
+  /* Requests from session storage */
+
+  getAllTechnologiesWithSessionStorageRequest(): Observable<object> {
+    const token = this._tokenService.getTokenFromSessionStorage();
+
+    return this.getAllTechnologiesRequest(token);
+  }
+
+  /* Technology requests */
 
   getTechnologyRequest(techId: Guid): Observable<object> {
     const options = {
       params: new HttpParams().set('Id', techId.toString())
     };
-    return this.http.get(AppConstants.API_TECHNOLOGY_URL, options);
-  }
-
-  getAllTechnologiesWithSessionStorageRequest(): Observable<object> {
-    const token = sessionStorage.getItem('UserCred') ?? '';
-    return this.getAllTechnologiesRequest(token);
+    return this._http.get(AppConstants.API_TECHNOLOGY_URL, options);
   }
 
   getAllTechnologiesRequest(authToken: string): Observable<object> {
     const options = {
       headers: new HttpHeaders().set('Authorization', 'Bearer ' + authToken)
     };
-    return this.http.get(AppConstants.API_TECHNOLOGY_URL + '/GetTechnologies', options);
+    return this._http.get(AppConstants.API_TECHNOLOGY_URL + '/GetTechnologies', options);
   }
 
   getFullTechnologiesFromIncomplete(givenTechnologies: Technology[]): Promise<Technology[]> {
@@ -56,5 +63,4 @@ export class TechnologyService {
       }
     });
   }
-
 }
diff --git a/src/DevHive.Angular/src/app/services/token.service.ts b/src/DevHive.Angular/src/app/services/token.service.ts
new file mode 100644
index 0000000..8131228
--- /dev/null
+++ b/src/DevHive.Angular/src/app/services/token.service.ts
@@ -0,0 +1,38 @@
+import { Injectable } from '@angular/core';
+import { Guid } from 'guid-typescript';
+import jwt_decode from 'jwt-decode';
+import { IJWTPayload } from 'src/interfaces/jwt-payload';
+import { IUserCredentials } from 'src/interfaces/user-credentials';
+import { AppConstants } from '../app-constants.module';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class TokenService {
+  constructor()
+  { }
+
+  /* Session storage */
+
+  setUserTokenToSessionStorage(response: object): void {
+    const token = JSON.stringify(response);
+    sessionStorage.setItem(AppConstants.SESSION_TOKEN_KEY, token.substr(10, token.length - 12));
+  }
+
+  getTokenFromSessionStorage(): string {
+    return sessionStorage.getItem(AppConstants.SESSION_TOKEN_KEY) ?? '';
+  }
+
+  getUserIdFromSessionStorageToken(): Guid {
+    const jwt: IJWTPayload = {
+      token: this.getTokenFromSessionStorage()
+    };
+    const userCred = jwt_decode<IUserCredentials>(jwt.token);
+
+    return userCred.ID;
+  }
+
+  logoutUserFromSessionStorage(): void {
+    sessionStorage.removeItem(AppConstants.SESSION_TOKEN_KEY);
+  }
+}
diff --git a/src/DevHive.Angular/src/app/services/user.service.ts b/src/DevHive.Angular/src/app/services/user.service.ts
index 6badf94..3bfc857 100644
--- a/src/DevHive.Angular/src/app/services/user.service.ts
+++ b/src/DevHive.Angular/src/app/services/user.service.ts
@@ -1,73 +1,59 @@
 import { Injectable } from '@angular/core';
-import {Guid} from 'guid-typescript';
+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';
 import { AppConstants } from 'src/app/app-constants.module';
-import {HttpClient, HttpErrorResponse, HttpHeaders, HttpParams} from '@angular/common/http';
-import {Observable} from 'rxjs';
+import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { Role } from 'src/models/identity/role';
+import { Friend } from 'src/models/identity/friend';
+import { TokenService } from './token.service';
 
 @Injectable({
   providedIn: 'root'
 })
 export class UserService {
-  constructor(private http: HttpClient) { }
+  constructor(private _http: HttpClient, private _tokenService: TokenService)
+  { }
 
   getDefaultUser(): User {
-    return new User(Guid.createEmpty(), 'gosho_trapov', 'Gosho', 'Trapov', 'gotra@bg.com', AppConstants.FALLBACK_PROFILE_ICON, new Array(), new Array());
+    return new User(Guid.createEmpty(), 'gosho_trapov', 'Gosho', 'Trapov', 'gotra@bg.com', AppConstants.FALLBACK_PROFILE_ICON, [], [], [], []);
   }
 
-  getUserIdFromSessionStorageToken(): Guid {
-    const jwt: IJWTPayload = { token: sessionStorage.getItem('UserCred') ?? '' };
-    const userCred = jwt_decode<IUserCredentials>(jwt.token);
-    return userCred.ID;
-  }
-
-  setUserTokenToSessionStorage(response: object): void {
-    const token = JSON.stringify(response);
-    sessionStorage.setItem('UserCred', token.substr(10, token.length - 12));
-  }
+  /* Requests from session storage */
 
   getUserFromSessionStorageRequest(): Observable<object> {
-    // Get the token and userid from session storage
-    const jwt: IJWTPayload = { token: sessionStorage.getItem('UserCred') ?? '' };
-    const userCred = jwt_decode<IUserCredentials>(jwt.token);
+    const userId = this._tokenService.getUserIdFromSessionStorageToken();
+    const token = this._tokenService.getTokenFromSessionStorage();
 
-    return this.getUserRequest(userCred.ID, jwt.token);
+    return this.getUserRequest(userId, token);
   }
 
-  putUserFromSessionStorageRequest(updateUserFormGroup: FormGroup): Observable<object> {
-    // Get the token and userid from session storage
-    const jwt: IJWTPayload = { token: sessionStorage.getItem('UserCred') ?? '' };
-    const userCred = jwt_decode<IUserCredentials>(jwt.token);
+  putUserFromSessionStorageRequest(updateUserFormGroup: FormGroup, userRoles: Role[], userFriends: Friend[]): Observable<object> {
+    const userId = this._tokenService.getUserIdFromSessionStorageToken();
+    const token = this._tokenService.getTokenFromSessionStorage();
 
-    return this.putUserRequest(userCred.ID, jwt.token, updateUserFormGroup);
+    return this.putUserRequest(userId, token, updateUserFormGroup, userRoles, userFriends);
   }
 
   deleteUserFromSessionStorageRequest(): Observable<object> {
-    // Get the token and userid from session storage
-    const jwt: IJWTPayload = { token: sessionStorage.getItem('UserCred') ?? '' };
-    const userCred = jwt_decode<IUserCredentials>(jwt.token);
+    const userId = this._tokenService.getUserIdFromSessionStorageToken();
+    const token = this._tokenService.getTokenFromSessionStorage();
 
-    return this.deleteUserRequest(userCred.ID, jwt.token);
+    return this.deleteUserRequest(userId, token);
   }
 
-  logoutUserFromSessionStorage(): void {
-    sessionStorage.removeItem('UserCred');
-  }
+  /* User requests */
 
   loginUserRequest(loginUserFormGroup: FormGroup): Observable<object> {
     const body = {
       UserName: loginUserFormGroup.get('username')?.value,
       Password: loginUserFormGroup.get('password')?.value
-   };
-    return this.http.post(AppConstants.API_USER_LOGIN_URL, body);
+    };
+    return this._http.post(AppConstants.API_USER_LOGIN_URL, body);
   }
 
   registerUserRequest(registerUserFormGroup: FormGroup): Observable<object> {
-    // TODO?: add a check for form data validity
     const body = {
       UserName: registerUserFormGroup.get('username')?.value,
       Email: registerUserFormGroup.get('email')?.value,
@@ -75,7 +61,7 @@ export class UserService {
       LastName: registerUserFormGroup.get('lastName')?.value,
       Password: registerUserFormGroup.get('password')?.value
     };
-    return this.http.post(AppConstants.API_USER_REGISTER_URL, body);
+    return this._http.post(AppConstants.API_USER_REGISTER_URL, body);
   }
 
   getUserRequest(userId: Guid, authToken: string): Observable<object> {
@@ -83,26 +69,25 @@ export class UserService {
       params: new HttpParams().set('Id', userId.toString()),
       headers: new HttpHeaders().set('Authorization', 'Bearer ' + authToken)
     };
-    return this.http.get(AppConstants.API_USER_URL, options);
+    return this._http.get(AppConstants.API_USER_URL, options);
   }
 
   getUserByUsernameRequest(username: string): Observable<object> {
     const options = {
       params: new HttpParams().set('UserName', username),
     };
-    return this.http.get(AppConstants.API_USER_URL + '/GetUser', options);
+    return this._http.get(AppConstants.API_USER_URL + '/GetUser', options);
   }
 
-  putUserRequest(userId: Guid, authToken: string, updateUserFormGroup: FormGroup): Observable<object> {
+  putUserRequest(userId: Guid, authToken: string, updateUserFormGroup: FormGroup, userRoles: Role[], userFriends: Friend[]): Observable<object> {
     const body = {
       UserName: updateUserFormGroup.get('username')?.value,
       Email: updateUserFormGroup.get('email')?.value,
       FirstName: updateUserFormGroup.get('firstName')?.value,
       LastName: updateUserFormGroup.get('lastName')?.value,
       Password: updateUserFormGroup.get('password')?.value,
-      // TODO: make the following fields dynamically selectable
-      Roles: [ { Name: 'User' } ],
-      Friends: [],
+      Roles: userRoles,
+      Friends: userFriends,
       Languages: updateUserFormGroup.get('languages')?.value,
       Technologies: updateUserFormGroup.get('technologies')?.value
     };
@@ -110,7 +95,7 @@ export class UserService {
       params: new HttpParams().set('Id', userId.toString()),
       headers: new HttpHeaders().set('Authorization', 'Bearer ' + authToken)
     };
-    return this.http.put(AppConstants.API_USER_URL, body, options);
+    return this._http.put(AppConstants.API_USER_URL, body, options);
   }
 
   deleteUserRequest(userId: Guid, authToken: string): Observable<object> {
@@ -118,6 +103,6 @@ export class UserService {
       params: new HttpParams().set('Id', userId.toString()),
       headers: new HttpHeaders().set('Authorization', 'Bearer ' + authToken)
     };
-    return this.http.delete(AppConstants.API_USER_URL, options);
+    return this._http.delete(AppConstants.API_USER_URL, options);
   }
 }
diff --git a/src/DevHive.Angular/src/models/identity/friend.ts b/src/DevHive.Angular/src/models/identity/friend.ts
new file mode 100644
index 0000000..22290cd
--- /dev/null
+++ b/src/DevHive.Angular/src/models/identity/friend.ts
@@ -0,0 +1,3 @@
+export class Friend {
+  public userName: string;
+}
diff --git a/src/DevHive.Angular/src/models/identity/role.ts b/src/DevHive.Angular/src/models/identity/role.ts
new file mode 100644
index 0000000..132b0b0
--- /dev/null
+++ b/src/DevHive.Angular/src/models/identity/role.ts
@@ -0,0 +1,3 @@
+export class Role {
+  public name: string;
+}
diff --git a/src/DevHive.Angular/src/models/identity/user.ts b/src/DevHive.Angular/src/models/identity/user.ts
index c92ed26..020a403 100644
--- a/src/DevHive.Angular/src/models/identity/user.ts
+++ b/src/DevHive.Angular/src/models/identity/user.ts
@@ -1,14 +1,8 @@
 import { Guid } from 'guid-typescript';
-
-export class Language {
-  public id: Guid;
-  public name: string;
-}
-
-export class Technology {
-  public id: Guid;
-  public name: string;
-}
+import { Language } from '../language';
+import { Technology } from '../technology';
+import { Friend } from './friend';
+import { Role } from './role';
 
 export class User {
   private _id : Guid;
@@ -19,15 +13,19 @@ export class User {
   private _imageUrl : string;
   private _languages: Language[];
   private _technologies: Technology[];
+  private _roles: Role[];
+  private _friends: Friend[];
 
-  constructor(id: Guid, userName: string, firstName: string, lastName: string, email: string, imageUrl: string, languages: Language[], technologies: Technology[]) {
+  constructor(id: Guid, userName: string, firstName: string, lastName: string, email: string, imageUrl: string, languages: Language[], technologies: Technology[], roles: Role[], friends: Friend[]) {
     this.id = id;
     this.userName = userName;
     this.firstName = firstName;
     this.lastName = lastName;
     this.email = email;
     this.imageUrl = imageUrl;
+    this.languages = languages;
     this.technologies = technologies;
+    this.roles = roles;
   }
 
   public get id(): Guid {
@@ -85,4 +83,18 @@ export class User {
   public set technologies(v: Technology[]) {
     this._technologies = v;
   }
+
+  public get roles(): Role[] {
+    return this._roles;
+  }
+  public set roles(v: Role[]) {
+    this._roles = v;
+  }
+
+  public get friends(): Friend[] {
+    return this._friends;
+  }
+  public set friends(v: Friend[]) {
+    this._friends = v;
+  }
 }
diff --git a/src/DevHive.Angular/src/models/language.ts b/src/DevHive.Angular/src/models/language.ts
new file mode 100644
index 0000000..e3aa61e
--- /dev/null
+++ b/src/DevHive.Angular/src/models/language.ts
@@ -0,0 +1,6 @@
+import { Guid } from 'guid-typescript';
+
+export class Language {
+  public id: Guid;
+  public name: string;
+}
diff --git a/src/DevHive.Angular/src/models/post.ts b/src/DevHive.Angular/src/models/post.ts
index 2d7d79f..4c6ac20 100644
--- a/src/DevHive.Angular/src/models/post.ts
+++ b/src/DevHive.Angular/src/models/post.ts
@@ -1,4 +1,4 @@
-import {Guid} from 'guid-typescript';
+import { Guid } from 'guid-typescript';
 
 export class Post {
   private _postId: Guid;
diff --git a/src/DevHive.Angular/src/models/technology.ts b/src/DevHive.Angular/src/models/technology.ts
new file mode 100644
index 0000000..1869d14
--- /dev/null
+++ b/src/DevHive.Angular/src/models/technology.ts
@@ -0,0 +1,6 @@
+import { Guid } from 'guid-typescript';
+
+export class Technology {
+  public id: Guid;
+  public name: string;
+}
diff --git a/src/DevHive.Angular/src/styles.css b/src/DevHive.Angular/src/styles.css
index aaa1bd5..2af47c6 100644
--- a/src/DevHive.Angular/src/styles.css
+++ b/src/DevHive.Angular/src/styles.css
@@ -77,7 +77,8 @@ input:focus, button:focus {
   border-radius: .4em;
   background-color: lightgrey;
   padding: .26em;
-  margin: 0 .2em;
+  margin: .1em .2em;
+  width: fit-content;
 }
 
 /* Inputs, the type found in login and register */