✨ Added ngx-cookie-service for cookie management and replaced the old local storage service. Updated imports and dependencies in the relevant files.

package-lock.json

@@ -22,6 +22,7 @@
         "flowbite": "^2.5.2",
         "intro.js": "^7.2.0",
         "leaflet": "^1.9.4",
+        "ngx-cookie-service": "^19.0.0",
         "rxjs": "~7.8.0",
         "tslib": "^2.3.0",
         "zone.js": "~0.15.0"
@@ -9783,6 +9784,19 @@
       "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
       "dev": true
     },
+    "node_modules/ngx-cookie-service": {
+      "version": "19.0.0",
+      "resolved": "https://registry.npmjs.org/ngx-cookie-service/-/ngx-cookie-service-19.0.0.tgz",
+      "integrity": "sha512-itxGY1BlIRoEjEtDsSsRKnJuiQteTMLKPNHrykiH06tjUQ1bi3orE7YKU1D210VBqVy1jNrB7hKuGOOIQtQJDA==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.8.0"
+      },
+      "peerDependencies": {
+        "@angular/common": "^19.0.0",
+        "@angular/core": "^19.0.0"
+      }
+    },
     "node_modules/node-addon-api": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-6.1.0.tgz",

package.json

@@ -25,6 +25,7 @@
     "flowbite": "^2.5.2",
     "intro.js": "^7.2.0",
     "leaflet": "^1.9.4",
+    "ngx-cookie-service": "^19.0.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.15.0"

src/app/app.config.ts

@@ -8,6 +8,7 @@ import {
 import { provideRouter } from '@angular/router';
 import { provideServiceWorker } from '@angular/service-worker';
 import { routes } from './app.routes';
+import { CookieService } from 'ngx-cookie-service';
 
 export const appConfig: ApplicationConfig = {
   providers: [
@@ -19,9 +20,6 @@ export const appConfig: ApplicationConfig = {
       enabled: !isDevMode(),
       registrationStrategy: 'registerWhenStable:30000',
     }),
-    provideServiceWorker('ngsw-worker.js', {
-      enabled: !isDevMode(),
-      registrationStrategy: 'registerWhenStable:30000',
-    }),
+    CookieService,
   ],
 };

src/app/auth.guard.spec.ts

@@ -1,7 +1,7 @@
 import { TestBed } from '@angular/core/testing';
 import { Router } from '@angular/router';
 import { AuthGuard } from './auth.guard';
