Màj sur angular 18 et primeng 18, peut-être un futur dark theme ? :)

README.md

@@ -2,7 +2,6 @@
 
 ## Liste des améliorations
 
-- [ ] Faire du sessionStorage à la place d'un stockage avec cookie
 - [ ] Bouton "Voir les posts de l'utilisateur" à enlever (un seul écrivain donc inutile...)
 - [ ] Bug CSS concernant le footer
 - [ ] Mauvaise actualisation du pseudo quand on se renomme
@@ -14,7 +13,7 @@
 - [ ] L'avatar s'affiche pas quand on upload un commentaire (il faut recharger la page)
 - [ ] Faire des meilleurs modal
 - [ ] Terminer l'interface admin
-- [ ] Bug (de temps en temps) pour stocker les cookies utilisateur
+- [x] Bug (de temps en temps) pour stocker les cookies utilisateur
 
 pour run le docker :
 ```

angular.json

@@ -28,14 +28,10 @@
               }
             ],
             "styles": [
+              "@angular/material/prebuilt-themes/azure-blue.css",
               "src/styles.css"
             ],
-            "scripts": [],
-            "server": "src/main.server.ts",
-            "prerender": true,
-            "ssr": {
-              "entry": "server.ts"
-            }
+            "scripts": []
           },
           "configurations": {
             "production": {
@@ -97,6 +93,7 @@
               }
             ],
             "styles": [
+              "@angular/material/prebuilt-themes/magenta-violet.css",
               "src/styles.css"
             ],
             "scripts": []

package.json

@@ -12,20 +12,23 @@
   "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",
     "@angular/router": "^18.2.0",
-    "@angular/ssr": "^18.2.12",
+    "@angular/ssr": "^18.2.18",
+    "@primeng/themes": "^19.1.0",
     "express": "^4.18.2",
     "luxon": "^3.5.0",
     "ngx-cookie-service": "^18.0.0",
     "primeicons": "^7.0.0",
-    "primeng": "^17.18.10",
+    "primeng": "^18.0.2",
     "quill": "^2.0.3",
     "review-front": "file:",
     "rxjs": "~7.8.0",
@@ -33,8 +36,8 @@
     "zone.js": "~0.14.10"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^18.2.12",
-    "@angular/cli": "^18.2.12",
+    "@angular-devkit/build-angular": "^18.2.18",
+    "@angular/cli": "^18.2.18",
     "@angular/compiler-cli": "^18.2.0",
     "@types/express": "^4.17.17",
     "@types/jasmine": "~5.1.0",

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,12 +7,12 @@ 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, RouterOutlet} from '@angular/router';
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [MenubarModule, FloatLabelModule, ToastModule, DialogModule, Button],
+  imports: [MenubarModule, FloatLabelModule, ToastModule, DialogModule, Button, RouterOutlet],
   providers: [
     MessageService,
   ],
@@ -23,17 +23,18 @@ 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 {
-    return isPlatformBrowser(this.platformId);
+    return isPlatformBrowser(this.platformId)
   }
 
   setSessionExpiredFalse(): void {
     this.isSessionExpired = false;
     this.authService.setSessionExpired(false);
+    this.router.navigate(['/logout']);
   }
 
   ngOnInit(): void {

src/app/app.config.ts

@@ -1,10 +1,12 @@
 import {ApplicationConfig, importProvidersFrom, provideZoneChangeDetection} from '@angular/core';
 import {provideRouter} from '@angular/router';
-
 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';
+import {providePrimeNG} from 'primeng/config';
+import {myPreset} from './preset'
 
 export const appConfig: ApplicationConfig = {
   providers: [
@@ -12,5 +14,14 @@ export const appConfig: ApplicationConfig = {
     provideRouter(routes),
     provideClientHydration(),
     provideHttpClient(withFetch()),
-    importProvidersFrom([BrowserAnimationsModule])]
+    provideAnimationsAsync(),
+    providePrimeNG({
+      theme: {
+        preset: myPreset,
+        options: {
+          darkModeSelector: '.my-app-dark' // class css pour activer le dark mode
+        }
+      }
+    }),
+    importProvidersFrom([BrowserAnimationsModule]), provideAnimationsAsync()]
 };

src/app/auth.service.ts

@@ -1,7 +1,6 @@
-import { Injectable } from '@angular/core';
-import { CookieService } from 'ngx-cookie-service';
-import { Author } from './models/author';
-import { BehaviorSubject } from 'rxjs';
+import {Injectable} from '@angular/core';
+import {Author} from './models/author';
+import {BehaviorSubject} from 'rxjs';
 import {DateTime} from 'luxon';
 
 @Injectable({
@@ -11,33 +10,38 @@ export class AuthService {
   private sessionExpiredSubject = new BehaviorSubject<boolean>(false);
   sessionExpired$ = this.sessionExpiredSubject.asObservable();
 
-  constructor(private cookieService: CookieService) {
+  constructor() {
     this.checkSessionExpiration();
   }
 
   isAuthenticated(): boolean {
-    return this.cookieService.check("author") &&
-      this.cookieService.check("token") &&
-      this.cookieService.check("token-expiration-date") &&
-      this.cookieService.get("author") !== '' &&
-      this.cookieService.get("token-expiration-date") !== '' &&
-      this.cookieService.get("token") !== '';
+    return sessionStorage.getItem("author") !== null &&
+      sessionStorage.getItem("token") !== null &&
+      sessionStorage.getItem("token-expiration-date") !== null;
   }
 
-  getTokenExpirationDate(): DateTime {
-    return DateTime.fromISO(this.cookieService.get("token-expiration-date"));
+  getTokenExpirationDate(): string | null {
+    return sessionStorage.getItem("token-expiration-date");
   }
 
   isSessionExpired(): boolean {
-    return this.getTokenExpirationDate() < DateTime.now() && this.isAuthenticated();
+    const tokenExpirationDate = this.getTokenExpirationDate();
+    if (tokenExpirationDate) {
+      return DateTime.fromISO(tokenExpirationDate) < DateTime.now() && this.isAuthenticated();
+    }
+    return true
   }
 
-  getAuthenticatedAuthor(): Author {
-    return JSON.parse(this.cookieService.get('author'));
+  getAuthenticatedAuthor(): Author | null {
+    const authorStr = sessionStorage.getItem('author')
+    if (authorStr) {
+      return JSON.parse(authorStr);
+    }
+    return null;
   }
 
-  getAuthenticatedAuthorToken(): string {
-    return this.cookieService.get('token');
+  getAuthenticatedAuthorToken(): string | null{
+    return sessionStorage.getItem('token');
   }
 
   setSessionExpired(expired: boolean) {

src/app/components/comment-form/comment-form.component.ts

@@ -1,9 +1,7 @@
 import {Component, EventEmitter, Input, Output} from '@angular/core';
 import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
-import {InputTextareaModule} from 'primeng/inputtextarea';
 import {Button} from 'primeng/button';
 import {CommentService} from '../../services/comment.service';
-import {Author} from '../../models/author';
 import {Subscription} from 'rxjs';
 import {Comment} from '../../models/comment';
 import {MessageService} from 'primeng/api';
@@ -15,7 +13,6 @@ import {AuthService} from '../../auth.service';
   standalone: true,
   imports: [
     ReactiveFormsModule,
-    InputTextareaModule,
     Button,
     NgStyle
   ],
@@ -36,8 +33,8 @@ export class CommentFormComponent {
   }
 
   onSubmit() {
-    let token: string = this.authService.getAuthenticatedAuthorToken();
-    let author: Author = this.authService.getAuthenticatedAuthor();
+    let token = this.authService.getAuthenticatedAuthorToken();
+    let author = this.authService.getAuthenticatedAuthor();
     if (this.commentForm.valid && author && token && this.commentForm.value.content) {
       // get l'image de profile après avoir créé le commentaire
       this.subs.push(this.commentService.create(this.commentForm.value.content, this.postId, author.id, token).subscribe({

src/app/components/header/header.component.ts

@@ -25,8 +25,9 @@ export class HeaderComponent {
   }
 
   private initializeMenu(): void {
-    if (!(this.authService.isSessionExpired()) && this.authService.isAuthenticated()) {
-      this.actualAuthor = this.authService.getAuthenticatedAuthor();
+    const authenticatedAuthor = this.authService.getAuthenticatedAuthor();
+    if (!(this.authService.isSessionExpired()) && this.authService.isAuthenticated() && authenticatedAuthor) {
+      this.actualAuthor = authenticatedAuthor;
     }
 
     if (this.actualAuthor) {

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

@@ -1,7 +1,6 @@
 import {Component, Input, OnDestroy} from '@angular/core';
 import {FormBuilder, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
 import {InputTextModule} from 'primeng/inputtext';
-import {InputTextareaModule} from 'primeng/inputtextarea';
 import {FileSelectEvent, FileUploadModule} from 'primeng/fileupload';
 import {mergeMap, Subscription} from 'rxjs';
 import {PostService} from '../../services/post.service';
@@ -11,6 +10,7 @@ import {Router} from '@angular/router';
 import {Author} from '../../models/author';
 import {AuthorService} from '../../services/author.service';
 import {AuthService} from '../../auth.service';
+import {Button} from 'primeng/button';
 
 @Component({
   selector: 'app-post-form',
@@ -18,9 +18,9 @@ import {AuthService} from '../../auth.service';
   imports: [
     ReactiveFormsModule,
     InputTextModule,
-    InputTextareaModule,
     FileUploadModule,
-    EditorModule
+    EditorModule,
+    Button
   ],
   templateUrl: './post-form.component.html',
   styleUrls: ['./post-form.component.css']
@@ -105,9 +105,9 @@ export class PostFormComponent implements OnDestroy {
 
       if (this.isUpdateMode && this.postId) {
         this.subs.push(
-          this.postService.updatePost(this.postId, postData, this.authService.getAuthenticatedAuthorToken()).pipe(
+          this.postService.updatePost(this.postId, postData, this.authService.getAuthenticatedAuthorToken()!).pipe(
             mergeMap((_) => {
-              return this.postService.changeIllustration(this.postId, this.uploadedFile, this.authService.getAuthenticatedAuthorToken());
+              return this.postService.changeIllustration(this.postId, this.uploadedFile, this.authService.getAuthenticatedAuthorToken()!);
             })
           ).subscribe({
             next: (_) => {
@@ -118,11 +118,11 @@ export class PostFormComponent implements OnDestroy {
         );
       } else {
         this.subs.push(
-          this.postService.createPost(postData, this.authService.getAuthenticatedAuthorToken()).pipe(
+          this.postService.createPost(postData, this.authService.getAuthenticatedAuthorToken()!).pipe(
             mergeMap(post =>
-              this.authorService.attributePost(this.actualAuthor?.id, post.id, this.authService.getAuthenticatedAuthorToken()).pipe(
+              this.authorService.attributePost(this.actualAuthor?.id, post.id, this.authService.getAuthenticatedAuthorToken()!).pipe(
                 mergeMap((_) =>
-                  this.postService.changeIllustration(post.id, this.uploadedFile, this.authService.getAuthenticatedAuthorToken()),
+                  this.postService.changeIllustration(post.id, this.uploadedFile, this.authService.getAuthenticatedAuthorToken()!),
                 )
               )
             )

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"/>
+    <p-button routerLink="post/{{ postId }}" >Lire la suite</p-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,16 +4,17 @@ 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',
   standalone: true,
   imports: [
-    Button,
     CardModule,
     DatePipe,
     RouterLink,
-    AvatarModule
+    AvatarModule,
+    Button,
   ],
   templateUrl: './post-home.component.html',
   styleUrl: './post-home.component.css'

src/app/components/register-form/register-form.component.ts

@@ -37,7 +37,7 @@ export class RegisterFormComponent implements OnDestroy {
   ];
   subs: Subscription[] = [];
   form: FormGroup;
-  actualAuthor: Author | undefined;
+  actualAuthor: string | undefined;
 
   constructor(private formBuilder: FormBuilder,
               private authorService: AuthorService,
@@ -45,8 +45,9 @@ export class RegisterFormComponent implements OnDestroy {
               private messageService: MessageService,
               private authService: AuthService,
   ) {
-    if (!(this.authService.isSessionExpired()) && this.authService.isAuthenticated()) {
-      this.actualAuthor = this.authService.getAuthenticatedAuthor();
+    const authenticatedAuthor = this.authService.getAuthenticatedAuthorToken();
+    if (!(this.authService.isSessionExpired()) && this.authService.isAuthenticated() && authenticatedAuthor) {
+      this.actualAuthor = authenticatedAuthor;
     }
     this.form = this.formBuilder.group({
       username: ['', [Validators.required, Validators.maxLength(255)]],
@@ -83,7 +84,7 @@ export class RegisterFormComponent implements OnDestroy {
           this.username,
           this.password,
           this.role,
-          this.authService.getAuthenticatedAuthorToken()).subscribe({
+          this.authService.getAuthenticatedAuthorToken()!).subscribe({
           next: (author: Author) => {
             this.successMessage('Succès', `Auteur ${author.name} créé avec succès`);
             this.createdAuthor.emit(author);

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,
   ) {
@@ -80,7 +78,7 @@ export class UpdateProfileFormComponent implements OnDestroy {
   }
 
   onSubmit() {
-    const token: string = this.authService.getAuthenticatedAuthorToken();
+    const token = this.authService.getAuthenticatedAuthorToken();
     if (this.form.valid && token && this.password === this.passwordConfirm) {
       const newUsername = this.form.value.username;
       if (this.uploadedFile) {
@@ -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/guards/writer.guard.ts

@@ -1,17 +1,18 @@
 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 writerGuard: CanActivateFn = (route, state) => {
   const router = inject(Router);
-  const cookieService = inject(CookieService);
   const authService = inject(AuthService);
+  const authorStr = sessionStorage.getItem("author");
 
-  if ((authService.isAuthenticated() && JSON.parse(cookieService.get("author")).role !== Role.WRITER) || !authService.isAuthenticated()) {
-    router.navigate(['/']);
+  if (authorStr) {
+    if ((authService.isAuthenticated() && JSON.parse(authorStr).role !== Role.WRITER) || !authService.isAuthenticated()) {
+      router.navigate(['/']);
+    }
+    return true;
   }
-
-  return true;
+  return false;
 };

src/app/pages/admin-authors/admin-authors.component.html

@@ -33,7 +33,7 @@
       </td>
       <td>{{ author.role }}</td>
       <td>
-        <p-button icon="pi pi-pencil" (click)="openDialog(updateDialogVisibility, rowIndex)" severity="warning"
+        <p-button icon="pi pi-pencil" (click)="openDialog(updateDialogVisibility, rowIndex)" severity="warn"
                             label="Modifier"/>
         <p-dialog header='Modifier "{{ author.name }}"' [modal]="true" [(visible)]="updateDialogVisibility[rowIndex]">
           <app-register-form [adminForm]="true" [username]="author.name">

src/app/pages/home/home.component.ts

@@ -29,9 +29,9 @@ export class HomeComponent implements OnDestroy {
   constructor(
     private postService: PostService,
     private authService: AuthService) {
-
-    if (!(this.authService.isSessionExpired()) && this.authService.isAuthenticated()) {
-      this.actualAuthor = this.authService.getAuthenticatedAuthor();
+    const authenticatedAuthor = this.authService.getAuthenticatedAuthor();
+    if (!(this.authService.isSessionExpired()) && this.authService.isAuthenticated() && authenticatedAuthor) {
+      this.actualAuthor = authenticatedAuthor;
     } else {
       this.authService.checkSessionExpiration();
     }

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';
@@ -35,9 +34,9 @@ export class LoginComponent implements OnDestroy {
 
   constructor(private authorService: AuthorService,
               private messageService: MessageService,
-              private cookieService: CookieService,
               private router: Router,
-              private configurationService: ConfigurationService,) {}
+              private configurationService: ConfigurationService,) {
+  }
 
   sendLogins(): void {
     if (this.password === this.confirmPassword) {
@@ -45,26 +44,15 @@ export class LoginComponent implements OnDestroy {
       (
         this.authorService.login(this.name, this.password).pipe(
           switchMap((tokenObj: any) => {
-            this.cookieService.delete('token', '/', this.configurationService.getDomain())
-            this.cookieService.set("token", tokenObj.token, {
-              domain: this.configurationService.getDomain(),
-              secure: true,
-              path: '/'
-            });
+            // sessionStorage.removeItem('token');
+            sessionStorage.setItem('token', tokenObj.token);
             return this.authorService.me(tokenObj.token)
           }))
           .subscribe({
             next: (author: Author) => {
-              this.cookieService.delete('author', '/', this.configurationService.getDomain())
-              this.cookieService.set("author", JSON.stringify(author), {
-                domain: this.configurationService.getDomain(),
-                secure : true,
-                path: '/' });
-              this.cookieService.set('token-expiration-date', DateTime.now().plus({millisecond: this.configurationService.getTokenTTL()}).toISO(), {
-                domain: this.configurationService.getDomain(),
-                secure: true,
-                path: '/',
-              })
+              // sessionStorage.removeItem('author');
+              sessionStorage.setItem('author', JSON.stringify(author));
+              sessionStorage.setItem('token-expiration-date', DateTime.now().plus({millisecond: this.configurationService.getTokenTTL()}).toISO())
               this.getAuthorCookie();
               this.router.navigate(['/']).then(() => {
                 this.successMessage('Connecté avec succès', 'Heureux de vous revoir ' + this.actualAuthor?.name)
@@ -79,7 +67,10 @@ export class LoginComponent implements OnDestroy {
   }
 
   getAuthorCookie(): void {
-    this.actualAuthor = JSON.parse(this.cookieService.get("author"));
+    const authorStr = sessionStorage.getItem('author');
+    if (authorStr) {
+      this.actualAuthor = JSON.parse(authorStr);
+    }
   }
 
   successMessage(summary: string, detail: string): void {

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/app/pages/my-posts/my-posts.component.html

@@ -35,7 +35,7 @@
         </p-dialog>
       </td>
       <td>
-        <p-button icon="pi pi-pencil" (click)="openDialog(updateDialogVisibility, rowIndex)" severity="warning"
+        <p-button icon="pi pi-pencil" (click)="openDialog(updateDialogVisibility, rowIndex)" severity="warn"
                   label="Modifier"/>
         <p-dialog header='Modifier "{{ post.title }}"' [modal]="true" [(visible)]="updateDialogVisibility[rowIndex]">
           <app-post-form [actualAuthor]="actualAuthor"

src/app/pages/my-posts/my-posts.component.ts

@@ -37,14 +37,17 @@ export class MyPostsComponent implements OnDestroy {
   updateDialogVisibility: boolean[] = [];
   deleteDialogVisibility: boolean[] = [];
   posts: Post[] = [];
-  actualAuthor: Author;
+  actualAuthor: Author | undefined;
 
 
   constructor(private authService: AuthService,
               private postService: PostService,
               private authorService: AuthorService,
               private messageService: MessageService) {
-    this.actualAuthor = this.authService.getAuthenticatedAuthor();
+    const authenticatedAuthor = this.authService.getAuthenticatedAuthor();
+    if (authenticatedAuthor) {
+      this.actualAuthor = authenticatedAuthor;
+    }
     this.updatePosts();
   }
 
@@ -59,8 +62,9 @@ export class MyPostsComponent implements OnDestroy {
   }
 
   updatePosts(): void {
-    if (!(this.authService.isSessionExpired()) && this.authService.isAuthenticated()) {
-      this.authorService.getAuthorsPosts(this.actualAuthor?.id, this.authService.getAuthenticatedAuthorToken()).subscribe({
+    const authorToken = this.authService.getAuthenticatedAuthorToken()
+    if (!(this.authService.isSessionExpired()) && this.authService.isAuthenticated() && authorToken) {
+      this.authorService.getAuthorsPosts(this.actualAuthor?.id, authorToken).subscribe({
           next: posts => this.posts = posts,
           error: error => this.failureMessage("Erreur", error.error.message),
         }
@@ -71,13 +75,16 @@ export class MyPostsComponent implements OnDestroy {
   }
 
   deletePost(id: bigint, rowIndex: number) {
-    this.postService.deletePost(id, this.authService.getAuthenticatedAuthorToken()).subscribe({
-      next: (_) => {
-        this.updatePosts()
-        this.successMessage("Post supprimé", "Ce post a été supprimé avec succès")
-      },
-      error: error => this.failureMessage("Erreur", error.error.message),
-    });
+    const authorToken = this.authService.getAuthenticatedAuthorToken()
+    if (authorToken) {
+      this.postService.deletePost(id, authorToken).subscribe({
+        next: (_) => {
+          this.updatePosts()
+          this.successMessage("Post supprimé", "Ce post a été supprimé avec succès")
+        },
+        error: error => this.failureMessage("Erreur", error.error.message),
+      });
+    }
     this.closeDialog(this.deleteDialogVisibility, rowIndex)
   }
 

src/app/pages/new-post/new-post.component.ts

@@ -2,7 +2,6 @@ import {Component, EventEmitter, OnDestroy} from '@angular/core';
 import {HeaderComponent} from '../../components/header/header.component';
 import {FormBuilder, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
 import {InputTextModule} from 'primeng/inputtext';
-import {InputTextareaModule} from 'primeng/inputtextarea';
 import {FileSelectEvent, FileUploadModule} from 'primeng/fileupload';
 import {mergeMap, Subscription} from 'rxjs';
 import {PostService} from '../../services/post.service';
@@ -21,7 +20,6 @@ import {AuthService} from '../../auth.service';
     HeaderComponent,
     ReactiveFormsModule,
     InputTextModule,
-    InputTextareaModule,
     FileUploadModule,
     EditorModule,
     PostFormComponent,
@@ -40,7 +38,7 @@ export class NewPostComponent implements OnDestroy {
               private postService: PostService,
               private authorService: AuthorService,
               private messageService: MessageService,
-              private authService : AuthService,
+              private authService: AuthService,
               private router: Router) {
     this.form = this.formBuilder.group({
       description: ['', [Validators.required, Validators.maxLength(512)]],
@@ -49,7 +47,10 @@ export class NewPostComponent implements OnDestroy {
       category: ['', [Validators.required, Validators.maxLength(50)]],
     });
     if (!(this.authService.isSessionExpired()) && this.authService.isAuthenticated()) {
-      this.actualAuthor = this.authService.getAuthenticatedAuthor();
+      const authenticatedAuthor = this.authService.getAuthenticatedAuthor();
+      if (authenticatedAuthor) {
+        this.actualAuthor = authenticatedAuthor;
+      }
     } else {
       this.authService.checkSessionExpiration();
     }
@@ -72,26 +73,31 @@ export class NewPostComponent implements OnDestroy {
         category: formData.category as string
       };
 
-      this.subs.push(
-        this.postService.createPost(postToPost, this.authService.getAuthenticatedAuthorToken()).pipe(
-          mergeMap(post =>
-            this.authorService.attributePost(this.actualAuthor?.id, post.id, this.authService.getAuthenticatedAuthorToken()).pipe(
-              mergeMap((_) =>
-                this.postService.changeIllustration(post.id, this.uploadedFile, this.authService.getAuthenticatedAuthorToken()),
+      const authenticatedAuthor = this.authService.getAuthenticatedAuthorToken();
+      if (authenticatedAuthor) {
+        this.subs.push(
+          this.postService.createPost(postToPost, authenticatedAuthor).pipe(
+            mergeMap(post =>
+              this.authorService.attributePost(this.actualAuthor?.id, post.id, authenticatedAuthor).pipe(
+                mergeMap((_) =>
+                  this.postService.changeIllustration(post.id, this.uploadedFile, authenticatedAuthor),
+                )
               )
             )
-          )
-        ).subscribe({
-          next: () => {
-            this.router.navigate(['/']).then(() => {
-              this.successMessage('Succès', 'Post créé avec succès')
-            });
-          },
-          error: (err) => {
-            this.failureMessage('Erreur', err.error.message);
-          }
-        })
-      );
+          ).subscribe({
+            next: () => {
+              this.router.navigate(['/']).then(() => {
+                this.successMessage('Succès', 'Post créé avec succès')
+              });
+            },
+            error: (err) => {
+              this.failureMessage('Erreur', err.error.message);
+            }
+          })
+        );
+      } else {
+        console.error("Profil mal chargé")
+      }
     }
   }
 

src/app/pages/post/post.component.ts

@@ -49,7 +49,12 @@ export class PostComponent {
               private authService: AuthService,) {
     this.route.paramMap.subscribe(params => {
       if (!(this.authService.isSessionExpired()) && this.authService.isAuthenticated()) {
-        this.actualAuthor = this.authService.getAuthenticatedAuthor();
+        const authenticatedAuthor = this.authService.getAuthenticatedAuthor();
+        if (authenticatedAuthor) {
+          this.actualAuthor = authenticatedAuthor;
+        } else {
+          console.error('Profil mal chargé');
+        }
       } else {
         this.authService.checkSessionExpiration();
       }

src/app/pages/profile/profile.component.ts

@@ -43,7 +43,12 @@ export class ProfileComponent implements OnDestroy {
       }));
     })
     if (!(this.authService.isSessionExpired()) && this.authService.isAuthenticated()) {
-      this.actualAuthor = this.authService.getAuthenticatedAuthor();
+      const authenticatedAuthor = this.authService.getAuthenticatedAuthor();
+      if (authenticatedAuthor) {
+        this.actualAuthor = authenticatedAuthor;
+      } else {
+        console.error("Profil mal chargé");
+      }
     } else {
       this.authService.checkSessionExpiration();
     }

src/app/preset.ts

@@ -0,0 +1,21 @@
+import {definePreset} from '@primeng/themes';
+import Aura from '@primeng/themes/aura';
+
+
+export const myPreset = definePreset(Aura, {
+  semantic: {
+    primary: {
+      50: '{indigo.50}',
+      100: '{indigo.100}',
+      200: '{indigo.200}',
+      300: '{indigo.300}',
+      400: '{indigo.400}',
+      500: '{indigo.500}',
+      600: '{indigo.600}',
+      700: '{indigo.700}',
+      800: '{indigo.800}',
+      900: '{indigo.900}',
+      950: '{indigo.950}'
+    }
+  }
+});

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

@@ -1,4 +1,4 @@
-@import '../node_modules/primeng/resources/themes/lara-light-indigo/theme.css';
+/*@import '../node_modules/primeng/resources/themes/lara-light-indigo/theme.css';*/
 @import '../node_modules/primeicons/primeicons.css';
 @import '../node_modules/quill/dist/quill.bubble.css';
 @import '../node_modules/quill/dist/quill.snow.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; }