Merge pull request #84 from Mueller-Patrick/BETTERZON-140

BETTERZON-140: Product Details Part 1

Backend/src/models/contact_persons/contact_persons.router.ts

@@ -76,7 +76,9 @@ contactpersonsRouter.post('/', async (req: Request, res: Response) => {
     try {
         // Authenticate user
         const user_ip = req.connection.remoteAddress ?? '';
-        const user = await UserService.checkSessionWithCookie(req.cookies.betterauth, user_ip);
+        const session_id = req.body.session_id;
+        const session_key = req.body.session_key;
+        const user = await UserService.checkSession(session_id, session_key, user_ip);
 
         // Get required parameters
         const vendor_id = req.body.vendor_id;
@@ -104,7 +106,9 @@ contactpersonsRouter.put('/:id', async (req: Request, res: Response) => {
     try {
         // Authenticate user
         const user_ip = req.connection.remoteAddress ?? '';
-        const user = await UserService.checkSessionWithCookie(req.cookies.betterauth, user_ip);
+        const session_id = req.body.session_id;
+        const session_key = req.body.session_key;
+        const user = await UserService.checkSession(session_id, session_key, user_ip);
 
         // Get required parameters
         const contact_person_id = parseInt(req.params.id, 10);

Backend/src/models/crawling_status/crawling_status.router.ts

@@ -25,7 +25,9 @@ crawlingstatusRouter.get('/', async (req: Request, res: Response) => {
     try {
         // Authenticate user
         const user_ip = req.connection.remoteAddress ?? '';
-        const user = await UserService.checkSessionWithCookie(req.cookies.betterauth, user_ip);
+        const session_id = req.body.session_id;
+        const session_key = req.body.session_key;
+        const user = await UserService.checkSession(session_id, session_key, user_ip);
 
         if (!user.is_admin) {
             res.status(403).send({});

Backend/src/models/favorite_shops/favoriteshops.router.ts

@@ -24,7 +24,9 @@ favoriteshopsRouter.get('/', async (req: Request, res: Response) => {
     try {
         // Authenticate user
         const user_ip = req.connection.remoteAddress ?? '';
-        const user = await UserService.checkSessionWithCookie(req.cookies.betterauth, user_ip);
+        const session_id = req.params.session_id;
+        const session_key = req.params.session_key;
+        const user = await UserService.checkSession(session_id, session_key, user_ip);
 
         const priceAlarms = await FavoriteShopsService.getFavoriteShops(user.user_id);
 
@@ -40,7 +42,9 @@ favoriteshopsRouter.post('/', async (req: Request, res: Response) => {
     try {
         // Authenticate user
         const user_ip = req.connection.remoteAddress ?? '';
-        const user = await UserService.checkSessionWithCookie(req.cookies.betterauth, user_ip);
+        const session_id = req.body.session_id;
+        const session_key = req.body.session_key;
+        const user = await UserService.checkSession(session_id, session_key, user_ip);
 
         // Get info for price alarm creation
         const vendor_id = req.body.vendor_id;
@@ -72,7 +76,9 @@ favoriteshopsRouter.delete('/:id', async (req: Request, res: Response) => {
     try {
         // Authenticate user
         const user_ip = req.connection.remoteAddress ?? '';
-        const user = await UserService.checkSessionWithCookie(req.cookies.betterauth, user_ip);
+        const session_id = req.params.session_id;
+        const session_key = req.params.session_key;
+        const user = await UserService.checkSession(session_id, session_key, user_ip);
 
         // Get info for price alarm creation
         const favorite_id = parseInt(req.params.id, 10);

Backend/src/models/pricealarms/pricealarms.router.ts

@@ -24,7 +24,9 @@ pricealarmsRouter.get('/', async (req: Request, res: Response) => {
     try {
         // Authenticate user
         const user_ip = req.connection.remoteAddress ?? '';
-        const user = await UserService.checkSessionWithCookie(req.cookies.betterauth, user_ip);
+        const session_id = req.params.session_id;
+        const session_key = req.params.session_key;
+        const user = await UserService.checkSession(session_id, session_key, user_ip);
 
         const priceAlarms = await PriceAlarmsService.getPriceAlarms(user.user_id);
 
@@ -40,7 +42,9 @@ pricealarmsRouter.post('/', async (req: Request, res: Response) => {
     try {
         // Authenticate user
         const user_ip = req.connection.remoteAddress ?? '';
-        const user = await UserService.checkSessionWithCookie(req.cookies.betterauth, user_ip);
+        const session_id = req.body.session_id;
+        const session_key = req.body.session_key;
+        const user = await UserService.checkSession(session_id, session_key, user_ip);
 
         // Get info for price alarm creation
         const product_id = req.body.product_id;
@@ -73,7 +77,9 @@ pricealarmsRouter.put('/', async (req: Request, res: Response) => {
     try {
         // Authenticate user
         const user_ip = req.connection.remoteAddress ?? '';
-        const user = await UserService.checkSessionWithCookie(req.cookies.betterauth, user_ip);
+        const session_id = req.body.session_id;
+        const session_key = req.body.session_key;
+        const user = await UserService.checkSession(session_id, session_key, user_ip);
 
         // Get info for price alarm creation
         const alarm_id = req.body.alarm_id;

Backend/src/models/prices/prices.router.ts

@@ -107,7 +107,9 @@ pricesRouter.post('/', async (req: Request, res: Response) => {
     try {
         // Authenticate user
         const user_ip = req.connection.remoteAddress ?? '';
-        const user = await UserService.checkSessionWithCookie(req.cookies.betterauth, user_ip);
+        const session_id = req.body.session_id;
+        const session_key = req.body.session_key;
+        const user = await UserService.checkSession(session_id, session_key, user_ip);
 
         // Get required parameters
         const vendor_id = req.body.vendor_id;

Backend/src/models/users/users.router.ts

@@ -47,10 +47,10 @@ usersRouter.post('/register', async (req: Request, res: Response) => {
         const session: Session = await UserService.createUser(username, password, email, ip);
 
         // Send the session details back to the user
-        res.cookie('betterauth', JSON.stringify({
+        res.status(201).send({
-            id: session.session_id,
+            session_id: session.session_id,
-            key: session.session_key
+            session_key: session.session_key
-        }), {expires: new Date(Date.now() + 1000 * 60 * 60 * 24 * 30)}).status(201).send({});
+        });
     } catch (e) {
         console.log('Error handling a request: ' + e.message);
         res.status(500).send(JSON.stringify({'message': 'Internal Server Error. Try again later.'}));
@@ -80,10 +80,10 @@ usersRouter.post('/login', async (req: Request, res: Response) => {
         }
 
         // Send the session details back to the user
-        res.cookie('betterauth', JSON.stringify({
+        res.status(200).send({
-            id: session.session_id,
+            session_id: session.session_id,
-            key: session.session_key
+            session_key: session.session_key
-        }), {expires: new Date(Date.now() + 1000 * 60 * 60 * 24 * 30)}).status(200).send({});
+        });
     } catch (e) {
         console.log('Error handling a request: ' + e.message);
         res.status(500).send(JSON.stringify({'message': 'Internal Server Error. Try again later.'}));
@@ -94,15 +94,17 @@ usersRouter.post('/login', async (req: Request, res: Response) => {
 usersRouter.post('/checkSessionValid', async (req: Request, res: Response) => {
     try {
         const ip: string = req.connection.remoteAddress ?? '';
+        const session_id = req.body.session_id;
+        const session_key = req.body.session_key;
 
-        if(!req.cookies.betterauth) {
+        if(!session_id || !session_key) {
             // Error logging in, probably wrong username / password
             res.status(401).send(JSON.stringify({messages: ['No session detected'], codes: [5]}));
             return;
         }
 
         // Update the user entry and create a session
-        const user: User = await UserService.checkSessionWithCookie(req.cookies.betterauth, ip);
+        const user: User = await UserService.checkSession(session_id, session_key, ip);
 
         if (!user.user_id) {
             // Error logging in, probably wrong username / password

Backend/src/models/users/users.service.ts

@@ -115,8 +115,8 @@ export const login = async (username: string, password: string, ip: string): Pro
         const sessionKeyHash = bcrypt.hashSync(sessionKey, 10);
 
         // Update user entry in SQL
-        const userQuery = 'UPDATE users SET last_login_date = NOW()';
+        const userQuery = 'UPDATE users SET last_login_date = NOW() WHERE user_id = ?';
-        const userIdRes = await conn.query(userQuery);
+        const userIdRes = await conn.query(userQuery, userId);
         await conn.commit();
 
         // Create session

Backend/src/models/vendors/vendors.router.ts

@@ -37,7 +37,9 @@ vendorsRouter.get('/managed', async (req: Request, res: Response) => {
     try {
         // Authenticate user
         const user_ip = req.connection.remoteAddress ?? '';
-        const user = await UserService.checkSessionWithCookie(req.cookies.betterauth, user_ip);
+        const session_id = req.params.session_id;
+        const session_key = req.params.session_key;
+        const user = await UserService.checkSession(session_id, session_key, user_ip);
 
         const vendors = await VendorService.getManagedShops(user.user_id);
 
@@ -91,7 +93,9 @@ vendorsRouter.put('/manage/deactivatelisting', async (req: Request, res: Respons
     try {
         // Authenticate user
         const user_ip = req.connection.remoteAddress ?? '';
-        const user = await UserService.checkSessionWithCookie(req.cookies.betterauth, user_ip);
+        const session_id = req.body.session_id;
+        const session_key = req.body.session_key;
+        const user = await UserService.checkSession(session_id, session_key, user_ip);
 
         // Get required parameters
         const vendor_id = req.body.vendor_id;
@@ -115,7 +119,9 @@ vendorsRouter.put('/manage/shop/deactivate/:id', async (req: Request, res: Respo
     try {
         // Authenticate user
         const user_ip = req.connection.remoteAddress ?? '';
-        const user = await UserService.checkSessionWithCookie(req.cookies.betterauth, user_ip);
+        const session_id = req.body.session_id;
+        const session_key = req.body.session_key;
+        const user = await UserService.checkSession(session_id, session_key, user_ip);
 
         // Get required parameters
         const vendor_id = parseInt(req.params.id, 10);
@@ -138,7 +144,9 @@ vendorsRouter.put('/manage/shop/activate/:id', async (req: Request, res: Respons
     try {
         // Authenticate user
         const user_ip = req.connection.remoteAddress ?? '';
-        const user = await UserService.checkSessionWithCookie(req.cookies.betterauth, user_ip);
+        const session_id = req.body.session_id;
+        const session_key = req.body.session_key;
+        const user = await UserService.checkSession(session_id, session_key, user_ip);
 
         // Get required parameters
         const vendor_id = parseInt(req.params.id, 10);

Frontend/src/app/components/auth/registration/registration.component.css

@@ -61,7 +61,7 @@ form{
 }
 .btn_signin{
     transition: all .5s ease;
-    width: 70%;
+    width: 100%;
     border-radius: 30px;
     color:#008080;
     font-weight: 600;

Frontend/src/app/components/auth/registration/registration.component.html

@@ -9,27 +9,30 @@
                     <h2>Konto erstellen</h2>
                 </div>
                 <div class="row">
-                    <form control="" class="form-group">
+                    <form [formGroup]="form" class="form-group" (ngSubmit)="onSubmit()">
                         <div class="row">
-                            <input type="text" name="username" id="username" class="form__input" placeholder="Nickname">
+                            <input type="text" formControlName="username" id="username" name="username" class="form__input" placeholder="Username">
+                            <div *ngIf="submitted && me.username.errors" class="invalid-feedback">
+                                <div *ngIf="me.username.errors.required">Username is required</div>
+                            </div>
                         </div>
                         <div class="row">
                             <!-- <span class="fa fa-lock"></span> -->
-                            <input type="password" name="password" id="email" class="form__input" placeholder= "E-Mail">
+                            <input type="email" formControlName="email" name="email" id="email" class="form__input" placeholder= "E-Mail">
                         </div>
                         <div class="row">
                             <!-- <span class="fa fa-lock"></span> -->
-                            <input type="password" name="password" id="password" class="form__input" placeholder="Kennwort erstellen">
+                            <input type="password" formControlName="password" name="password" id="password" class="form__input" placeholder="Kennwort">
                         </div>
+                        <!--
                         <div class="row">
-                            <!-- <span class="fa fa-lock"></span> -->
                             <input type="password" name="password" id="password_repeated" class="form__input" placeholder="Kennwort bestätigen">
-                        </div>
+                        </div> -->
                         <div class="row">
                             <input type="submit" value="Erstellen" class="btn_signin">
                         </div>
                         <div class="row">
-                            <p>Haben Sie bereits ein Konto?<a href="/signin">Sich anmelden</a></p>
+                            <a href="/signin">Sich anmelden</a>
                         </div>
                     </form>
                 </div>

Frontend/src/app/components/auth/registration/registration.component.ts

@@ -1,4 +1,7 @@
 import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import {ApiService} from "../../../services/api.service";
+
 
 @Component({
   selector: 'app-registration',
@@ -6,10 +9,29 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./registration.component.css']
 })
 export class RegistrationComponent implements OnInit {
+    form: any;
+    loading = false;
+    submitted = false;
 
-  constructor() { }
+  constructor(
+      private formBuilder: FormBuilder,
+      private api : ApiService
+  ) { }
 
   ngOnInit(): void {
+      this.form = this.formBuilder.group({
+          username: ['', Validators.required],
+          email: ['', Validators.required],
+          password: ['', [
+              Validators.required,
+              Validators.minLength(8)]
+          ],
+      });
   }
 
+  get me() { return this.form.controls; }
+
+  onSubmit() {
+      this.api.registerUser(this.form.value.username, this.form.value.password, this.form.value.email).subscribe(res=>console.log(res));
+  }
 }

Frontend/src/app/components/auth/signin/signin.component.css

@@ -61,7 +61,7 @@ form{
 }
 .btn_signin{
     transition: all .5s ease;
-    width: 70%;
+    width: 100%;
     border-radius: 30px;
     color:#008080;
     font-weight: 600;

Frontend/src/app/components/auth/signin/signin.component.html

@@ -9,13 +9,13 @@
                     <h2>Anmelden</h2>
                 </div>
                 <div class="row">
-                    <form control="" class="form-group">
+                    <form [formGroup]="loginForm" class="form-group" (ngSubmit)="onSubmit()">
                         <div class="row">
-                            <input type="text" name="username" id="username" class="form__input" placeholder="Username">
+                            <input type="text" formControlName="username" name="username" id="username" class="form__input" placeholder="Username">
                         </div>
                         <div class="row">
                             <!-- <span class="fa fa-lock"></span> -->
-                            <input type="password" name="password" id="password" class="form__input" placeholder="Password">
+                            <input type="password" formControlName="password" name="password" id="password" class="form__input" placeholder="Password">
                         </div>
                         <div class="row">
                             <input type="submit" value="Anmelden" class="btn_signin">
@@ -23,7 +23,7 @@
                     </form>
                 </div>
                 <div class="row">
-                    <p>Noch kein Konto?<a href="/registration">Konto erstellen</a></p>
+                    <a href="/registration">Konto erstellen</a>
                 </div>
             </div>
         </div>

Frontend/src/app/components/auth/signin/signin.component.ts

@@ -1,4 +1,7 @@
 import {Component, OnInit} from '@angular/core';
+import {FormBuilder, FormGroup, Validators} from '@angular/forms';
+import {ApiService} from '../../../services/api.service';
+import {Router} from '@angular/router';
 
 @Component({
     selector: 'app-signin',
@@ -8,12 +11,46 @@ import { Component, OnInit } from '@angular/core';
 
 export class SigninComponent implements OnInit {
 
-  constructor() { }
+    loginForm: FormGroup;
+    loading = false;
+    submitted = false;
+    private isSuccessful: boolean;
+    private isSignUpFailed: boolean;
+    private errorMessage: '';
+
+
+    constructor(
+        private formBuilder: FormBuilder,
+        private api: ApiService,
+        private router: Router
+    ) {
+    }
 
     ngOnInit(): void {
+        this.loginForm = this.formBuilder.group({
+            username: ['', Validators.required],
+            password: ['', [Validators.required, Validators.minLength(8)]]
+        });
     }
 
-    onSubmit() {
+    onSubmit(): void {
+        this.submitted = true;
 
+        if (this.loginForm.invalid) {
+            return;
+        }
+
+        this.api.loginUser(this.loginForm.value.username, this.loginForm.value.password)
+            .subscribe(
+                data => {
+                    this.router.navigate(['']);
+                    this.isSuccessful = true;
+                    this.isSignUpFailed = false;
+                    this.api.saveSessionInfoToLocalStorage(data);
+                },
+                err => {
+                    this.errorMessage = err.error.message;
+                    this.isSignUpFailed = true;
+                });
     }
 }

Frontend/src/app/components/hot-deals-widget/hot-deals-widget.component.html

@@ -9,7 +9,7 @@
         <!-- Portfolio Grid Items-->
         <div class="row justify-content-center">
             <!-- Portfolio Item 1-->
-            <div class="col-md-4 mx-auto my-5" *ngFor="let product of products">
+            <div class="col-md-4 mx-auto my-5" *ngFor="let product of products" (click)="clickedProduct(product)">
                 <div class="bbb_deals_wrapper">
                     <div class="bbb_deals_image"><img src="https://www.mueller-patrick.tech/betterzon/images/{{product.image_guid}}.jpg" alt=""></div>
                     <div class="bbb_deals_content">
@@ -17,7 +17,7 @@
                             <div class="bbb_deals_item_name">{{product.name}}</div>
                         </div>
                         <div class="bbb_deals_info_line d-flex flex-row justify-content-start">
-                            <div class="bbb_deals_item_category">Amazon: <span id="bbb_deals_item_price_a"><strike>699.00$</strike></span></div>
+                            <div class="bbb_deals_item_category">Amazon: <span id="bbb_deals_item_price_a"><strike>{{product.price}}$</strike></span></div>
                         </div>
                         <div class="bbb_deals_info_line d-flex flex-row justify-content-start">
                             <div class="bbb_deals_item_category">Plantshub: <span id="bbb_deals_item_price_b">599,00$</span></div>

Frontend/src/app/components/top-bar/top-bar.component.ts

@@ -1,4 +1,6 @@
 import { Component, OnInit } from '@angular/core';
+import {ApiService} from "../../services/api.service";
+
 
 @Component({
   selector: 'app-top-bar',
@@ -9,9 +11,12 @@ export class TopBarComponent implements OnInit {
 
   sidenav: any;
 
-  constructor() { }
+  constructor(
+      private api: ApiService
+  ) { }
 
     ngOnInit() {
-    }
 
+        this.api.getUserInfo().subscribe(data=>{console.log(data)});
+    }
 }

Frontend/src/app/models/product.ts

@@ -11,4 +11,5 @@ export interface Product {
     manufacturer_id: number;
     selling_rank: string;
     category_id: number;
+    price: number;
 }

Frontend/src/app/pages/product-detail-page/product-detail-page.component.html

@@ -1,7 +1,7 @@
 <app-top-bar></app-top-bar>
-
 <div id="mainComponents">
     <app-product-details [productId]="productId"></app-product-details>
     <app-newest-prices-list [productId]="productId"></app-newest-prices-list>
 </div>
+<app-bottom-bar></app-bottom-bar>
 

Frontend/src/app/services/api.service.ts

@@ -11,6 +11,7 @@ import {ContactPerson} from '../models/contactperson';
 import {Category} from '../models/category';
 import {Manufacturer} from '../models/manufacturer';
 import {CrawlingStatus} from '../models/crawlingstatus';
+import {log} from 'util';
 
 @Injectable({
     providedIn: 'root'
@@ -242,7 +243,11 @@ export class ApiService {
      */
     addNewPrice(vendorId: number, productId: number, price: number): Observable<any> {
         try {
+            const sessionInfo = this.getSessionInfoFromLocalStorage();
+
             return this.http.post((this.apiUrl + '/prices'), JSON.stringify({
+                session_id: sessionInfo.session_id,
+                session_key: sessionInfo.session_key,
                 vendor_id: vendorId,
                 product_id: productId,
                 price_in_cents: price
@@ -277,7 +282,13 @@ export class ApiService {
      */
     getManagedVendors(): Observable<Vendor[]> {
         try {
-            return this.http.get<Vendor[]>((this.apiUrl + '/vendors/managed'));
+            const sessionInfo = this.getSessionInfoFromLocalStorage();
+
+            let params = new HttpParams();
+            params = params.append('session_id', sessionInfo.session_id);
+            params = params.append('session_key', sessionInfo.session_key);
+
+            return this.http.get<Vendor[]>((this.apiUrl + '/vendors/managed'), {params});
         } catch (exception) {
             process.stderr.write(`ERROR received from ${this.apiUrl}: ${exception}\n`);
         }
@@ -317,10 +328,14 @@ export class ApiService {
      */
     deactivateSingleVendorListing(vendorId: number, productId: number): Observable<any> {
         try {
-            return this.http.put((this.apiUrl + '/vendors/manage/deactivatelisting'), JSON.stringify({
+            const sessionInfo = this.getSessionInfoFromLocalStorage();
+
+            return this.http.put((this.apiUrl + '/vendors/manage/deactivatelisting'), {
+                session_id: sessionInfo.session_id,
+                session_key: sessionInfo.session_key,
                 vendor_id: vendorId,
                 product_id: productId
-            }));
+            });
         } catch (exception) {
             process.stderr.write(`ERROR received from ${this.apiUrl}: ${exception}\n`);
         }
@@ -333,7 +348,12 @@ export class ApiService {
      */
     deactivateVendor(vendorId: number): Observable<any> {
         try {
-            return this.http.put((this.apiUrl + '/vendors/manage/shop/deactivate/' + vendorId), JSON.stringify({}));
+            const sessionInfo = this.getSessionInfoFromLocalStorage();
+
+            return this.http.put((this.apiUrl + '/vendors/manage/shop/deactivate/' + vendorId), {
+                session_id: sessionInfo.session_id,
+                session_key: sessionInfo.session_key,
+            });
         } catch (exception) {
             process.stderr.write(`ERROR received from ${this.apiUrl}: ${exception}\n`);
         }
@@ -346,7 +366,12 @@ export class ApiService {
      */
     activateVendor(vendorId: number): Observable<any> {
         try {
-            return this.http.put((this.apiUrl + '/vendors/manage/shop/activate/' + vendorId), JSON.stringify({}));
+            const sessionInfo = this.getSessionInfoFromLocalStorage();
+
+            return this.http.put((this.apiUrl + '/vendors/manage/shop/activate/' + vendorId), {
+                session_id: sessionInfo.session_id,
+                session_key: sessionInfo.session_key,
+            });
         } catch (exception) {
             process.stderr.write(`ERROR received from ${this.apiUrl}: ${exception}\n`);
         }
@@ -366,7 +391,13 @@ export class ApiService {
      */
     getPriceAlarms(): Observable<PriceAlarm[]> {
         try {
-            return this.http.get<PriceAlarm[]>((this.apiUrl + '/pricealarms'));
+            const sessionInfo = this.getSessionInfoFromLocalStorage();
+
+            let params = new HttpParams();
+            params = params.append('session_id', sessionInfo.session_id);
+            params = params.append('session_key', sessionInfo.session_key);
+
+            return this.http.get<PriceAlarm[]>((this.apiUrl + '/pricealarms'), {params});
         } catch (exception) {
             process.stderr.write(`ERROR received from ${this.apiUrl}: ${exception}\n`);
         }
@@ -380,10 +411,14 @@ export class ApiService {
      */
     createPriceAlarms(productId: number, definedPrice: number): Observable<any> {
         try {
-            return this.http.post((this.apiUrl + '/pricealarms'), JSON.stringify({
+            const sessionInfo = this.getSessionInfoFromLocalStorage();
+
+            return this.http.post((this.apiUrl + '/pricealarms'), {
+                session_id: sessionInfo.session_id,
+                session_key: sessionInfo.session_key,
                 product_id: productId,
                 defined_price: definedPrice
-            }));
+            });
         } catch (exception) {
             process.stderr.write(`ERROR received from ${this.apiUrl}: ${exception}\n`);
         }
@@ -397,10 +432,14 @@ export class ApiService {
      */
     updatePriceAlarms(alarmId: number, definedPrice: number): Observable<any> {
         try {
-            return this.http.put((this.apiUrl + '/pricealarms'), JSON.stringify({
+            const sessionInfo = this.getSessionInfoFromLocalStorage();
+
+            return this.http.put((this.apiUrl + '/pricealarms'), {
+                session_id: sessionInfo.session_id,
+                session_key: sessionInfo.session_key,
                 alarm_id: alarmId,
                 defined_price: definedPrice
-            }));
+            });
         } catch (exception) {
             process.stderr.write(`ERROR received from ${this.apiUrl}: ${exception}\n`);
         }
@@ -423,11 +462,11 @@ export class ApiService {
      */
     registerUser(username: string, password: string, email: string): Observable<any> {
         try {
-            return this.http.post((this.apiUrl + '/users/register'), JSON.stringify({
+            return this.http.post((this.apiUrl + '/users/register'), {
                 username,
                 password,
                 email
-            }));
+            });
         } catch (exception) {
             process.stderr.write(`ERROR received from ${this.apiUrl}: ${exception}\n`);
         }
@@ -441,10 +480,10 @@ export class ApiService {
      */
     loginUser(username: string, password: string): Observable<any> {
         try {
-            return this.http.post((this.apiUrl + '/users/login'), JSON.stringify({
+            return this.http.post((this.apiUrl + '/users/login'), {
                 username,
                 password
-            }));
+            });
         } catch (exception) {
             process.stderr.write(`ERROR received from ${this.apiUrl}: ${exception}\n`);
         }
@@ -457,12 +496,36 @@ export class ApiService {
      */
     getUserInfo(): Observable<any> {
         try {
-            return this.http.post((this.apiUrl + '/users/checkSessionValid'), {});
+            const sessionInfo = this.getSessionInfoFromLocalStorage();
+            return this.http.post((this.apiUrl + '/users/checkSessionValid'), {
+                session_id: sessionInfo.session_id,
+                session_key: sessionInfo.session_key
+            });
         } catch (exception) {
             process.stderr.write(`ERROR received from ${this.apiUrl}: ${exception}\n`);
         }
     }
 
+    /**
+     * Gets session id and session key from local storage
+     * @return any {session_id: '', session_key: ''}
+     */
+    getSessionInfoFromLocalStorage(): any {
+        const session_id = localStorage.getItem('session_id') ?? '';
+        const session_key = localStorage.getItem('session_key') ?? '';
+        return {session_id, session_key};
+    }
+
+    /**
+     * Extracts and saves the session data from an api response
+     * @param data The api response
+     */
+    saveSessionInfoToLocalStorage(data: any): boolean {
+        localStorage.setItem('session_id', data.session_id);
+        localStorage.setItem('session_key', data.session_key);
+        return true;
+    }
+
     /*       ______                       _ __               __
             / ____/___ __   ______  _____(_) /____     _____/ /_  ____  ____  _____
            / /_  / __ `/ | / / __ \/ ___/ / __/ _ \   / ___/ __ \/ __ \/ __ \/ ___/
@@ -477,7 +540,13 @@ export class ApiService {
      */
     getFavoriteShops(): Observable<FavoriteShop[]> {
         try {
-            return this.http.get<FavoriteShop[]>((this.apiUrl + '/favoriteshops'));
+            const sessionInfo = this.getSessionInfoFromLocalStorage();
+
+            let params = new HttpParams();
+            params = params.append('session_id', sessionInfo.session_id);
+            params = params.append('session_key', sessionInfo.session_key);
+
+            return this.http.get<FavoriteShop[]>((this.apiUrl + '/favoriteshops'), {params});
         } catch (exception) {
             process.stderr.write(`ERROR received from ${this.apiUrl}: ${exception}\n`);
         }
@@ -490,9 +559,13 @@ export class ApiService {
      */
     addFavoriteShop(vendorId: number): Observable<any> {
         try {
-            return this.http.post((this.apiUrl + '/favoriteshops'), JSON.stringify({
+            const sessionInfo = this.getSessionInfoFromLocalStorage();
+
+            return this.http.post((this.apiUrl + '/favoriteshops'), {
+                session_id: sessionInfo.session_id,
+                session_key: sessionInfo.session_key,
                 vendor_id: vendorId
-            }));
+            });
         } catch (exception) {
             process.stderr.write(`ERROR received from ${this.apiUrl}: ${exception}\n`);
         }
@@ -505,7 +578,13 @@ export class ApiService {
      */
     deleteFavoriteShop(vendorId: number): Observable<any> {
         try {
-            return this.http.delete((this.apiUrl + '/favoriteshops/' + vendorId));
+            const sessionInfo = this.getSessionInfoFromLocalStorage();
+
+            let params = new HttpParams();
+            params = params.append('session_id', sessionInfo.session_id);
+            params = params.append('session_key', sessionInfo.session_key);
+
+            return this.http.delete((this.apiUrl + '/favoriteshops/' + vendorId), {params});
         } catch (exception) {
             process.stderr.write(`ERROR received from ${this.apiUrl}: ${exception}\n`);
         }
@@ -569,14 +648,18 @@ export class ApiService {
      */
     addContactPerson(vendorId: number, firstName: string, lastName: string, gender: string, email: string, phone: string): Observable<any> {
         try {
-            return this.http.post((this.apiUrl + '/contactpersons'), JSON.stringify({
+            const sessionInfo = this.getSessionInfoFromLocalStorage();
+
+            return this.http.post((this.apiUrl + '/contactpersons'), {
+                session_id: sessionInfo.session_id,
+                session_key: sessionInfo.session_key,
                 vendor_id: vendorId,
                 first_name: firstName,
                 last_name: lastName,
                 gender,
                 email,
                 phone
-            }));
+            });
         } catch (exception) {
             process.stderr.write(`ERROR received from ${this.apiUrl}: ${exception}\n`);
         }
@@ -595,14 +678,18 @@ export class ApiService {
      */
     updateContactPerson(contactId: number, vendorId: number, firstName: string, lastName: string, gender: string, email: string, phone: string): Observable<any> {
         try {
-            return this.http.put((this.apiUrl + '/contactpersons/' + contactId), JSON.stringify({
+            const sessionInfo = this.getSessionInfoFromLocalStorage();
+
+            return this.http.put((this.apiUrl + '/contactpersons/' + contactId), {
+                session_id: sessionInfo.session_id,
+                session_key: sessionInfo.session_key,
                 vendor_id: vendorId,
                 first_name: firstName,
                 last_name: lastName,
                 gender,
                 email,
                 phone
-            }));
+            });
         } catch (exception) {
             process.stderr.write(`ERROR received from ${this.apiUrl}: ${exception}\n`);
         }
@@ -717,7 +804,13 @@ export class ApiService {
      */
     getCurrentCrawlingStatus(): Observable<CrawlingStatus> {
         try {
-            return this.http.get<CrawlingStatus>((this.apiUrl + '/crawlingstatus'));
+            const sessionInfo = this.getSessionInfoFromLocalStorage();
+
+            let params = new HttpParams();
+            params = params.append('session_id', sessionInfo.session_id);
+            params = params.append('session_key', sessionInfo.session_key);
+
+            return this.http.get<CrawlingStatus>((this.apiUrl + '/crawlingstatus'), {params});
         } catch (exception) {
             process.stderr.write(`ERROR received from ${this.apiUrl}: ${exception}\n`);
         }