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

README.md

@@ -13,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 :
 ```

package.json

@@ -22,12 +22,13 @@
     "@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",
@@ -35,8 +36,8 @@
     "zone.js": "~0.14.10"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^18.2.12",
+    "@angular-devkit/build-angular": "^18.2.18",
-    "@angular/cli": "^18.2.12",
+    "@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.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 {Router} from '@angular/router';
+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,
   ],
@@ -28,7 +28,7 @@ export class AppComponent implements OnInit {
   }
 
   isBrowser(): boolean {
-    return isPlatformBrowser(this.platformId);
+    return isPlatformBrowser(this.platformId)
   }
 
   setSessionExpiredFalse(): void {

src/app/app.config.ts

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

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
   ],

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']

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>
-    <button mat-flat-button routerLink="post/{{ postId }}" >Lire la suite</button>
+    <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

@@ -10,13 +10,11 @@ import {MatButton, MatFabButton} from '@angular/material/button';
   selector: 'app-post-home',
   standalone: true,
   imports: [
-    Button,
     CardModule,
     DatePipe,
     RouterLink,
     AvatarModule,
-    MatButton,
+    Button,
-    MatFabButton
   ],
   templateUrl: './post-home.component.html',
   styleUrl: './post-home.component.css'

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/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/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,

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/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';