-import { LocalStorageService } from './services/local-storage/local-storage.service';
+import { LocalStorageService } from './services/cookies/cookies.service';
 import { ModalService } from './services/modal/modal.service';
 
 describe('AuthGuard', () => {

src/app/components/login-page/login-page.component.ts

@@ -10,7 +10,7 @@ import {
 import { Router } from '@angular/router';
 import { Subscription } from 'rxjs';
 import { User } from '../../model/User';
-import { LocalStorageService } from '../../services/local-storage/local-storage.service';
+import { LocalStorageService } from '../../services/cookies/cookies.service';
 import { ModalService } from '../../services/modal/modal.service';
 import { AuthService } from '../../services/auth/auth.service';
 

src/app/services/auth/auth.service.ts

@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
 import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
 import { BehaviorSubject, Observable, tap } from 'rxjs';
 import { environment } from '../../../environment';
-import { LocalStorageService } from '../local-storage/local-storage.service';
+import { LocalStorageService } from '../cookies/cookies.service';
 import { AuthResponse } from '../../model/AuthResponse';
 
 @Injectable({

src/app/services/cookies/cookies.service.ts

@@ -0,0 +1,74 @@
+import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
+import { ModalService } from '../modal/modal.service';
+import { CookieService } from 'ngx-cookie-service';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class LocalStorageService {
+  private readonly AUTH_TOKEN_KEY = 'auth_token';
+  private readonly USERNAME_KEY = 'username';
+  private readonly IS_ADMIN_KEY = 'isAdmin';
+  private readonly COOKIE_OPTIONS = {
+    path: '/',
+    domain: window.location.hostname,
+    secure: true,
+    sameSite: 'Strict' as const
+  };
+
+  constructor(
+    private router: Router, 
+    private modalService: ModalService,
+    private cookieService: CookieService
+  ) {}
+
+  setToken(token: string): void {
+    this.cookieService.set(this.AUTH_TOKEN_KEY, token, this.COOKIE_OPTIONS);
+  }
+
+  setUsername(username: string): void {
+    this.cookieService.set(this.USERNAME_KEY, username, this.COOKIE_OPTIONS);
+  }
+
+  getUsername(): string | null {
+    return this.cookieService.get(this.USERNAME_KEY) || null;
+  }
+
+  removeUsername(): void {
+    this.cookieService.delete(this.USERNAME_KEY, this.COOKIE_OPTIONS.path, this.COOKIE_OPTIONS.domain);
+  }
+
+  getToken(): string | null {
+    const token = this.cookieService.get(this.AUTH_TOKEN_KEY);
+    if (token) {
+      const payload = JSON.parse(atob(token.split('.')[1]));
+      const expirationDate = new Date(payload.exp * 1000);
+      if (expirationDate < new Date()) {
+        this.removeToken();
+        this.router.navigate(['/']).then(() => {
+          this.modalService.openModal('login-modal');
+        });
+        return null;
+      }
+    }
+    console.log("Token", token);
+    return token || null;
+  }
+
+  removeToken(): void {
+    this.cookieService.delete(this.AUTH_TOKEN_KEY, this.COOKIE_OPTIONS.path, this.COOKIE_OPTIONS.domain);
+  }
+
+  setIsAdmin(isAdmin: boolean): void {
+    this.cookieService.set(this.IS_ADMIN_KEY, isAdmin.toString(), this.COOKIE_OPTIONS);
+  }
+
+  getIsAdmin(): string | null {
+    return this.cookieService.get(this.IS_ADMIN_KEY) || null;
+  }
+
+  removeIsAdmin(): void {
+    this.cookieService.delete(this.IS_ADMIN_KEY, this.COOKIE_OPTIONS.path, this.COOKIE_OPTIONS.domain);
+  }
+}

src/app/services/local-storage/local-storage.service.ts

@@ -1,63 +0,0 @@
-import { Injectable } from '@angular/core';
-import { Router } from '@angular/router';
-import { ModalService } from '../modal/modal.service';
-
-@Injectable({
-  providedIn: 'root',
-})
-export class LocalStorageService {
-  private readonly AUTH_TOKEN_KEY = 'auth_token';
-  private readonly USERNAME_KEY = 'username';
-  private readonly IS_ADMIN_KEY = 'isAdmin';
-
-  constructor(private router: Router, private modalService: ModalService) {}
-
-  setToken(token: string): void {
-    localStorage.setItem(this.AUTH_TOKEN_KEY, token);
-  }
-
-  setUsername(username: string): void {
-    localStorage.setItem(this.USERNAME_KEY, username);
-  }
-
-  getUsername(): string | null{
-    return localStorage.getItem(this.USERNAME_KEY);
-  }
-
-  removeUsername(): void {
-    localStorage.removeItem(this.USERNAME_KEY);
-  }
-
-  getToken(): string | null {
-    // Check if token is expired
-    const token = localStorage.getItem(this.AUTH_TOKEN_KEY);
-    if (token) {
-      const payload = JSON.parse(atob(token.split('.')[1]));
-      const expirationDate = new Date(payload.exp * 1000);
-      if (expirationDate < new Date()) {
-        this.removeToken(); // Remove expired token
-        this.router.navigate(['/']).then(() => {
-          this.modalService.openModal('login-modal');
-        });
-        return null;
-      }
-    }
-    return localStorage.getItem(this.AUTH_TOKEN_KEY);
-  }
-
-  removeToken(): void {
-    localStorage.removeItem(this.AUTH_TOKEN_KEY);
-  }
-
-  setIsAdmin(isAdmin: boolean): void {
-    localStorage.setItem(this.IS_ADMIN_KEY, isAdmin.toString());
-  }
-
-  getIsAdmin(): string | null {
-    return localStorage.getItem(this.IS_ADMIN_KEY);
-  }
-
-  removeIsAdmin(): void {
-    localStorage.removeItem(this.IS_ADMIN_KEY);
-  }
-}

src/app/services/pin/pin.service.ts

@@ -58,10 +58,8 @@ export class PinService {
 
   getPinShares(pinId: string) {
     const url = `${this.apiURL}/pin/${pinId}/shares`;
-    const headers = new HttpHeaders({
-      'Content-Type': 'application/json',
-      Authorization: 'Bearer ' + localStorage.getItem('auth_token'),
-    });
+    const headers = this.authService.getAuthHeaders();
+    headers.set('Content-Type', 'application/json');
     return this.http.get<any>(url, { headers });
   }
 }