Session storage 100% fonctionnel

angular.json

@@ -28,6 +28,7 @@
               }
             ],
             "styles": [
+              "@angular/material/prebuilt-themes/azure-blue.css",
               "src/styles.css"
             ],
             "scripts": []
@@ -92,6 +93,7 @@
               }
             ],
             "styles": [
+              "@angular/material/prebuilt-themes/magenta-violet.css",
               "src/styles.css"
             ],
             "scripts": []

package.json

@@ -12,10 +12,12 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "^18.2.0",
+    "@angular/cdk": "^18.2.14",
     "@angular/common": "^18.2.0",
     "@angular/compiler": "^18.2.0",
     "@angular/core": "^18.2.0",
     "@angular/forms": "^18.2.0",
+    "@angular/material": "^18.2.14",
     "@angular/platform-browser": "^18.2.0",
     "@angular/platform-browser-dynamic": "^18.2.0",
     "@angular/platform-server": "^18.2.0",
@@ -49,4 +51,4 @@
     "karma-jasmine-html-reporter": "~2.1.0",
     "typescript": "~5.5.2"
   }
-}
+}

src/app/app.component.html

@@ -1,5 +1,5 @@
 <router-outlet></router-outlet>
-@if (isBrowser()) {
+@if (isBrowser() && (authService.isSessionExpired() && authService.isAuthenticated())) {
   <p-dialog header="ATTENTION !" [modal]="true" [closable]="false" [visible]="isSessionExpired">
     <span>Votre session a <strong>expiré</strong> ! Il va falloir se reconnecter.</span>
     <div class="expired-dialog">

src/app/app.component.ts

@@ -7,7 +7,7 @@ import {DialogModule} from 'primeng/dialog';
 import {isPlatformBrowser} from '@angular/common';
 import {Button} from 'primeng/button';
 import {AuthService} from './auth.service';
-import {CookieService} from 'ngx-cookie-service';
+import {Router} from '@angular/router';
 
 @Component({
   selector: 'app-root',
@@ -23,8 +23,8 @@ export class AppComponent implements OnInit {
   isSessionExpired: boolean = false;
 
   constructor(@Inject(PLATFORM_ID) private platformId: object,
-              private authService: AuthService,
-              private cookieService: CookieService) {
+              protected authService: AuthService,
+              private router: Router,) {
   }
 
   isBrowser(): boolean {
@@ -34,6 +34,7 @@ export class AppComponent implements OnInit {
   setSessionExpiredFalse(): void {
     this.isSessionExpired = false;
     this.authService.setSessionExpired(false);
+    this.router.navigate(['/logout']);
   }
 
   ngOnInit(): void {

src/app/app.config.ts

@@ -5,6 +5,7 @@ import {routes} from './app.routes';
 import {provideClientHydration} from '@angular/platform-browser';
 import {provideHttpClient, withFetch} from '@angular/common/http';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
 
 export const appConfig: ApplicationConfig = {
   providers: [
@@ -12,5 +13,5 @@ export const appConfig: ApplicationConfig = {
     provideRouter(routes),
     provideClientHydration(),
     provideHttpClient(withFetch()),
-    importProvidersFrom([BrowserAnimationsModule])]
+    importProvidersFrom([BrowserAnimationsModule]), provideAnimationsAsync()]
 };

src/app/auth.service.ts

@@ -1,5 +1,4 @@
 import {Injectable} from '@angular/core';
-import {CookieService} from 'ngx-cookie-service';
 import {Author} from './models/author';
 import {BehaviorSubject} from 'rxjs';
 import {DateTime} from 'luxon';
@@ -11,7 +10,7 @@ export class AuthService {
   private sessionExpiredSubject = new BehaviorSubject<boolean>(false);
   sessionExpired$ = this.sessionExpiredSubject.asObservable();
 
-  constructor(private cookieService: CookieService) {
+  constructor() {
     this.checkSessionExpiration();
   }
 

src/app/components/post-home/post-home.component.html

@@ -5,7 +5,7 @@
     <span>{{ category }}</span>
     <em>Publié le {{ date | date : "dd/MM/yyyy à HH:mm" }}</em>
     <span class="desc">{{ description }}</span>
-    <p-button routerLink="post/{{ postId }}" label="Lire la suite"/>
+    <button mat-flat-button routerLink="post/{{ postId }}" >Lire la suite</button>
     <a routerLink="/profile/{{ authorId }}" class="user-profile">
       @if (authorProfilePicture) {
         <p-avatar image="data:image/jpeg;base64,{{ authorProfilePicture }}" shape="circle" styleClass="mr-2"

src/app/components/post-home/post-home.component.ts

@@ -4,6 +4,7 @@ import {CardModule} from 'primeng/card';
 import {DatePipe} from '@angular/common';
 import {RouterLink} from '@angular/router';
 import {AvatarModule} from 'primeng/avatar';
+import {MatButton, MatFabButton} from '@angular/material/button';
 
 @Component({
   selector: 'app-post-home',
@@ -13,7 +14,9 @@ import {AvatarModule} from 'primeng/avatar';
     CardModule,
     DatePipe,
     RouterLink,
-    AvatarModule
+    AvatarModule,
+    MatButton,
+    MatFabButton
   ],
   templateUrl: './post-home.component.html',
   styleUrl: './post-home.component.css'

src/app/components/update-profile-form/update-profile-form.component.ts

@@ -7,7 +7,6 @@ import {Subscription, switchMap} from 'rxjs';
 import {AuthorService} from '../../services/author.service';
 import {MessageService} from 'primeng/api';
 import {FileSelectEvent, FileUploadModule} from 'primeng/fileupload';
-import {CookieService} from 'ngx-cookie-service';
 import {Author} from '../../models/author';
 import {Router} from '@angular/router';
 import {AuthService} from '../../auth.service';
@@ -38,7 +37,6 @@ export class UpdateProfileFormComponent implements OnDestroy {
   constructor(private formBuilder: FormBuilder,
               private authorService: AuthorService,
               private messageService: MessageService,
-              private cookieService: CookieService,
               private authService: AuthService,
               private router: Router,
   ) {
@@ -92,7 +90,7 @@ export class UpdateProfileFormComponent implements OnDestroy {
           next: (author: Author) => {
             this.successMessage("Mise à jour réussie", "Profil mit à jour avec succès");
             this.updatedAuthorEvent.emit(author);
-            this.cookieService.set('author', JSON.stringify(author));
+            sessionStorage.setItem('author', JSON.stringify(author));
             this.router.navigate(['/']);
           },
           error: (err) => {
@@ -104,7 +102,7 @@ export class UpdateProfileFormComponent implements OnDestroy {
           next: (author: Author) => {
             this.successMessage("Mise à jour réussie", "Profil mit à jour avec succès");
             this.updatedAuthorEvent.emit(author);
-            this.cookieService.set('author', JSON.stringify(author));
+            sessionStorage.setItem('author', JSON.stringify(author));
             this.router.navigate(['/']);
           },
           error: (err) => {

src/app/guards/admin.guard.ts

@@ -1,17 +1,13 @@
 import {CanActivateFn, Router} from '@angular/router';
 import {inject} from '@angular/core';
-import {CookieService} from 'ngx-cookie-service';
 import {AuthService} from '../auth.service';
 import {Role} from '../models/role';
 
 export const adminGuard: CanActivateFn = (route, state) => {
   const router = inject(Router);
-  const cookieService = inject(CookieService);
   const authService: AuthService = inject(AuthService);
-
-  if ((authService.isAuthenticated() && JSON.parse(cookieService.get("author")).role !== Role.ADMIN) || !authService.isAuthenticated()) {
+  if ((authService.isAuthenticated() && JSON.parse(sessionStorage.getItem("author")!).role !== Role.ADMIN) || !authService.isAuthenticated()) {
     router.navigate(['/']);
   }
-
   return true;
 };

src/app/guards/auth.guard.ts

@@ -1,11 +1,9 @@
 import {CanActivateFn, Router} from '@angular/router';
 import {inject} from '@angular/core';
-import {CookieService} from 'ngx-cookie-service';
 
 export const authGuard: CanActivateFn = (route, state) => {
   const router = inject(Router);
-  const cookieService = inject(CookieService);
-  if (cookieService.check("author") || cookieService.check("token")) {
+  if (sessionStorage.getItem("author") !== null || sessionStorage.getItem("token") !== null) {
     router.navigate(['/']);
   }
 

src/app/pages/login/login.component.ts

@@ -7,7 +7,6 @@ import {ToastModule} from 'primeng/toast';
 import {MessageService} from 'primeng/api';
 import {Author} from '../../models/author';
 import {Subscription, switchMap} from 'rxjs';
-import {CookieService} from 'ngx-cookie-service';
 import {HeaderComponent} from '../../components/header/header.component';
 import {Router} from '@angular/router';
 import {ConfigurationService} from '../../configuration.service';

src/app/pages/logout/logout.component.ts

@@ -1,9 +1,7 @@
 import {Component, OnInit} from '@angular/core';
-import {CookieService} from 'ngx-cookie-service';
 import {HeaderComponent} from '../../components/header/header.component';
 import {Router} from '@angular/router';
 import {MessageService} from 'primeng/api';
-import {ConfigurationService} from '../../configuration.service';
 
 @Component({
   selector: 'app-logout',
@@ -14,19 +12,16 @@ import {ConfigurationService} from '../../configuration.service';
   templateUrl: './logout.component.html',
   styleUrl: './logout.component.css'
 })
-export class LogoutComponent implements OnInit{
+export class LogoutComponent implements OnInit {
+
+  constructor(private messageService: MessageService,
+              private router: Router) {
+  }
 
-  constructor(private cookieService: CookieService,
-              private messageService: MessageService,
-              private router: Router,
-              private configurationService: ConfigurationService,) { }
   ngOnInit(): void {
-    const routes: string[] = ['/', '/login', '/register', '/logout', '/profile', '/post', '/new-post', '/admin']
-    Object.keys(this.cookieService.getAll()).forEach(key => {
-      routes.forEach(route => {
-        this.cookieService.delete(key, route, this.configurationService.getDomain());
-      })
-    });
+    sessionStorage.removeItem("author");
+    sessionStorage.removeItem("token");
+    sessionStorage.removeItem("token-expiration-date");
     this.router.navigate(['/']).then(() => this.successMessage('Déconnexion', 'Vous avez été deconnecté avec succès'));
   }
 

src/index.html

@@ -7,9 +7,11 @@
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="icon.jpg">
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
 
-<body>
+<body class="mat-typography">
 <app-root></app-root>
 <footer class="footer">
   <p class="footer-creator">Site web réalisé par <strong>Guams</strong>.</p>

src/styles.css

@@ -53,3 +53,6 @@ app-root {
 .footer-link:hover {
   text-decoration: underline;
 }
+
+html, body { height: 100%; }
+body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }