Fixing Angular 21 by migrating all values by signals. (#11)

frontend/package.json

@@ -17,32 +17,26 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^21.0.6",
-    "@angular/cdk": "^21.0.5",
-    "@angular/common": "^21.0.6",
-    "@angular/compiler": "^21.0.6",
-    "@angular/core": "^21.0.6",
-    "@angular/forms": "^21.0.6",
-    "@angular/material": "^21.0.5",
-    "@angular/platform-browser": "^21.0.6",
-    "@angular/platform-browser-dynamic": "^21.0.6",
-    "@angular/router": "^21.0.6",
-    "rxjs": "~7.8.0",
-    "tslib": "^2.3.0",
-    "zone.js": "~0.15.1"
+    "@angular/animations": "^21.1.2",
+    "@angular/cdk": "^21.1.2",
+    "@angular/common": "^21.1.2",
+    "@angular/compiler": "^21.1.2",
+    "@angular/core": "^21.1.2",
+    "@angular/forms": "^21.1.2",
+    "@angular/material": "^21.1.2",
+    "@angular/platform-browser": "^21.1.2",
+    "@angular/platform-browser-dynamic": "^21.1.2",
+    "@angular/router": "^21",
+    "rxjs": "~7.8.2",
+    "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@angular/build": "^21.0.4",
-    "@angular/cli": "^21.0.4",
-    "@angular/compiler-cli": "^21.0.6",
-    "@angular/localize": "^21.0.6",
-    "@types/jasmine": "~5.1.0",
-    "jasmine-core": "~5.1.0",
-    "karma": "~6.4.0",
-    "karma-chrome-launcher": "~3.2.0",
-    "karma-coverage": "~2.2.0",
-    "karma-jasmine": "~5.1.0",
-    "karma-jasmine-html-reporter": "~2.1.0",
+    "@angular/build": "^21.1.2",
+    "@angular/cli": "^21.1.2",
+    "@angular/compiler-cli": "^21.1.2",
+    "@angular/localize": "^21.1.2",
+    "@types/jasmine": "~5.1.15",
+    "jasmine-core": "~5.13.0",
     "typescript": "~5.9.3"
   }
-}
+}

frontend/src/app/app.component.html

@@ -1,5 +1,5 @@
 <app-header></app-header>
 <main>
-    <router-outlet></router-outlet>
+  <router-outlet></router-outlet>
 </main>
-<app-footer></app-footer>
+<app-footer></app-footer>

frontend/src/app/app.component.scss

@@ -1,14 +1,14 @@
 :host {
-    display: flex;
-    flex-direction: column;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+
+  app-header {
+    width: 100%;
+  }
+
+  main {
     flex: 1;
-
-    app-header {
-        width: 100%;
-    }
-
-    main {
-        flex: 1;
-        padding: 1em 0;
-    }
-}
+    padding: 1em 0;
+  }
+}

frontend/src/app/app.component.spec.ts

@@ -1,5 +1,5 @@
-import { TestBed } from '@angular/core/testing';
-import { AppComponent } from './app.component';
+import {TestBed} from '@angular/core/testing';
+import {AppComponent} from './app.component';
 
 describe('AppComponent', () => {
   beforeEach(async () => {

frontend/src/app/app.component.ts

@@ -1,18 +1,17 @@
-
-import { Component } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
-import { HeaderComponent } from './components/header/header.component';
-import { FooterComponent } from './components/footer/footer.component';
+import {Component} from '@angular/core';
+import {RouterOutlet} from '@angular/router';
+import {HeaderComponent} from './components/header/header.component';
+import {FooterComponent} from './components/footer/footer.component';
 
 @Component({
-    selector: 'app-root',
-    imports: [
+  selector: 'app-root',
+  imports: [
     RouterOutlet,
     HeaderComponent,
     FooterComponent
-],
-    templateUrl: './app.component.html',
-    styleUrl: './app.component.scss'
+  ],
+  templateUrl: './app.component.html',
+  styleUrl: './app.component.scss'
 })
 export class AppComponent {
   title = 'codiki-ng';

frontend/src/app/app.config.ts

@@ -1,11 +1,11 @@
-import { ApplicationConfig, inject, provideAppInitializer } from '@angular/core';
-import { provideRouter, withRouterConfig } from '@angular/router';
+import {ApplicationConfig, inject, provideAppInitializer} from '@angular/core';
+import {provideRouter, withRouterConfig} from '@angular/router';
 
-import { HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
-import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
-import { routes } from './app.routes';
-import { JwtInterceptor } from './core/interceptor/jwt.interceptor';
-import { AuthenticationService } from './core/service/authentication.service';
+import {HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi} from '@angular/common/http';
+import {provideAnimationsAsync} from '@angular/platform-browser/animations/async';
+import {routes} from './app.routes';
+import {JwtInterceptor} from './core/interceptor/jwt.interceptor';
+import {AuthenticationService} from './core/service/authentication.service';
 
 export const appConfig: ApplicationConfig = {
   providers: [
@@ -15,13 +15,13 @@ export const appConfig: ApplicationConfig = {
         paramsInheritanceStrategy: 'always',
         onSameUrlNavigation: 'reload'
       })
-    ), 
+    ),
     provideAnimationsAsync(),
     provideHttpClient(withInterceptorsFromDi()),
-    { provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },
+    {provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true},
     provideAppInitializer(() => {
-        const initializerFn = ((authenticationService: AuthenticationService) => () => authenticationService.startAuthenticationCheckingProcess())(inject(AuthenticationService));
-        return initializerFn();
-      })
+      const initializerFn = ((authenticationService: AuthenticationService) => () => authenticationService.startAuthenticationCheckingProcess())(inject(AuthenticationService));
+      return initializerFn();
+    })
   ]
 };

frontend/src/app/app.routes.ts

@@ -1,43 +1,43 @@
-import { Routes } from '@angular/router';
-import { alreadyAuthenticatedGuard } from './core/guard/already-authenticated.guard';
+import {Routes} from '@angular/router';
+import {alreadyAuthenticatedGuard} from './core/guard/already-authenticated.guard';
 
 export const routes: Routes = [
-    { 
-        path: 'login', 
-        loadComponent: () => import('./pages/login/login.component').then(module => module.LoginComponent),
-        canActivate: [alreadyAuthenticatedGuard]
-    },
-    { 
-        path: 'signin', 
-        loadComponent: () => import('./pages/signin/signin.component').then(module => module.SigninComponent),
-        canActivate: [alreadyAuthenticatedGuard]
-    },
-    { 
-        path: 'disconnect', 
-        loadComponent: () => import('./pages/disconnection/disconnection.component').then(module => module.DisconnectionComponent)
-    },
-    {
-        path: 'publications/new',
-        loadChildren: () => import('./pages/publication-creation/publication-creation.routes').then(module => module.ROUTES)
-    },
-    {
-        path: 'publications/:publicationId',
-        loadComponent: () => import('./pages/publication/publication.component').then(module => module.PublicationComponent)
-    },
-    {
-        path: 'publications/:publicationId/edit',
-        loadChildren: () => import('./pages/publication-update/publication-update.routes').then(module => module.ROUTES)
-    },
-    {
-        path: 'publications',
-        loadComponent: () => import('./pages/search-publications/search-publications.component').then(module => module.SearchPublicationsComponent)
-    },
-    {
-        path: 'my-publications',
-        loadChildren: () => import('./pages/my-publications/my-publications.routes').then(module => module.ROUTES)
-    },
-    { 
-        path: '**', 
-        loadComponent: () => import('./pages/home/home.component').then(module => module.HomeComponent)
-    }
+  {
+    path: 'login',
+    loadComponent: () => import('./pages/login/login.component').then(module => module.LoginComponent),
+    canActivate: [alreadyAuthenticatedGuard]
+  },
+  {
+    path: 'signin',
+    loadComponent: () => import('./pages/signin/signin.component').then(module => module.SigninComponent),
+    canActivate: [alreadyAuthenticatedGuard]
+  },
+  {
+    path: 'disconnect',
+    loadComponent: () => import('./pages/disconnection/disconnection.component').then(module => module.DisconnectionComponent)
+  },
+  {
+    path: 'publications/new',
+    loadChildren: () => import('./pages/publication-creation/publication-creation.routes').then(module => module.ROUTES)
+  },
+  {
+    path: 'publications/:publicationId',
+    loadComponent: () => import('./pages/publication/publication.component').then(module => module.PublicationComponent)
+  },
+  {
+    path: 'publications/:publicationId/edit',
+    loadChildren: () => import('./pages/publication-update/publication-update.routes').then(module => module.ROUTES)
+  },
+  {
+    path: 'publications',
+    loadComponent: () => import('./pages/search-publications/search-publications.component').then(module => module.SearchPublicationsComponent)
+  },
+  {
+    path: 'my-publications',
+    loadChildren: () => import('./pages/my-publications/my-publications.routes').then(module => module.ROUTES)
+  },
+  {
+    path: '**',
+    loadComponent: () => import('./pages/home/home.component').then(module => module.HomeComponent)
+  }
 ];

frontend/src/app/components/confirmation-dialog/confirmation-dialog.component.html

@@ -1,10 +1,10 @@
-<h1>{{title}}</h1>
-<h2>{{description}}</h2>
+<h1>{{ title }}</h1>
+<h2>{{ description }}</h2>
 <footer>
-    <button type="button" class="cod-button secondary" (click)="closeDialog()" matRipple i18n>
-        No
-    </button>
-    <button type="button" class="cod-button" (click)="closeAndValidate()" matRipple i18n>
-        Yes
-    </button>
-</footer>
+  <button type="button" class="cod-button secondary" (click)="closeDialog()" matRipple i18n>
+    No
+  </button>
+  <button type="button" class="cod-button" (click)="closeAndValidate()" matRipple i18n>
+    Yes
+  </button>
+</footer>

frontend/src/app/components/confirmation-dialog/confirmation-dialog.component.scss

@@ -1,12 +1,12 @@
 :host {
-    display: flex;
-    flex-direction: column;
-    text-align: center;
-    padding: 1em;
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  padding: 1em;
 
-    footer {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-    }
-}
+  footer {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+}

frontend/src/app/components/confirmation-dialog/confirmation-dialog.component.ts

@@ -1,35 +1,35 @@
-import { Component, inject, Input } from "@angular/core";
-import { MatRippleModule } from "@angular/material/core";
-import { MAT_DIALOG_DATA, MatDialogRef } from "@angular/material/dialog";
+import {Component, inject} from "@angular/core";
+import {MatRippleModule} from "@angular/material/core";
+import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
 
 export interface ConfirmationDialogData {
-    title: string;
-    description: string;
+  title: string;
+  description: string;
 }
 
 @Component({
-    selector: 'app-confirmation-dialog',
-    templateUrl: './confirmation-dialog.component.html',
-    styleUrl: './confirmation-dialog.component.scss',
-    imports: [MatRippleModule]
+  selector: 'app-confirmation-dialog',
+  templateUrl: './confirmation-dialog.component.html',
+  styleUrl: './confirmation-dialog.component.scss',
+  imports: [MatRippleModule]
 })
 export class ConfirmationDialog {
-    private readonly dialogRef = inject(MatDialogRef<ConfirmationDialog>);
-    data: ConfirmationDialogData = inject(MAT_DIALOG_DATA);
+  private readonly dialogRef = inject(MatDialogRef<ConfirmationDialog>);
+  data: ConfirmationDialogData = inject(MAT_DIALOG_DATA);
 
-    get title(): string {
-        return this.data.title;
-    }
+  get title(): string {
+    return this.data.title;
+  }
 
-    get description(): string {
-        return this.data.description;
-    }
+  get description(): string {
+    return this.data.description;
+  }
 
-    closeAndValidate(): void {
-        this.dialogRef.close(true);
-    }
+  closeAndValidate(): void {
+    this.dialogRef.close(true);
+  }
 
-    closeDialog(): void {
-        this.dialogRef.close(false);
-    }
-}
+  closeDialog(): void {
+    this.dialogRef.close(false);
+  }
+}

frontend/src/app/components/footer/footer.component.html

@@ -1,14 +1,14 @@
 <div i18n>
-    <span class="copy-left">&copy;</span>
-    2016 - 2024 All rights reserved
-    -
-    2.1
-    <a [routerLink]="['./']" matTooltip="Health checking will be available in future..." i18n-matTooltip>
-        <mat-icon>favorite</mat-icon>
-    </a>
+  <span class="copy-left">&copy;</span>
+  2016 - 2026 All rights reserved
+  -
+  2.2
+  <a [routerLink]="['./']" matTooltip="Health checking will be available in future..." i18n-matTooltip>
+    <mat-icon>favorite</mat-icon>
+  </a>
 </div>
 <div>
-    <mat-icon matTooltip="Documentation will be available in future..." i18n-matTooltip>menu_book</mat-icon>
-    -
-    <span i18n>Development realised by</span> Florian THIERRY
-</div>
+  <mat-icon matTooltip="Documentation will be available in future..." i18n-matTooltip>menu_book</mat-icon>
+  -
+  <span i18n>Development realised by</span> Florian THIERRY
+</div>

frontend/src/app/components/footer/footer.component.scss

@@ -1,31 +1,33 @@
 :host {
-    background-color: #3f51b5;
-    color: rgba(255,255,255,.6);
+  background-color: #3f51b5;
+  color: rgba(255, 255, 255, .6);
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  align-items: center;
+  padding: .5em;
+  font-size: 1.1em;
+
+  div {
     display: flex;
     flex-direction: row;
-    justify-content: space-around;
     align-items: center;
-    padding: .5em;
-    font-size: 1.1em;
+    gap: .2em;
 
-    div {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-
-        .copy-left {
-            transform: rotate(180deg);
-        }
-        a {
-            text-decoration: none;
-            color: rgba(255,255,255,.6);
-        }
-
-        mat-icon {
-            font-size: 1em;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-        }
+    .copy-left {
+      transform: rotate(180deg);
     }
-}
+
+    a {
+      text-decoration: none;
+      color: rgba(255, 255, 255, .6);
+    }
+
+    mat-icon {
+      font-size: 1em;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+}

frontend/src/app/components/footer/footer.component.ts

@@ -1,14 +1,13 @@
-import { Component } from '@angular/core';
-import { MatIconModule } from '@angular/material/icon';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { RouterModule } from '@angular/router';
+import {Component} from '@angular/core';
+import {MatIconModule} from '@angular/material/icon';
+import {MatTooltipModule} from '@angular/material/tooltip';
+import {RouterModule} from '@angular/router';
 
 @Component({
-    selector: 'app-footer',
-    imports: [MatIconModule, MatTooltipModule, RouterModule],
-    templateUrl: './footer.component.html',
-    styleUrl: './footer.component.scss'
+  selector: 'app-footer',
+  imports: [MatIconModule, MatTooltipModule, RouterModule],
+  templateUrl: './footer.component.html',
+  styleUrl: './footer.component.scss'
 })
 export class FooterComponent {
-
 }

frontend/src/app/components/header/header.component.html

@@ -1,44 +1,44 @@
 <div class="left">
-    <button type="button"
-            (click)="sideMenu.open()"
-            class="cod-button icon"
-            matTooltip="Click to show side menu" 
-            matRipple 
-            i18n-matTooltip>
-        <mat-icon>menu</mat-icon>
-    </button>
-    <a [routerLink]="['/home']">
-        <img src="assets/images/codiki.png" alt="logo"/>
-        <span class="title">Codiki</span>
-    </a>
+  <button type="button"
+          (click)="sideMenu.open()"
+          class="cod-button icon"
+          matTooltip="Click to show side menu"
+          matRipple
+          i18n-matTooltip>
+    <mat-icon>menu</mat-icon>
+  </button>
+  <a [routerLink]="['/home']">
+    <img src="assets/images/codiki.png" alt="logo"/>
+    <span class="title">Codiki</span>
+  </a>
 </div>
 
 <div class="middle">
-    <app-publications-search-bar></app-publications-search-bar>
+  <app-publications-search-bar></app-publications-search-bar>
 </div>
 
 <div class="right">
-    @if (isAuthenticated) {
-        <button type="button"
-                class="cod-button icon"
-                [matMenuTriggerFor]="authenticatedUserMenu" 
-                matRipple>
-            <mat-icon>more_vert</mat-icon>
-        </button>
-        <mat-menu #authenticatedUserMenu="matMenu">
-            <div class="authenticated-user-menu">
-                <a [routerLink]="['/my-publications']" matRipple i18n>
-                    <mat-icon>description</mat-icon>
-                    My publications
-                </a>
-                <a [routerLink]="['/disconnect']" matRipple class="disconnection" i18n>
-                    <mat-icon>logout</mat-icon>
-                    Disconnect
-                </a>
-            </div>
-        </mat-menu>
-    } @else {
-        <a [routerLink]="['/login']" class="cod-button" matRipple i18n>Login</a>
-    }
+  @if (isAuthenticated) {
+    <button type="button"
+            class="cod-button icon"
+            [matMenuTriggerFor]="authenticatedUserMenu"
+            matRipple>
+      <mat-icon>more_vert</mat-icon>
+    </button>
+    <mat-menu #authenticatedUserMenu="matMenu">
+      <div class="authenticated-user-menu">
+        <a [routerLink]="['/my-publications']" matRipple i18n>
+          <mat-icon>description</mat-icon>
+          My publications
+        </a>
+        <a [routerLink]="['/disconnect']" matRipple class="disconnection" i18n>
+          <mat-icon>logout</mat-icon>
+          Disconnect
+        </a>
+      </div>
+    </mat-menu>
+  } @else {
+    <a [routerLink]="['/login']" class="cod-button" matRipple i18n>Login</a>
+  }
 </div>
-<app-side-menu #sideMenu></app-side-menu>
+<app-side-menu #sideMenu></app-side-menu>

frontend/src/app/components/header/header.component.scss

@@ -1,148 +1,148 @@
 $headerHeight: 3.5em;
 
 :host {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  background-color: #3f51b5;
+  color: white;
+  position: relative;
+  height: $headerHeight;
+  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
+
+  div {
     display: flex;
     flex-direction: row;
-    justify-content: space-between;
-    background-color: #3f51b5;
-    color: white;
+    justify-content: center;
     position: relative;
     height: $headerHeight;
-    box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
 
-    div {
+    &.left {
+      position: absolute;
+      top: 0;
+      left: 0;
+      align-items: center;
+      gap: 1em;
+      padding: 0 1em;
+      z-index: 2;
+
+      a {
         display: flex;
         flex-direction: row;
         justify-content: center;
-        position: relative;
-        height: $headerHeight;
+        align-items: center;
+        color: white;
+        text-decoration: none;
+        gap: .5em;
 
-        &.left {
-            position: absolute;
-            top: 0;
-            left: 0;
-            align-items: center;
-            gap: 1em;
-            padding: 0 1em;
-            z-index: 2;
-
-            a {
-                display: flex;
-                flex-direction: row;
-                justify-content: center;
-                align-items: center;
-                color: white;
-                text-decoration: none;
-                gap: .5em;
-                
-                img {
-                    $imageSize: 2em;
-                    width: $imageSize;
-                    height: $imageSize;
-                }
-    
-                .title {
-                    font-size: 1.5em;
-                    display: none;
-
-                    @media screen and (min-width: 600px) {
-                        display: block;
-                    }
-                }
-            }
+        img {
+          $imageSize: 2em;
+          width: $imageSize;
+          height: $imageSize;
         }
 
-        &.middle {
-            flex: 1;
-            $borderRadiusValue: 10em;
-            position: relative;
-            transition: max-width .2s ease-in-out;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            z-index: 1;
-            
-            app-publications-search-bar {
-                width: 100%;
-                max-width: 12em;
+        .title {
+          font-size: 1.5em;
+          display: none;
 
-                @media screen and (min-width: 435px) {
-                    max-width: 16em;
-                }
-    
-                @media screen and (min-width: 500px) {
-                    max-width: 20em;
-                }
-    
-                @media screen and (min-width: 700px) {
-                    max-width: 24em;
-                }
-    
-                @media screen and (min-width: 800px) {
-                    max-width: 32em;
-                }
-    
-                @media screen and (min-width: 900px) {
-                    max-width: 38em;
-                }
-    
-                @media screen and (min-width: 1000px) {
-                    max-width: 45em;
-                }
-    
-                @media screen and (min-width: 1100px) {
-                    max-width: 50em;
-                }
-            }
-        }
-
-        &.right {
-            position: absolute;
-            top: 0;
-            right: 0;
-            z-index: 2;
-            margin-right: .5em;
-            
-            a, button {
-                margin: .5em;
-            }
+          @media screen and (min-width: 600px) {
+            display: block;
+          }
         }
+      }
     }
+
+    &.middle {
+      flex: 1;
+      $borderRadiusValue: 10em;
+      position: relative;
+      transition: max-width .2s ease-in-out;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      z-index: 1;
+
+      app-publications-search-bar {
+        width: 100%;
+        max-width: 12em;
+
+        @media screen and (min-width: 435px) {
+          max-width: 16em;
+        }
+
+        @media screen and (min-width: 500px) {
+          max-width: 20em;
+        }
+
+        @media screen and (min-width: 700px) {
+          max-width: 24em;
+        }
+
+        @media screen and (min-width: 800px) {
+          max-width: 32em;
+        }
+
+        @media screen and (min-width: 900px) {
+          max-width: 38em;
+        }
+
+        @media screen and (min-width: 1000px) {
+          max-width: 45em;
+        }
+
+        @media screen and (min-width: 1100px) {
+          max-width: 50em;
+        }
+      }
+    }
+
+    &.right {
+      position: absolute;
+      top: 0;
+      right: 0;
+      z-index: 2;
+      margin-right: .5em;
+
+      a, button {
+        margin: .5em;
+      }
+    }
+  }
 }
 
 app-side-menu {
-    height: 100%;
+  height: 100%;
 }
 
 .authenticated-user-menu {
+  display: flex;
+  flex-direction: column;
+  padding: 0.2em 0;
+
+  a {
+    flex: 1;
     display: flex;
-    flex-direction: column;
-    padding: 0.2em 0;
+    flex-direction: row;
+    align-items: center;
+    text-decoration: none;
+    background-color: white;
+    color: black;
+    padding: 1em;
+    gap: .5em;
+    transition: background-color .2s ease-in-out, color .2s ease-in-out;
 
-    a {
-        flex: 1;
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        text-decoration: none;
-        background-color: white;
-        color: black;
-        padding: 1em;
-        gap: .5em;
-        transition: background-color .2s ease-in-out, color .2s ease-in-out;
-
-        &:hover {
-            background-color: #5c6bc0;
-            color: white;
-        }
-
-        &.disconnection {
-            color: #D50000;
-
-            &:hover {
-                background-color: #E53935;
-                color: white;
-            }
-        }
+    &:hover {
+      background-color: #5c6bc0;
+      color: white;
     }
-}
+
+    &.disconnection {
+      color: #D50000;
+
+      &:hover {
+        background-color: #E53935;
+        color: white;
+      }
+    }
+  }
+}

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

@@ -1,19 +1,18 @@
-
-import { Component, inject } from '@angular/core';
-import { FormControl, ReactiveFormsModule } from '@angular/forms';
-import { MatButtonModule } from '@angular/material/button';
-import { MatRippleModule } from '@angular/material/core';
-import { MatIconModule } from '@angular/material/icon';
-import { MatMenuModule } from '@angular/material/menu';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { RouterModule } from '@angular/router';
-import { AuthenticationService } from '../../core/service/authentication.service';
-import { PublicationsSearchBarComponent } from '../publications-search-bar/publications-search-bar.component';
-import { SideMenuComponent } from '../side-menu/side-menu.component';
+import {Component, inject} from '@angular/core';
+import {FormControl, ReactiveFormsModule} from '@angular/forms';
+import {MatButtonModule} from '@angular/material/button';
+import {MatRippleModule} from '@angular/material/core';
+import {MatIconModule} from '@angular/material/icon';
+import {MatMenuModule} from '@angular/material/menu';
+import {MatTooltipModule} from '@angular/material/tooltip';
+import {RouterModule} from '@angular/router';
+import {AuthenticationService} from '../../core/service/authentication.service';
+import {PublicationsSearchBarComponent} from '../publications-search-bar/publications-search-bar.component';
+import {SideMenuComponent} from '../side-menu/side-menu.component';
 
 @Component({
-    selector: 'app-header',
-    imports: [
+  selector: 'app-header',
+  imports: [
     MatButtonModule,
     MatIconModule,
     MatMenuModule,
@@ -23,9 +22,9 @@ import { SideMenuComponent } from '../side-menu/side-menu.component';
     ReactiveFormsModule,
     RouterModule,
     SideMenuComponent
-],
-    templateUrl: './header.component.html',
-    styleUrl: './header.component.scss'
+  ],
+  templateUrl: './header.component.html',
+  styleUrl: './header.component.scss'
 })
 export class HeaderComponent {
   private authenticationService = inject(AuthenticationService);

frontend/src/app/components/publication-edition/code-block-dialog/code-block-dialog.component.html

@@ -4,34 +4,34 @@
         matTooltip="Close"
         matRipple
         i18n-matTooltip>
-    <mat-icon>close</mat-icon>
+  <mat-icon>close</mat-icon>
 </button>
 <header>
-    <h1 i18n>Add a code block</h1>
+  <h1 i18n>Add a code block</h1>
 </header>
 <form [formGroup]="formGroup" (submit)="closeAndValidate()" class="cod-form" ngNativeValidate>
-    <div class="form-content">
-        <mat-form-field>
-            <mat-label i18n>Programming language</mat-label>
-            <mat-select #programmingLanguageSelect formControlName="programmingLanguage">
-                @for(programmingLanguage of programmingLanguages; track programmingLanguage) {
-                    <mat-option [value]="programmingLanguage.code">
-                        {{programmingLanguage.label}}
-                    </mat-option>
-                }
-            </mat-select>
-        </mat-form-field>
-        <mat-form-field>
-            <mat-label i18n>Code block</mat-label>
-            <textarea matInput formControlName="codeBlock"></textarea>
-        </mat-form-field>
-    </div>
-    <div class="actions reversed">
-        <button type="submit" class="cod-button" matRipple i18n>
-            Validate
-        </button>
-        <button type="button" (click)="closeDialog()" class="cod-button secondary" matRipple i18n>
-            Cancel
-        </button>
-    </div>
+  <div class="form-content">
+    <mat-form-field>
+      <mat-label i18n>Programming language</mat-label>
+      <mat-select #programmingLanguageSelect formControlName="programmingLanguage">
+        @for (programmingLanguage of programmingLanguages; track programmingLanguage) {
+          <mat-option [value]="programmingLanguage.code">
+            {{ programmingLanguage.label }}
+          </mat-option>
+        }
+      </mat-select>
+    </mat-form-field>
+    <mat-form-field>
+      <mat-label i18n>Code block</mat-label>
+      <textarea matInput formControlName="codeBlock"></textarea>
+    </mat-form-field>
+  </div>
+  <div class="actions reversed">
+    <button type="submit" class="cod-button" matRipple i18n>
+      Validate
+    </button>
+    <button type="button" (click)="closeDialog()" class="cod-button secondary" matRipple i18n>
+      Cancel
+    </button>
+  </div>
 </form>

frontend/src/app/components/publication-edition/code-block-dialog/code-block-dialog.component.scss

@@ -1,30 +1,30 @@
 :host {
+  display: flex;
+  flex-direction: column;
+  padding: 1em;
+  gap: 1em;
+  position: relative;
+  max-height: 90vh;
+
+  header {
+    flex: 1;
     display: flex;
-    flex-direction: column;
-    padding: 1em;
-    gap: 1em;
-    position: relative;
-    max-height: 90vh;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+  }
 
-    header {
-        flex: 1;
-        display: flex;
-        flex-direction: row;
-        justify-content: center;
-        align-items: center;
-    }
+  form {
+    div {
+      &.form-content {
+        mat-form-field {
+          width: 100%;
 
-    form {
-        div {
-            &.form-content {
-                mat-form-field {
-                    width: 100%;
-
-                    textarea {
-                        height: 30vh;
-                    }
-                }
-            }
+          textarea {
+            height: 30vh;
+          }
         }
+      }
     }
-}
+  }
+}

frontend/src/app/components/publication-edition/code-block-dialog/code-block-dialog.component.ts

@@ -1,119 +1,119 @@
-import { Component, inject } from "@angular/core";
-import { FormBuilder, FormControl, ReactiveFormsModule, Validators } from "@angular/forms";
-import { MatRippleModule } from "@angular/material/core";
-import { MatDialogRef } from "@angular/material/dialog";
-import { MatFormFieldModule } from "@angular/material/form-field";
-import { MatIcon } from "@angular/material/icon";
-import { MatInputModule } from "@angular/material/input";
-import { MatSelectModule } from '@angular/material/select';
-import { MatTooltip } from "@angular/material/tooltip";
+import {Component, inject} from "@angular/core";
+import {FormBuilder, FormControl, ReactiveFormsModule, Validators} from "@angular/forms";
+import {MatRippleModule} from "@angular/material/core";
+import {MatDialogRef} from "@angular/material/dialog";
+import {MatFormFieldModule} from "@angular/material/form-field";
+import {MatIcon} from "@angular/material/icon";
+import {MatInputModule} from "@angular/material/input";
+import {MatSelectModule} from '@angular/material/select';
+import {MatTooltip} from "@angular/material/tooltip";
 
 export interface ProgramingLanguage {
-    code: string;
-    label: string;
+  code: string;
+  label: string;
 }
 
 export const PROGRAMMING_LANGUAGES: ProgramingLanguage[] = [
-    {
-        code: 'bash',
-        label: 'Bash'
-    },
-    {
-        code: 'c',
-        label: 'C'
-    },
-    {
-        code: 'cpp',
-        label: 'C++'
-    },
-    {
-        code: 'cs',
-        label: 'C#'
-    },
-    {
-        code: 'lua',
-        label: 'Lua'
-    },
-    {
-        code: 'java',
-        label: 'Java'
-    },
-    {
-        code: 'json5',
-        label: 'JSON'
-    },
-    {
-        code: 'kt',
-        label: 'Kotlin'
-    },
-    {
-        code: 'markup',
-        label: 'html/xml'
-    },
-    {
-        code: 'php',
-        label: 'PHP'
-    },
-    {
-        code: 'plsql',
-        label: 'PL/SQL'
-    },
-    {
-        code: 'python',
-        label: 'Python'
-    },
-    {
-        code: 'powershell',
-        label: 'PowerShell'
-    },
-    {
-        code: 'rust',
-        label: 'Rust'
-    },
-    {
-        code: 'sql',
-        label: 'SQL'
-    },
-    {
-        code: 'ts',
-        label: 'Typescript'
-    },
-    {
-        code: 'yml',
-        label: 'YAML'
-    },
+  {
+    code: 'bash',
+    label: 'Bash'
+  },
+  {
+    code: 'c',
+    label: 'C'
+  },
+  {
+    code: 'cpp',
+    label: 'C++'
+  },
+  {
+    code: 'cs',
+    label: 'C#'
+  },
+  {
+    code: 'lua',
+    label: 'Lua'
+  },
+  {
+    code: 'java',
+    label: 'Java'
+  },
+  {
+    code: 'json5',
+    label: 'JSON'
+  },
+  {
+    code: 'kt',
+    label: 'Kotlin'
+  },
+  {
+    code: 'markup',
+    label: 'html/xml'
+  },
+  {
+    code: 'php',
+    label: 'PHP'
+  },
+  {
+    code: 'plsql',
+    label: 'PL/SQL'
+  },
+  {
+    code: 'python',
+    label: 'Python'
+  },
+  {
+    code: 'powershell',
+    label: 'PowerShell'
+  },
+  {
+    code: 'rust',
+    label: 'Rust'
+  },
+  {
+    code: 'sql',
+    label: 'SQL'
+  },
+  {
+    code: 'ts',
+    label: 'Typescript'
+  },
+  {
+    code: 'yml',
+    label: 'YAML'
+  },
 ];
 
 @Component({
-    selector: 'app-code-block-dialog',
-    templateUrl: './code-block-dialog.component.html',
-    styleUrl: './code-block-dialog.component.scss',
-    imports: [
-        MatFormFieldModule,
-        MatIcon,
-        MatInputModule,
-        MatRippleModule,
-        MatSelectModule,
-        MatTooltip,
-        ReactiveFormsModule,
-    ]
+  selector: 'app-code-block-dialog',
+  templateUrl: './code-block-dialog.component.html',
+  styleUrl: './code-block-dialog.component.scss',
+  imports: [
+    MatFormFieldModule,
+    MatIcon,
+    MatInputModule,
+    MatRippleModule,
+    MatSelectModule,
+    MatTooltip,
+    ReactiveFormsModule,
+  ]
 })
 export class CodeBlockDialog {
-    private readonly dialogRef = inject(MatDialogRef<CodeBlockDialog>);
-    private formBuilder = inject(FormBuilder);
-    programmingLanguages = PROGRAMMING_LANGUAGES;
-    formGroup = this.formBuilder.group({
-        programmingLanguage: new FormControl('', Validators.required),
-        codeBlock: new FormControl('', Validators.required)
-    });
+  private readonly dialogRef = inject(MatDialogRef<CodeBlockDialog>);
+  private formBuilder = inject(FormBuilder);
+  programmingLanguages = PROGRAMMING_LANGUAGES;
+  formGroup = this.formBuilder.group({
+    programmingLanguage: new FormControl('', Validators.required),
+    codeBlock: new FormControl('', Validators.required)
+  });
 
-    closeAndValidate(): void {
-        if (this.formGroup.valid) {
-            this.dialogRef.close(this.formGroup.value);
-        }
+  closeAndValidate(): void {
+    if (this.formGroup.valid) {
+      this.dialogRef.close(this.formGroup.value);
     }
+  }
 
-    closeDialog(): void {
-        this.dialogRef.close();
-    }
-}
+  closeDialog(): void {
+    this.dialogRef.close();
+  }
+}

frontend/src/app/components/publication-edition/picture-selection-dialog/picture-selection-dialog.component.html

@@ -4,40 +4,41 @@
         matTooltip="Close"
         matRipple
         i18n-matTooltip>
-    <mat-icon>close</mat-icon>
+  <mat-icon>close</mat-icon>
 </button>
 <header>
-    <h1 i18n>Select an illustration</h1>
+  <h1 i18n>Select an illustration</h1>
 </header>
 <div class="picture-container">
-    @if (isLoading) {
-        <h2 i18n>Pictures loading...</h2>
-        <mat-spinner></mat-spinner>
+  @if (isLoading()) {
+    <h2 i18n>Pictures loading...</h2>
+    <mat-spinner></mat-spinner>
+  } @else {
+    @if (pictures.length) {
+      @for (picture of pictures; track picture) {
+        <img src="/api/pictures/{{picture.id}}" (click)="selectPicture(picture)" matTooltip="Choose this illustration"
+             i18n-matTooltip/>
+      }
     } @else {
-        @if (pictures.length) {
-            @for(picture of pictures; track picture) {
-                <img src="/api/pictures/{{picture.id}}" (click)="selectPicture(picture)" matTooltip="Choose this illustration" i18n-matTooltip/>
-            }
-        } @else {
-            <h2 i18n>There is no any picture.</h2>
-        }
+      <h2 i18n>There is no any picture.</h2>
     }
+  }
 </div>
 <footer>
-    <button type="button"
-            (click)="closeDialog()"
-            class="cod-button secondary"
-            matRipple
-            i18n>
-        Cancel
-    </button>
-    <button type="button"
-            (click)="fileUpload.click()"
-            class="cod-button"
-            matRipple
-            i18n>
-        <mat-icon>upload_file</mat-icon>
-        Add new picture
-    </button>
-    <input type="file" (change)="uploadPicture($event)" #fileUpload/>
-</footer>
+  <button type="button"
+          (click)="closeDialog()"
+          class="cod-button secondary"
+          matRipple
+          i18n>
+    Cancel
+  </button>
+  <button type="button"
+          (click)="fileUpload.click()"
+          class="cod-button"
+          matRipple
+          i18n>
+    <mat-icon>upload_file</mat-icon>
+    Add new picture
+  </button>
+  <input type="file" (change)="uploadPicture($event)" #fileUpload/>
+</footer>

frontend/src/app/components/publication-edition/picture-selection-dialog/picture-selection-dialog.component.scss

@@ -1,83 +1,83 @@
 :host {
+  display: flex;
+  flex-direction: column;
+  padding: 1em;
+  gap: 1em;
+  position: relative;
+  max-height: 90vh;
+
+  header {
+    flex: 1;
     display: flex;
-    flex-direction: column;
-    padding: 1em;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .picture-container {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
     gap: 1em;
-    position: relative;
-    max-height: 90vh;
+    max-height: 30em;
+    overflow-y: auto;
+    min-height: 10em;
+    padding: .5em 0;
 
-    header {
-        flex: 1;
-        display: flex;
-        flex-direction: row;
-        justify-content: center;
-        align-items: center;
+    img {
+      width: 15em;
+      height: 10em;
+      object-fit: cover;
+      border-radius: 1em;
+      opacity: .9;
+      box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
+      transition: opacity .2s ease-in-out, box-shadow .2s ease-in-out;
+
+      &:hover {
+        cursor: pointer;
+        opacity: 1;
+        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .32), 0 2px 10px 0 rgba(0, 0, 0, .24);
+      }
+    }
+  }
+
+  footer {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+
+    button {
+      padding: .8em 1.2em;
+      border-radius: 10em;
+      border: none;
+      background-color: #3f51b5;
+      color: white;
+      transition: background-color .2s ease-in-out;
+      cursor: pointer;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      &:hover {
+        background-color: #5b6ed8;
+      }
+
+      &.secondary {
+        color: #3f51b5;
+        background-color: white;
+
+        &:hover {
+          background-color: #f2f4ff;
+          cursor: pointer;
+        }
+      }
     }
 
-    .picture-container {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        justify-content: center;
-        align-items: center;
-        gap: 1em;
-        max-height: 30em;
-        overflow-y: auto;
-        min-height: 10em;
-        padding: .5em 0;
-
-        img {
-            width: 15em;
-            height: 10em;
-            object-fit: cover;
-            border-radius: 1em;
-            opacity: .9;
-            box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
-            transition: opacity .2s ease-in-out, box-shadow .2s ease-in-out;
-
-            &:hover {
-                cursor: pointer;
-                opacity: 1;
-                box-shadow: 0 2px 5px 0 rgba(0,0,0,.32),0 2px 10px 0 rgba(0,0,0,.24);
-            }
-        }
+    input[type=file] {
+      display: none;
     }
-
-    footer {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-        align-items: center;
-
-        button {
-            padding: .8em 1.2em;
-            border-radius: 10em;
-            border: none;
-            background-color: #3f51b5;
-            color: white;
-            transition: background-color .2s ease-in-out;
-            cursor: pointer;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-        
-            &:hover {
-                background-color: #5b6ed8;
-            }
-        
-            &.secondary {
-                color: #3f51b5;
-                background-color: white;
-        
-                &:hover {
-                    background-color: #f2f4ff;
-                    cursor: pointer;
-                }
-            }
-        }
-
-        input[type=file] {
-            display: none;
-        }
-    }
-}
+  }
+}

frontend/src/app/components/publication-edition/picture-selection-dialog/picture-selection-dialog.component.ts

@@ -1,74 +1,74 @@
-import { Component, inject, OnInit } from "@angular/core";
-import { Picture } from "../../../core/rest-services/picture/model/picture";
-import {MatProgressSpinnerModule} from '@angular/material/progress-spinner'; 
-import { MatSnackBar } from "@angular/material/snack-bar";
-import { PictureRestService } from "../../../core/rest-services/picture/picture.rest-service";
-import { MatIcon } from "@angular/material/icon";
-import { MatDialogRef } from "@angular/material/dialog";
-import {MatRippleModule} from '@angular/material/core'; 
-import { MatTooltip } from "@angular/material/tooltip";
+import {Component, inject, OnInit, signal} from "@angular/core";
+import {Picture} from "../../../core/rest-services/picture/model/picture";
+import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
+import {MatSnackBar} from "@angular/material/snack-bar";
+import {PictureRestService} from "../../../core/rest-services/picture/picture.rest-service";
+import {MatIcon} from "@angular/material/icon";
+import {MatDialogRef} from "@angular/material/dialog";
+import {MatRippleModule} from '@angular/material/core';
+import {MatTooltip} from "@angular/material/tooltip";
 
 @Component({
-    selector: 'app-picture-selection',
-    templateUrl: './picture-selection-dialog.component.html',
-    styleUrl: './picture-selection-dialog.component.scss',
-    imports: [
-        MatIcon,
-        MatRippleModule,
-        MatProgressSpinnerModule,
-        MatTooltip
-    ]
+  selector: 'app-picture-selection',
+  templateUrl: './picture-selection-dialog.component.html',
+  styleUrl: './picture-selection-dialog.component.scss',
+  imports: [
+    MatIcon,
+    MatRippleModule,
+    MatProgressSpinnerModule,
+    MatTooltip
+  ]
 })
 export class PictureSelectionDialog implements OnInit {
-    private readonly pictureRestService = inject(PictureRestService);
-    private readonly snackBar = inject(MatSnackBar);
-    private readonly dialogRef = inject(MatDialogRef<PictureSelectionDialog>);
+  private readonly pictureRestService = inject(PictureRestService);
+  private readonly snackBar = inject(MatSnackBar);
+  private readonly dialogRef = inject(MatDialogRef<PictureSelectionDialog>);
 
-    isLoading: boolean = false;
-    isLoaded: boolean = false;
-    pictures: Picture[] = [];
+  isLoading = signal(false);
+  isLoaded = signal(false);
+  pictures: Picture[] = [];
 
-    ngOnInit(): void {
-        this.isLoading = true;
-        this.pictureRestService.getAllOfCurrentUser()
-            .then(pictures => {
-                this.pictures = pictures;
-            })
-            .catch(error => {
-                if (error.status === 401) {
-                    this.dialogRef.close();
-                } else {
-                    const errorMessage = $localize`An error occured while loading pictures.`;
-                    console.error(errorMessage, error);
-                    this.snackBar.open(errorMessage, $localize`Close`, { duration: 5000 });
-                }
-            })
-            .finally(() => {
-                this.isLoading = false;
-                this.isLoaded = true;
-            });
-    }
-
-    selectPicture(picture: Picture): void {
-        this.dialogRef.close(picture.id);
-    }
-
-    closeDialog(): void {
-        this.dialogRef.close();
-    }
-
-    uploadPicture(fileSelectionEvent: any): void {
-        const pictureFile = fileSelectionEvent.target.files[0];
-        if (pictureFile) {
-            this.pictureRestService.uploadPicture(pictureFile)
-                .then(pictureId => {
-                    this.dialogRef.close(pictureId);
-                })
-                .catch(error => {
-                    const errorMessage = $localize`A technical error occured while uploading your picture.`;
-                    console.error(errorMessage, error);
-                    this.snackBar.open(errorMessage, $localize`Close`, { duration: 5000 });
-                });
+  ngOnInit(): void {
+    this.isLoading.set(true);
+    this.pictureRestService.getAllOfCurrentUser()
+      .then(pictures => {
+        this.pictures = pictures;
+      })
+      .catch(error => {
+        if (error.status === 401) {
+          this.dialogRef.close();
+        } else {
+          const errorMessage = $localize`An error occurred while loading pictures.`;
+          console.error(errorMessage, error);
+          this.snackBar.open(errorMessage, $localize`Close`, {duration: 5000});
         }
+      })
+      .finally(() => {
+        this.isLoading.set(false);
+        this.isLoaded.set(true);
+      });
+  }
+
+  selectPicture(picture: Picture): void {
+    this.dialogRef.close(picture.id);
+  }
+
+  closeDialog(): void {
+    this.dialogRef.close();
+  }
+
+  uploadPicture(fileSelectionEvent: any): void {
+    const pictureFile = fileSelectionEvent.target.files[0];
+    if (pictureFile) {
+      this.pictureRestService.uploadPicture(pictureFile)
+        .then(pictureId => {
+          this.dialogRef.close(pictureId);
+        })
+        .catch(error => {
+          const errorMessage = $localize`A technical error occurred while uploading your picture.`;
+          console.error(errorMessage, error);
+          this.snackBar.open(errorMessage, $localize`Close`, {duration: 5000});
+        });
     }
-}
+  }
+}

frontend/src/app/components/publication-edition/picture-selection-dialog/picture-selection-dialog.service.ts

@@ -1,24 +1,24 @@
-import { inject, Injectable } from "@angular/core";
-import { PictureRestService } from "../../../core/rest-services/picture/picture.rest-service";
-import { MatSnackBar } from "@angular/material/snack-bar";
-import { MatDialogRef } from "@angular/material/dialog";
-import { PictureSelectionDialog } from "./picture-selection-dialog.component";
+import {inject, Injectable} from "@angular/core";
+import {PictureRestService} from "../../../core/rest-services/picture/picture.rest-service";
+import {MatSnackBar} from "@angular/material/snack-bar";
+import {MatDialogRef} from "@angular/material/dialog";
+import {PictureSelectionDialog} from "./picture-selection-dialog.component";
 
 @Injectable()
 export class PictureSelectionDialogService {
-    private pictureRestService = inject(PictureRestService);
-    private snackBar = inject(MatSnackBar);
-    private readonly dialogRef = inject(MatDialogRef<PictureSelectionDialog>);
+  private pictureRestService = inject(PictureRestService);
+  private snackBar = inject(MatSnackBar);
+  private readonly dialogRef = inject(MatDialogRef<PictureSelectionDialog>);
 
-    uploadPicture(pictureFile: File): void {
-        this.pictureRestService.uploadPicture(pictureFile)
-            .then(pictureId => {
-                this.dialogRef.close(pictureId);
-            })
-            .catch(error => {
-                const errorMessage = $localize`An error occured while uploading a picture...`;
-                console.error(errorMessage, error);
-                this.snackBar.open(errorMessage, $localize`Close`, { duration: 5000 });
-            });
-    }
-}
+  uploadPicture(pictureFile: File): void {
+    this.pictureRestService.uploadPicture(pictureFile)
+      .then(pictureId => {
+        this.dialogRef.close(pictureId);
+      })
+      .catch(error => {
+        const errorMessage = $localize`An error occured while uploading a picture...`;
+        console.error(errorMessage, error);
+        this.snackBar.open(errorMessage, $localize`Close`, {duration: 5000});
+      });
+  }
+}

frontend/src/app/components/publication-edition/publication-edition.component.html

@@ -1,132 +1,133 @@
 <form [formGroup]="publicationEditionForm" (submit)="save()" ngNativeValidate>
-    <header>
-        <h1>{{title}}</h1>
-    </header>
+  <header>
+    <h1>{{ title() }}</h1>
+  </header>
 
-    <mat-tab-group dynamicHeight (selectedIndexChange)="onTabChange($event)">
-        <mat-tab label="Edition" i18n-label>
-            <div class="form-content">
-                <div class="first-part">
-                    <div>
-                        <mat-form-field>
-                            <mat-label i18n>Title</mat-label>
-                            <input matInput type="text" formControlName="title" />
-                        </mat-form-field>
-                        <mat-form-field>
-                            <mat-label i18n>Description</mat-label>
-                            <input matInput type="text" formControlName="description" />
-                        </mat-form-field>
-                        <mat-form-field>
-                            <mat-label i18n>Category</mat-label>
-                            <mat-select formControlName="categoryId">
-                                @for (category of categories$ | async; track category) {
-                                    <mat-option [value]="category.id">
-                                        {{ category.name }}
-                                    </mat-option>
-                                }
-                            </mat-select>
-                        </mat-form-field>
-                    </div>
-
-                    <div class="picture-container">
-                        <img [src]="publication.illustrationId.length ? '/api/pictures/' + publication.illustrationId : '/assets/images/default-picture.png'"
-                            (click)="displayPictureSectionDialog()"
-                            matTooltip="Click to change illustration"
-                            i18n-matTooltip/>
-                    </div>
-                </div>
-
-                <div class="actions">
-                    <button type="button"
-                            (click)="insertTitle(1)"
-                            matTooltip="Click to insert a title 1 section"
-                            matRipple
-                            i18n-matTooltip>
-                        H1
-                    </button>
-                    <button type="button"
-                            (click)="insertTitle(2)"
-                            matTooltip="Click to insert a title 2 section"
-                            matRipple
-                            i18n-matTooltip>
-                        H2
-                    </button>
-                    <button type="button"
-                            (click)="insertTitle(3)"
-                            matTooltip="Click to insert a title 3 section"
-                            matRipple
-                            i18n-matTooltip>
-                        H3
-                    </button>
-                    <button type="button"
-                            (click)="insertLink()"
-                            matTooltip="Click to insert a link"
-                            matRipple
-                            i18n-matTooltip>
-                        <mat-icon>link</mat-icon>
-                    </button>
-                    <button type="button"
-                            (click)="selectAPicture()"
-                            matTooltip="Click to insert a picture"
-                            matRipple
-                            i18n-matTooltip>
-                        <mat-icon>image</mat-icon>
-                    </button>
-                    <button type="button"
-                            (click)="displayCodeBlockDialog()"
-                            matTooltip="Click to insert a code block"
-                            matRipple
-                            i18n-matTooltip>
-                        <mat-icon>code</mat-icon>
-                    </button>
-                    <button type="button"
-                            matTooltip="Click to display editor help"
-                            disabled
-                            matRipple
-                            i18n-matTooltip>
-                        <mat-icon>help</mat-icon>
-                    </button>
-                </div>
-                <mat-form-field>
-                    <mat-label i18n>Content</mat-label>
-                    <textarea 
-                        #textArea
-                        matInput
-                        formControlName="text"
-                        class="text-input"
-                        (keyup)="updateCursorPosition($event)"
-                        (click)="updateCursorPosition($event)">
-                    </textarea>
-                </mat-form-field>
-            </div>
-        </mat-tab>
-
-        <mat-tab label="Previewing" i18n-label>
-            <div class="preview">
-                @if ((isPreviewing$ | async) === true) {
-                    <div class="preview-loading">
-                        <h2 i18n>Preview is loading...</h2>
-                        <mat-spinner></mat-spinner>
-                    </div>
-                } @else {
-                    <img class="illustration" src="/api/pictures/{{ publication.illustrationId }}" />
-                    <header>
-                        <h1>{{ publication.title }}</h1>
-                        <h2>{{ publication.description }}</h2>
-                    </header>
-                    <main [innerHTML]="publicationInEdition.parsedText"></main>
+  <mat-tab-group dynamicHeight (selectedIndexChange)="onTabChange($event)">
+    <mat-tab label="Edition" i18n-label>
+      <div class="form-content">
+        <div class="first-part">
+          <div>
+            <mat-form-field>
+              <mat-label i18n>Title</mat-label>
+              <input matInput type="text" formControlName="title"/>
+            </mat-form-field>
+            <mat-form-field>
+              <mat-label i18n>Description</mat-label>
+              <input matInput type="text" formControlName="description"/>
+            </mat-form-field>
+            <mat-form-field>
+              <mat-label i18n>Category</mat-label>
+              <mat-select formControlName="categoryId">
+                @for (category of categories$ | async; track category) {
+                  <mat-option [value]="category.id">
+                    {{ category.name }}
+                  </mat-option>
                 }
-            </div>
-        </mat-tab>
-    </mat-tab-group>
-    <footer>
-        <app-submit-button [requestPending]="!!(isSaving$ | async)" i18n>Save</app-submit-button>
-        <button type="button"
-                class="cod-button secondary" 
-                (click)="goPreviousLocation()" 
-                matRipple 
-                i18n>
-            Cancel
-        </button>
-    </footer>
-</form>
+              </mat-select>
+            </mat-form-field>
+          </div>
+
+          <div class="picture-container">
+            <img
+              [src]="publication().illustrationId.length ? '/api/pictures/' + publication().illustrationId : '/assets/images/default-picture.png'"
+              (click)="displayPictureSectionDialog()"
+              matTooltip="Click to change illustration"
+              i18n-matTooltip/>
+          </div>
+        </div>
+
+        <div class="actions">
+          <button type="button"
+                  (click)="insertTitle(1)"
+                  matTooltip="Click to insert a title 1 section"
+                  matRipple
+                  i18n-matTooltip>
+            H1
+          </button>
+          <button type="button"
+                  (click)="insertTitle(2)"
+                  matTooltip="Click to insert a title 2 section"
+                  matRipple
+                  i18n-matTooltip>
+            H2
+          </button>
+          <button type="button"
+                  (click)="insertTitle(3)"
+                  matTooltip="Click to insert a title 3 section"
+                  matRipple
+                  i18n-matTooltip>
+            H3
+          </button>
+          <button type="button"
+                  (click)="insertLink()"
+                  matTooltip="Click to insert a link"
+                  matRipple
+                  i18n-matTooltip>
+            <mat-icon>link</mat-icon>
+          </button>
+          <button type="button"
+                  (click)="selectAPicture()"
+                  matTooltip="Click to insert a picture"
+                  matRipple
+                  i18n-matTooltip>
+            <mat-icon>image</mat-icon>
+          </button>
+          <button type="button"
+                  (click)="displayCodeBlockDialog()"
+                  matTooltip="Click to insert a code block"
+                  matRipple
+                  i18n-matTooltip>
+            <mat-icon>code</mat-icon>
+          </button>
+          <button type="button"
+                  matTooltip="Click to display editor help"
+                  disabled
+                  matRipple
+                  i18n-matTooltip>
+            <mat-icon>help</mat-icon>
+          </button>
+        </div>
+        <mat-form-field>
+          <mat-label i18n>Content</mat-label>
+          <textarea
+            #textArea
+            matInput
+            formControlName="text"
+            class="text-input"
+            (keyup)="updateCursorPosition($event)"
+            (click)="updateCursorPosition($event)">
+                    </textarea>
+        </mat-form-field>
+      </div>
+    </mat-tab>
+
+    <mat-tab label="Previewing" i18n-label>
+      <div class="preview">
+        @if (isPreviewing()) {
+          <div class="preview-loading">
+            <h2 i18n>Preview is loading...</h2>
+            <mat-spinner></mat-spinner>
+          </div>
+        } @else {
+          <img class="illustration" src="/api/pictures/{{ publication().illustrationId }}"/>
+          <header>
+            <h1>{{ publication().title }}</h1>
+            <h2>{{ publication().description }}</h2>
+          </header>
+          <main [innerHTML]="publicationInEdition().parsedText"></main>
+        }
+      </div>
+    </mat-tab>
+  </mat-tab-group>
+  <footer>
+    <app-submit-button [requestPending]="isSaving()" i18n>Save</app-submit-button>
+    <button type="button"
+            class="cod-button secondary"
+            (click)="goPreviousLocation()"
+            matRipple
+            i18n>
+      Cancel
+    </button>
+  </footer>
+</form>

frontend/src/app/components/publication-edition/publication-edition.component.scss

@@ -1,170 +1,170 @@
 :host {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
 
-    form {
-        margin: 1em;
-        max-width: 80em;
-        width: 90%;
-        border-radius: .5em;
-        box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
+  form {
+    margin: 1em;
+    max-width: 80em;
+    width: 90%;
+    border-radius: .5em;
+    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
 
-        & > header {
-            padding: 2em;
-            background-color: #3f51b5;
-            color: white;
-            border-radius: .5em .5em 0 0;
+    & > header {
+      padding: 2em;
+      background-color: #3f51b5;
+      color: white;
+      border-radius: .5em .5em 0 0;
 
-            h1 {
-                font-size: 2em;
-                margin-bottom: .5em;
-            }
-        }
-
-        footer {
-            padding: 2em;
-            display: flex;
-            flex-direction: row-reverse;
-            justify-content: space-between;
-            align-items: center;
-        }
+      h1 {
+        font-size: 2em;
+        margin-bottom: .5em;
+      }
     }
+
+    footer {
+      padding: 2em;
+      display: flex;
+      flex-direction: row-reverse;
+      justify-content: space-between;
+      align-items: center;
+    }
+  }
 }
 
 .form-content {
-    padding: 2em;
-    padding-bottom: 0;
+  padding: 2em;
+  padding-bottom: 0;
+  display: flex;
+  flex-direction: column;
+  gap: .5em;
+
+  mat-form-field {
+    textarea {
+      height: 20em;
+    }
+  }
+
+  .first-part {
     display: flex;
-    flex-direction: column;
+    flex-direction: column-reverse;
+    gap: 1em;
+
+    @media screen and (min-width: 600px) {
+      flex-direction: row;
+
+      div {
+        flex: 1 0;
+
+        &.picture-container {
+          max-width: 20em;
+
+          img {
+            max-height: 15em;
+            max-width: 20em;
+          }
+        }
+      }
+    }
+
+    div {
+      flex: 1 0 50%;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+
+      &.picture-container {
+        img {
+          flex: 1;
+          object-fit: cover;
+          width: 100%;
+          cursor: pointer;
+          border-radius: 1em;
+          opacity: .9;
+          box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
+          transition: opacity .2s ease-in-out, box-shadow .2s ease-in-out;
+
+          &:hover {
+            cursor: pointer;
+            opacity: 1;
+            box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .32), 0 2px 10px 0 rgba(0, 0, 0, .24);
+          }
+        }
+      }
+    }
+  }
+
+  .actions {
+    display: flex;
+    flex-direction: row;
     gap: .5em;
 
-    mat-form-field {
-        textarea {
-            height: 20em;
-        }
-    }
-
-    .first-part {
-        display: flex;
-        flex-direction: column-reverse;
-        gap: 1em;
-
-        @media screen and (min-width: 600px) {
-            flex-direction: row;
-
-            div {
-                flex: 1 0;
-
-                &.picture-container {
-                    max-width: 20em;
-
-                    img {
-                        max-height: 15em;
-                        max-width: 20em;
-                    }
-                }
-            }
-        }
-
-        div {
-            flex: 1 0 50%;
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-
-            &.picture-container {
-                img {
-                    flex: 1;
-                    object-fit: cover;
-                    width: 100%;
-                    cursor: pointer;
-                    border-radius: 1em;
-                    opacity: .9;
-                    box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
-                    transition: opacity .2s ease-in-out, box-shadow .2s ease-in-out;
-
-                    &:hover {
-                        cursor: pointer;
-                        opacity: 1;
-                        box-shadow: 0 2px 5px 0 rgba(0,0,0,.32),0 2px 10px 0 rgba(0,0,0,.24);
-                    }
-                }
-            }
-        }
-    }
-
-    .actions {
-        display: flex;
-        flex-direction: row;
-        gap: .5em;
-
-        button {
-            padding: 0;
-            border-radius: 10em;
-            border: none;
-            background-color: #3f51b5;
-            color: white;
-            transition: background-color .2s ease-in-out;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            width: 3em;
-            height: 3em;
-            box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
-            font-weight: bold;
-
-            &:hover {
-                background-color: #5b6ed8;
-                cursor: pointer;
-            }
-        
-            &:disabled {
-                background-color: #5f6aa6;
-                cursor: not-allowed;
-            }
-        }
+    button {
+      padding: 0;
+      border-radius: 10em;
+      border: none;
+      background-color: #3f51b5;
+      color: white;
+      transition: background-color .2s ease-in-out;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 3em;
+      height: 3em;
+      box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
+      font-weight: bold;
+
+      &:hover {
+        background-color: #5b6ed8;
+        cursor: pointer;
+      }
+
+      &:disabled {
+        background-color: #5f6aa6;
+        cursor: not-allowed;
+      }
     }
+  }
 }
 
 .preview {
+  display: flex;
+  flex-direction: column;
+  max-height: 80vh;
+  overflow-y: auto;
+
+  .preview-loading {
     display: flex;
     flex-direction: column;
-    max-height: 80vh;
-    overflow-y: auto;
+    align-items: center;
+  }
 
-    .preview-loading {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
+  .illustration {
+    flex: 1;
+    height: 12em;
+    object-fit: cover;
+    transition: height .2s ease-in-out;
+
+    @media screen and (min-width: 450px) {
+      height: 15em;
     }
 
-    .illustration {
-        flex: 1;
-        height: 12em;
-        object-fit: cover;
-        transition: height .2s ease-in-out;
-
-        @media screen and (min-width: 450px) {
-            height: 15em;
-        }
-
-        @media screen and (min-width: 600px) {
-            height: 20em;
-        }
-
-        @media screen and (min-width: 750px) {
-            height: 25em;
-        }
+    @media screen and (min-width: 600px) {
+      height: 20em;
     }
 
-    header {
-        padding: 2em;
+    @media screen and (min-width: 750px) {
+      height: 25em;
     }
+  }
 
-    main {
-        padding: 2em;
-        text-align: justify;
-    }
-}
+  header {
+    padding: 2em;
+  }
+
+  main {
+    padding: 2em;
+    text-align: justify;
+  }
+}

frontend/src/app/components/publication-edition/publication-edition.component.ts

@@ -1,148 +1,135 @@
-import { CommonModule, Location } from "@angular/common";
-import { Component, EventEmitter, inject, Input, OnChanges, OnDestroy, Output } from "@angular/core";
-import { FormGroup, ReactiveFormsModule } from "@angular/forms";
-import { MatDialogModule } from "@angular/material/dialog";
-import { MatIconModule } from "@angular/material/icon";
-import { MatInputModule } from "@angular/material/input";
-import { MatProgressSpinnerModule } from "@angular/material/progress-spinner";
-import { MatSelectModule } from "@angular/material/select";
-import { MatTabsModule } from "@angular/material/tabs";
-import { MatTooltipModule } from "@angular/material/tooltip";
-import { map, Observable, of, Subscription } from "rxjs";
-import { Category } from "../../core/rest-services/category/model/category";
-import { Publication } from "../../core/rest-services/publications/model/publication";
-import { CategoryService } from "../../core/service/category.service";
-import { SubmitButtonComponent } from "../submit-button/submit-button.component";
-import { PictureSelectionDialog } from "./picture-selection-dialog/picture-selection-dialog.component";
-import { PublicationEditionService } from "./publication-edition.service";
-import { MatRippleModule } from "@angular/material/core";
+import {CommonModule, Location} from "@angular/common";
+import {Component, effect, inject, input, output, signal} from "@angular/core";
+import {FormGroup, ReactiveFormsModule} from "@angular/forms";
+import {MatDialogModule} from "@angular/material/dialog";
+import {MatIconModule} from "@angular/material/icon";
+import {MatInputModule} from "@angular/material/input";
+import {MatProgressSpinnerModule} from "@angular/material/progress-spinner";
+import {MatSelectModule} from "@angular/material/select";
+import {MatTabsModule} from "@angular/material/tabs";
+import {MatTooltipModule} from "@angular/material/tooltip";
+import {map, Observable} from "rxjs";
+import {Category} from "../../core/rest-services/category/model/category";
+import {DEFAULT_PUBLICATION, Publication} from "../../core/rest-services/publications/model/publication";
+import {CategoryService} from "../../core/service/category.service";
+import {SubmitButtonComponent} from "../submit-button/submit-button.component";
+import {PublicationEditionService} from "./publication-edition.service";
+import {MatRippleModule} from "@angular/material/core";
 
 @Component({
-    selector: 'app-publication-edition',
-    templateUrl: './publication-edition.component.html',
-    styleUrl: './publication-edition.component.scss',
-    imports: [
-        CommonModule,
-        MatDialogModule,
-        MatIconModule,
-        MatInputModule,
-        MatRippleModule,
-        MatProgressSpinnerModule,
-        MatSelectModule,
-        MatTabsModule,
-        MatTooltipModule,
-        ReactiveFormsModule,
-        SubmitButtonComponent
-    ],
-    providers: [PublicationEditionService]
+  selector: 'app-publication-edition',
+  templateUrl: './publication-edition.component.html',
+  styleUrl: './publication-edition.component.scss',
+  imports: [
+    CommonModule,
+    MatDialogModule,
+    MatIconModule,
+    MatInputModule,
+    MatRippleModule,
+    MatProgressSpinnerModule,
+    MatSelectModule,
+    MatTabsModule,
+    MatTooltipModule,
+    ReactiveFormsModule,
+    SubmitButtonComponent
+  ],
+  providers: [PublicationEditionService]
 })
-export class PublicationEditionComponent implements OnChanges, OnDestroy {
-    @Input()
-    publication!: Publication;
-    @Input()
-    title!: string;
-    @Input()
-    isSaving$: Observable<boolean> = of(false);
-    @Output()
-    publicationSave = new EventEmitter<Publication>();
+export class PublicationEditionComponent {
+  readonly #categoryService = inject(CategoryService);
+  readonly #location = inject(Location);
+  readonly #publicationEditionService = inject(PublicationEditionService);
 
-    publicationInEdition!: Publication;
-    private readonly categoryService = inject(CategoryService);
-    private readonly location = inject(Location);
-    private readonly publicationEditionService = inject(PublicationEditionService);
-    private subscriptions: Subscription[] = [];
+  publication = input.required<Publication>();
+  title = input.required<string>();
+  isSaving = input.required<boolean>();
+  publicationSave = output<Publication>();
 
-    get publicationEditionForm(): FormGroup {
-        return this.publicationEditionService.publicationEditionForm;
+  isLoading = this.#publicationEditionService.isLoading;
+  isPreviewing = this.#publicationEditionService.isPreviewing;
+  publicationInEdition = signal<Publication>(DEFAULT_PUBLICATION);
+
+  constructor() {
+    effect(() => {
+      let publication = this.publication();
+      const publicationInEdition = this.publicationInEdition();
+      if (!publicationInEdition || publicationInEdition !== publication) {
+        this.publicationInEdition.set(publication);
+        this.#publicationEditionService.init(publication);
+      }
+    });
+  }
+
+  get publicationEditionForm(): FormGroup {
+    return this.#publicationEditionService.publicationEditionForm;
+  }
+
+  get categories$(): Observable<Category[]> {
+    return this.#categoryService.categories$
+      .pipe(
+        map(categories =>
+          categories.filter(category => category.subCategories.length == 0)
+            .sort(this.byNameAscComparator())
+        )
+      );
+  }
+
+  private byNameAscComparator(): (categoryA: Category, categoryB: Category) => number {
+    return (categoryA, categoryB) => this.compareStrings(categoryA.name, categoryB.name);
+  }
+
+  private compareStrings(stringA: string, stringB: string): number {
+    if (stringA < stringB) {
+      return -1;
     }
-
-    get isLoading$(): Observable<boolean> {
-        return this.publicationEditionService.isLoading$;
+    if (stringA > stringB) {
+      return 1;
     }
+    return 0;
+  }
 
-    get isPreviewing$(): Observable<boolean> {
-        return this.publicationEditionService.isPreviewing$;
+  goPreviousLocation(): void {
+    this.#location.back();
+  }
+
+  insertTitle(titleNumber: number): void {
+    this.#publicationEditionService.insertTitle(titleNumber);
+  }
+
+  selectAPicture(): void {
+    this.#publicationEditionService.selectAPicture();
+  }
+
+  insertLink(): void {
+    this.#publicationEditionService.insertLink();
+  }
+
+  displayCodeBlockDialog(): void {
+    this.#publicationEditionService.displayCodeBlockDialog();
+  }
+
+  displayPictureSectionDialog(): void {
+    this.#publicationEditionService.displayPictureSectionDialog();
+  }
+
+  updateCursorPosition(event: KeyboardEvent | MouseEvent): void {
+    if (event.target) {
+      const textarea = event.target as HTMLTextAreaElement;
+
+      const positionStart = textarea.selectionStart;
+      const positionEnd = textarea.selectionEnd;
+
+      this.#publicationEditionService.editCursorPosition(positionStart, positionEnd);
     }
+  }
 
-    get categories$(): Observable<Category[]> {
-        return this.categoryService.categories$
-            .pipe(
-                map(categories =>
-                    categories.filter(category => category.subCategories.length == 0)
-                    .sort(this.byNameAscComparator())
-                )
-            );
-    }
-
-    private byNameAscComparator(): (categoryA: Category, categoryB: Category) => number {
-        return (categoryA, categoryB) => this.compareStrings(categoryA.name, categoryB.name);
-    }
-
-    private compareStrings(stringA: string, stringB: string): number {
-        if (stringA < stringB) {
-            return -1;
-        }
-        if (stringA > stringB) {
-            return 1;
-        }
-        return 0;
-    }
-
-    ngOnChanges(): void {
-        this.ngOnDestroy();
-
-        if (!this.publicationInEdition || this.publicationInEdition !== this.publication) {
-            this.publicationInEdition = this.publication;
-            this.publicationEditionService.init(this.publicationInEdition);
-        }
-    }
-
-    ngOnDestroy(): void {
-        this.subscriptions.forEach(subscription => subscription?.unsubscribe());
-    }
-
-    goPreviousLocation(): void {
-        this.location.back();
-    }
-
-    insertTitle(titleNumber: number): void {
-        this.publicationEditionService.insertTitle(titleNumber);
-    }
-
-    selectAPicture(): void {
-        this.publicationEditionService.selectAPicture();
-    }
-
-    insertLink(): void {
-        this.publicationEditionService.insertLink();
-    }
-
-    displayCodeBlockDialog(): void {
-        this.publicationEditionService.displayCodeBlockDialog();
-    }
-
-    displayPictureSectionDialog(): void {
-        this.publicationEditionService.displayPictureSectionDialog();
-    }
-
-    updateCursorPosition(event: KeyboardEvent | MouseEvent): void {
-        if (event.target) {
-            const textarea = event.target as HTMLTextAreaElement;
-
-            const positionStart = textarea.selectionStart;
-            const positionEnd = textarea.selectionEnd;
-
-            this.publicationEditionService.editCursorPosition(positionStart, positionEnd);
-        }
-    }
-
-    save(): void {
-        this.publicationSave.emit(this.publicationEditionService.editedPublication);
-    }
-
-    onTabChange(tabSelectedIndex: number): void {
-        if (tabSelectedIndex === 1) {
-            this.publicationEditionService.loadPreview();
-        }
+  save(): void {
+    this.publicationSave.emit(this.#publicationEditionService.editedPublication);
+  }
+
+  onTabChange(tabSelectedIndex: number): void {
+    if (tabSelectedIndex === 1) {
+      this.#publicationEditionService.loadPreview();
     }
+  }
 }

frontend/src/app/components/publication-edition/publication-edition.service.ts

@@ -1,312 +1,287 @@
-import { Location } from "@angular/common";
-import { inject, Injectable, OnDestroy } from "@angular/core";
-import { MatDialog } from "@angular/material/dialog";
-import { MatSnackBar } from "@angular/material/snack-bar";
-import { ActivatedRoute } from "@angular/router";
-import { BehaviorSubject, debounceTime, distinctUntilChanged, Observable, Subscription } from "rxjs";
-import { Publication } from "../../core/rest-services/publications/model/publication";
-import { PublicationRestService } from "../../core/rest-services/publications/publication.rest-service";
-import { copy } from "../../core/utils/ObjectUtils";
-import { CodeBlockDialog } from "./code-block-dialog/code-block-dialog.component";
-import { PictureSelectionDialog } from "./picture-selection-dialog/picture-selection-dialog.component";
-import { PreviewContentRequest } from "../../core/rest-services/publications/model/preview";
-import { FormBuilder, FormControl, FormGroup, Validators } from "@angular/forms";
+import {Location} from "@angular/common";
+import {inject, Injectable, OnDestroy, Signal, signal} from "@angular/core";
+import {MatDialog} from "@angular/material/dialog";
+import {MatSnackBar} from "@angular/material/snack-bar";
+import {ActivatedRoute} from "@angular/router";
+import {debounceTime, distinctUntilChanged, Subscription} from "rxjs";
+import {DEFAULT_PUBLICATION, Publication} from "../../core/rest-services/publications/model/publication";
+import {PublicationRestService} from "../../core/rest-services/publications/publication.rest-service";
+import {copy} from "../../core/utils/ObjectUtils";
+import {CodeBlockDialog} from "./code-block-dialog/code-block-dialog.component";
+import {PictureSelectionDialog} from "./picture-selection-dialog/picture-selection-dialog.component";
+import {PreviewContentRequest} from "../../core/rest-services/publications/model/preview";
+import {FormBuilder, FormControl, FormGroup, Validators} from "@angular/forms";
 
 declare let Prism: any;
 
 export class CursorPosition {
-    start: number;
-    end: number;
-    selectedCharacters: number;
+  start: number;
+  end: number;
+  selectedCharacters: number;
 
-    constructor(start: number, end: number) {
-        this.start = start;
-        this.end = end;
-        this.selectedCharacters = end - start;
-    }
+  constructor(start: number, end: number) {
+    this.start = start;
+    this.end = end;
+    this.selectedCharacters = end - start;
+  }
 }
 
 export interface PublicationEditionState {
-    publication: Publication;
-    cursorPosition: CursorPosition;
+  publication: Publication;
+  cursorPosition: CursorPosition;
 }
 
-const DEFAULT_PUBLICATION: Publication = {
-    id: '',
-    key: '',
-    title: '',
-    text: '',
-    parsedText: '',
-    description: '',
-    creationDate: new Date(),
-    illustrationId: '',
-    categoryId: '',
-    author: {
-        id: '',
-        name: '',
-        image: ''
-    }
-};
-
 const DEFAULT_CURSOR_POSITION = new CursorPosition(0, 0);
 
 const DEFAULT_STATE: PublicationEditionState = {
-    publication: DEFAULT_PUBLICATION,
-    cursorPosition: DEFAULT_CURSOR_POSITION
+  publication: DEFAULT_PUBLICATION,
+  cursorPosition: DEFAULT_CURSOR_POSITION
 };
 
 @Injectable()
 export class PublicationEditionService implements OnDestroy {
-    private readonly activatedRoute = inject(ActivatedRoute);
-    private readonly dialog = inject(MatDialog);
-    private readonly formBuilder = inject(FormBuilder);
-    private readonly location = inject(Location);
-    private readonly publicationRestService = inject(PublicationRestService);
-    private readonly snackBar = inject(MatSnackBar);
+  readonly #activatedRoute = inject(ActivatedRoute);
+  readonly #dialog = inject(MatDialog);
+  readonly #formBuilder = inject(FormBuilder);
+  readonly #location = inject(Location);
+  readonly #publicationRestService = inject(PublicationRestService);
+  readonly #snackBar = inject(MatSnackBar);
 
-    private isLoadingSubject = new BehaviorSubject<boolean>(false);
-    private stateSubject = new BehaviorSubject<PublicationEditionState>(copy(DEFAULT_STATE));
-    private subscriptions: Subscription[] = [];
-    private isSavingSubject = new BehaviorSubject<boolean>(false);
-    private isPreviewingSubject = new BehaviorSubject<boolean>(false);
+  #isLoading = signal(false);
+  #state = signal<PublicationEditionState>(copy(DEFAULT_STATE));
+  #isSaving = signal<boolean>(false);
+  #isPreviewing = signal<boolean>(false);
+  #subscriptions: Subscription[] = [];
 
-    publicationEditionForm: FormGroup = this.formBuilder.group({
-        title: new FormControl<string | undefined>('', [Validators.required]),
-        description: new FormControl<string | undefined>('', [Validators.required]),
-        text: new FormControl<string | undefined>('', [Validators.required]),
-        illustrationId: new FormControl<string | undefined>('', [Validators.required]),
-        categoryId: new FormControl<string | undefined>('', [Validators.required])
+  publicationEditionForm: FormGroup = this.#formBuilder.group({
+    title: new FormControl<string | undefined>('', [Validators.required]),
+    description: new FormControl<string | undefined>('', [Validators.required]),
+    text: new FormControl<string | undefined>('', [Validators.required]),
+    illustrationId: new FormControl<string | undefined>('', [Validators.required]),
+    categoryId: new FormControl<string | undefined>('', [Validators.required])
+  });
+
+  ngOnDestroy(): void {
+    this.#subscriptions.forEach(subscription => subscription.unsubscribe());
+  }
+
+  #updateForm(): void {
+    const state = this.#state();
+    const publication = state.publication;
+
+    this.publicationEditionForm.controls['title'].setValue(publication.title);
+    this.publicationEditionForm.controls['description'].setValue(publication.description);
+    this.publicationEditionForm.controls['text'].setValue(publication.text);
+    this.publicationEditionForm.controls['illustrationId'].setValue(publication.illustrationId);
+    this.publicationEditionForm.controls['categoryId'].setValue(publication.categoryId);
+  }
+
+  get isLoading(): Signal<boolean> {
+    return this.#isLoading.asReadonly();
+  }
+
+  get isSaving(): Signal<boolean> {
+    return this.#isSaving.asReadonly();
+  }
+
+  get isPreviewing(): Signal<boolean> {
+    return this.#isPreviewing.asReadonly();
+  }
+
+  get state(): Signal<PublicationEditionState> {
+    return this.#state.asReadonly();
+  }
+
+  get editedPublication(): Publication {
+    return this.#state().publication;
+  }
+
+  loadPublication(): void {
+    this.#isLoading.set(true);
+
+    this.#activatedRoute.paramMap.subscribe(params => {
+      const publicationId = params.get('publicationId');
+      if (publicationId == undefined) {
+        this.#snackBar.open($localize`A technical error occurred while loading publication data.`, $localize`Close`, {duration: 5000});
+        this.#location.back();
+      } else {
+        this.#publicationRestService.getById(publicationId)
+          .then(publication => {
+            const state = this.#state();
+            state.publication = publication;
+            this.#state.set(state);
+          })
+          .catch(error => {
+            const errorMessage = $localize`A technical error occurred while loading publication data.`;
+            this.#snackBar.open(errorMessage, $localize`Close`, {duration: 5000});
+            console.error(errorMessage, error)
+          })
+          .finally(() => this.#isLoading.set(false));
+      }
     });
+  }
 
-    ngOnDestroy(): void {
-        this.subscriptions.forEach(subscription => subscription.unsubscribe());
-    }
+  init(publication: Publication): void {
+    const state = this.#state();
+    state.publication = publication;
+    this.#state.set(state);
+    this.#updateForm();
 
-    private get _state(): PublicationEditionState {
-        return this.stateSubject.value;
-    }
-
-    private _save(state: PublicationEditionState): void {
-        this.stateSubject.next(state);
-    }
-
-    private _updateForm(): void {
-        const state = this._state;
+    const formValueChangesSubscription = this.publicationEditionForm.valueChanges
+      .pipe(
+        debounceTime(200),
+        distinctUntilChanged()
+      )
+      .subscribe(formValue => {
+        const state = this.#state();
         const publication = state.publication;
 
-        this.publicationEditionForm.controls['title'].setValue(publication.title);
-        this.publicationEditionForm.controls['description'].setValue(publication.description);
-        this.publicationEditionForm.controls['text'].setValue(publication.text);
-        this.publicationEditionForm.controls['illustrationId'].setValue(publication.illustrationId);
-        this.publicationEditionForm.controls['categoryId'].setValue(publication.categoryId);
-    }
+        publication.title = formValue.title;
+        publication.description = formValue.description;
+        publication.categoryId = formValue.categoryId;
+        publication.text = formValue.text;
 
-    get isLoading$(): Observable<boolean> {
-        return this.isLoadingSubject.asObservable();
-    }
+        this.#state.set(state);
+      });
+    this.#subscriptions.push(formValueChangesSubscription);
+  }
 
-    get isSaving$(): Observable<boolean> {
-        return this.isSavingSubject.asObservable();
-    }
+  private editIllustrationId(pictureId: string): void {
+    const state = this.#state();
+    state.publication.illustrationId = pictureId
+    this.#state.set(state);
+  }
 
-    get isPreviewing$(): Observable<boolean> {
-        return this.isPreviewingSubject.asObservable();
-    }
+  displayPictureSectionDialog(): void {
+    const dialogRef = this.#dialog.open(PictureSelectionDialog);
 
-    get state$(): Observable<PublicationEditionState> {
-        return this.stateSubject.asObservable();
-    }
-
-    get editedPublication(): Publication {
-        return this._state.publication;
-    }
-
-    loadPublication(): void {
-        this.isLoadingSubject.next(true);
-        
-        this.activatedRoute.paramMap.subscribe(params => {
-            const publicationId = params.get('publicationId');
-            if (publicationId == undefined) {
-                this.snackBar.open($localize`A technical error occurred while loading publication data.`, $localize`Close`, { duration: 5000 });
-                this.location.back();
-            } else {
-                this.publicationRestService.getById(publicationId)
-                    .then(publication => {
-                        const state = this._state;
-                        state.publication = publication;
-                        this.stateSubject.next(state);
-                    })
-                    .catch(error => {
-                        const errorMessage = $localize`A technical error occurred while loading publication data.`;
-                        this.snackBar.open(errorMessage, $localize`Close`, {duration: 5000});
-                        console.error(errorMessage, error)
-                    })
-                    .finally(() => this.isLoadingSubject.next(false));
-            }
-        });
-    }
-
-    init(publication: Publication): void {
-        const state = this._state;
-        state.publication = publication;
-        this.stateSubject.next(state);
-        this._updateForm();
-
-        const formValueChangesSubscription = this.publicationEditionForm.valueChanges
-            .pipe(
-                debounceTime(200),
-                distinctUntilChanged()
-            )
-            .subscribe(formValue => {
-                const state = this._state;
-                const publication = state.publication;
-
-                publication.title = formValue.title;
-                publication.description = formValue.description;
-                publication.categoryId = formValue.categoryId;
-                publication.text = formValue.text;
-
-                this._save(state);
-            })
-        this.subscriptions.push(formValueChangesSubscription);
-    }
-
-    private editIllustrationId(pictureId: string): void {
-        const state = this._state;
-        state.publication.illustrationId = pictureId
-        this._save(state);
-    }
-
-    displayPictureSectionDialog(): void {
-        const dialogRef = this.dialog.open(PictureSelectionDialog);
-
-        const afterDialogCloseSubscription = dialogRef.afterClosed()
-            .subscribe(newPictureId => {
-                if (newPictureId) {
-                    this.editIllustrationId(newPictureId);
-                }
-            });
-        this.subscriptions.push(afterDialogCloseSubscription);
-    }
-
-    displayCodeBlockDialog(): void {
-        const dialogRef = this.dialog.open(CodeBlockDialog, { width: '60em' });
-
-        const afterDialogCloseSubscription = dialogRef.afterClosed()
-            .subscribe(codeBlockWithLanguage => {
-                if (codeBlockWithLanguage) {
-                    this.insertCodeBlock(codeBlockWithLanguage.programmingLanguage, codeBlockWithLanguage.codeBlock);
-                }
-            });
-        this.subscriptions.push(afterDialogCloseSubscription);
-    }
-
-    editCursorPosition(positionStart: number, positionEnd: number): void {
-        const state = this._state;
-
-        state.cursorPosition.start = positionStart;
-        state.cursorPosition.end = positionEnd;
-
-        this._save(state);
-    }
-
-    insertTitle(titleNumber: number): void {
-        if (titleNumber >= 1 && titleNumber <= 3) {
-            const state = this._state;
-
-            const publication = state.publication;
-
-            const publicationTextLeftPart = publication.text.substring(0, state.cursorPosition.start);
-            const publicationTextMiddlePart = publication.text.substring(state.cursorPosition.start, state.cursorPosition.end);
-            const publicationTextRightPart = publication.text.substring(state.cursorPosition.end);
-            const textWithTags = `${publicationTextLeftPart}[h${titleNumber}]${publicationTextMiddlePart}[/h${titleNumber}]${publicationTextRightPart}`;
-
-            publication.text = textWithTags;
-
-            this._save(state);
-            this._updateForm();
-        } else {
-            console.error(`Bad value for parameter of function 'insertTitle': '${titleNumber}'.`);
+    const afterDialogCloseSubscription = dialogRef.afterClosed()
+      .subscribe(newPictureId => {
+        if (newPictureId) {
+          this.editIllustrationId(newPictureId);
         }
+      });
+    this.#subscriptions.push(afterDialogCloseSubscription);
+  }
+
+  displayCodeBlockDialog(): void {
+    const dialogRef = this.#dialog.open(CodeBlockDialog, {width: '60em'});
+
+    const afterDialogCloseSubscription = dialogRef.afterClosed()
+      .subscribe(codeBlockWithLanguage => {
+        if (codeBlockWithLanguage) {
+          this.insertCodeBlock(codeBlockWithLanguage.programmingLanguage, codeBlockWithLanguage.codeBlock);
+        }
+      });
+    this.#subscriptions.push(afterDialogCloseSubscription);
+  }
+
+  editCursorPosition(positionStart: number, positionEnd: number): void {
+    const state = this.#state();
+
+    state.cursorPosition.start = positionStart;
+    state.cursorPosition.end = positionEnd;
+
+    this.#state.set(state);
+  }
+
+  insertTitle(titleNumber: number): void {
+    if (titleNumber >= 1 && titleNumber <= 3) {
+      const state = this.#state();
+
+      const publication = state.publication;
+
+      const publicationTextLeftPart = publication.text.substring(0, state.cursorPosition.start);
+      const publicationTextMiddlePart = publication.text.substring(state.cursorPosition.start, state.cursorPosition.end);
+      const publicationTextRightPart = publication.text.substring(state.cursorPosition.end);
+      const textWithTags = `${publicationTextLeftPart}[h${titleNumber}]${publicationTextMiddlePart}[/h${titleNumber}]${publicationTextRightPart}`;
+
+      publication.text = textWithTags;
+
+      this.#state.set(state);
+      this.#updateForm();
+    } else {
+      console.error(`Bad value for parameter of function 'insertTitle': '${titleNumber}'.`);
     }
+  }
 
-    selectAPicture(): void {
-        const dialogRef = this.dialog.open(PictureSelectionDialog);
+  selectAPicture(): void {
+    const dialogRef = this.#dialog.open(PictureSelectionDialog);
 
-        const afterDialogCloseSubscription = dialogRef.afterClosed()
-            .subscribe(newPictureId => {
-                if (newPictureId) {
-                    this.insertPicture(newPictureId);
-                }
-            });
-        this.subscriptions.push(afterDialogCloseSubscription);
-    }
+    const afterDialogCloseSubscription = dialogRef.afterClosed()
+      .subscribe(newPictureId => {
+        if (newPictureId) {
+          this.insertPicture(newPictureId);
+        }
+      });
+    this.#subscriptions.push(afterDialogCloseSubscription);
+  }
 
-    insertPicture(pictureId: string): void {
-        const state = this._state;
+  insertPicture(pictureId: string): void {
+    const state = this.#state();
 
-        const publication = state.publication;
+    const publication = state.publication;
 
-        const publicationTextLeftPart = publication.text.substring(0, state.cursorPosition.start);
-        const publicationTextRightPart = publication.text.substring(state.cursorPosition.start);
-        const textWithTags = `${publicationTextLeftPart}[img src="/api/pictures/${pictureId}" /]${publicationTextRightPart}`;
+    const publicationTextLeftPart = publication.text.substring(0, state.cursorPosition.start);
+    const publicationTextRightPart = publication.text.substring(state.cursorPosition.start);
+    const textWithTags = `${publicationTextLeftPart}[img src="/api/pictures/${pictureId}" /]${publicationTextRightPart}`;
 
-        publication.text = textWithTags;
+    publication.text = textWithTags;
 
-        this._save(state);
-        this._updateForm();
-    }
+    this.#state.set(state);
+    this.#updateForm();
+  }
 
-    insertLink(): void {
-        const state = this._state;
+  insertLink(): void {
+    const state = this.#state();
 
-        const publication = state.publication;
+    const publication = state.publication;
 
-        const publicationTextLeftPart = publication.text.substring(0, state.cursorPosition.start);
-        const publicationTextMiddlePart = publication.text.substring(state.cursorPosition.start, state.cursorPosition.end);
-        const publicationTextRightPart = publication.text.substring(state.cursorPosition.end);
-        const textWithTags = `${publicationTextLeftPart}[link href="" txt="${publicationTextMiddlePart}" /]${publicationTextRightPart}`;
+    const publicationTextLeftPart = publication.text.substring(0, state.cursorPosition.start);
+    const publicationTextMiddlePart = publication.text.substring(state.cursorPosition.start, state.cursorPosition.end);
+    const publicationTextRightPart = publication.text.substring(state.cursorPosition.end);
+    const textWithTags = `${publicationTextLeftPart}[link href="" txt="${publicationTextMiddlePart}" /]${publicationTextRightPart}`;
 
-        publication.text = textWithTags;
+    publication.text = textWithTags;
 
-        this._save(state);
-        this._updateForm();
-    }
+    this.#state.set(state);
+    this.#updateForm();
+  }
 
-    private insertCodeBlock(programmingLanguage: string, codeBlock: string): void {
-        const state = this._state;
+  private insertCodeBlock(programmingLanguage: string, codeBlock: string): void {
+    const state = this.#state();
 
-        const publication = state.publication;
+    const publication = state.publication;
 
-        const publicationTextLeftPart = publication.text.substring(0, state.cursorPosition.start);
-        const publicationTextRightPart = publication.text.substring(state.cursorPosition.start);
-        const codeBlockInstruction = `\n[code lg="${programmingLanguage}"]\n${codeBlock}\n[/code]\n\n`;
-        const textWithTags = `${publicationTextLeftPart}${codeBlockInstruction}${publicationTextRightPart}`;
+    const publicationTextLeftPart = publication.text.substring(0, state.cursorPosition.start);
+    const publicationTextRightPart = publication.text.substring(state.cursorPosition.start);
+    const codeBlockInstruction = `\n[code lg="${programmingLanguage}"]\n${codeBlock}\n[/code]\n\n`;
+    const textWithTags = `${publicationTextLeftPart}${codeBlockInstruction}${publicationTextRightPart}`;
 
-        publication.text = textWithTags;
+    publication.text = textWithTags;
 
-        this._save(state);
-        this._updateForm();
-    }
+    this.#state.set(state);
+    this.#updateForm();
+  }
 
-    loadPreview(): void {
-        const state = this._state;
+  loadPreview(): void {
+    const state = this.#state();
 
-        this.isPreviewingSubject.next(true);
-        const request: PreviewContentRequest = {
-            text: state.publication.text
-        };
-        this.publicationRestService.preview(request)
-            .then(response => {
-                state.publication.parsedText = response.text;
-                this._save(state);
-                setTimeout(() => Prism.highlightAll(), 1000);
-            })
-            .catch(error => {
-                console.error(error);
-            })
-            .finally(() => {
-                this.isPreviewingSubject.next(false);
-            });
-    }
-}
+    this.#isPreviewing.set(true);
+    const request: PreviewContentRequest = {
+      text: state.publication.text
+    };
+    this.#publicationRestService.preview(request)
+      .then(response => {
+        state.publication.parsedText = response.text;
+        this.#state.set(state);
+        setTimeout(() => Prism.highlightAll(), 1000);
+      })
+      .catch(error => {
+        console.error(error);
+      })
+      .finally(() => {
+        this.#isPreviewing.set(false);
+      });
+  }
+}

frontend/src/app/components/publication-list/publication-list.component.html

@@ -1,16 +1,16 @@
-@for(publication of publications$ | async; track publication) {
-    <a [routerLink]="['/publications/' + publication.id]" class="publication">
-        <img src="/api/pictures/{{ publication.illustrationId }}"/>
-        <div class="body">
-            <h1>{{publication.title}}</h1>
-            <h2>{{publication.description}}</h2>
-        </div>
-        <div class="footer">
-            <img src="/api/pictures/{{ publication.author.image }}" [matTooltip]="publication.author.name"/>
-            <span i18n>Publication posted by {{publication.author.name}}</span>
-            <span class="publication-date">
+@for (publication of publications(); track publication.id) {
+  <a [routerLink]="['/publications/' + publication.id]" class="publication">
+    <img src="/api/pictures/{{ publication.illustrationId }}"/>
+    <div class="body">
+      <h1>{{ publication.title }}</h1>
+      <h2>{{ publication.description }}</h2>
+    </div>
+    <div class="footer">
+      <img src="/api/pictures/{{ publication.author.image }}" [matTooltip]="publication.author.name"/>
+      <span i18n>Publication posted by {{ publication.author.name }}</span>
+      <span class="publication-date">
                 ({{ publication.creationDate | date: 'short' }})
             </span>
-        </div>
-    </a>
-}
+    </div>
+  </a>
+}

frontend/src/app/components/publication-list/publication-list.component.scss

@@ -1,87 +1,87 @@
 $cardBorderRadius: .5em;
 
 :host {
+  display: flex;
+  flex-direction: column;
+  gap: 2em;
+  max-width: 50em;
+  width: 90%;
+  margin: auto;
+
+  .publication {
     display: flex;
     flex-direction: column;
-    gap: 2em;
-    max-width: 50em;
-    width: 90%;
-    margin: auto;
+    border-radius: $cardBorderRadius;
+    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
+    transition: box-shadow .2s ease-in-out;
+    text-decoration: none;
+    color: black;
+    background-color: #ffffff;
 
-    .publication {
-        display: flex;
-        flex-direction: column;
-        border-radius: $cardBorderRadius;
-        box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
-        transition: box-shadow .2s ease-in-out;
-        text-decoration: none;
-        color: black;
-        background-color: #ffffff;
-        
-        &:hover {
-            box-shadow: 0 4px 8px 0 rgba(0,0,0,.24),0 4px 14px 0 rgba(0,0,0,.16);
-        }
-
-        img {
-            object-fit: cover;
-            height: 15em;
-            border-radius: $cardBorderRadius $cardBorderRadius 0 0;
-            transition: height .2s ease-in-out;
-
-            @media screen and (min-width: 450px) {
-                height: 20em;
-            }
-
-            @media screen and (min-width: 600px) {
-                height: 25em;
-            }
-
-            @media screen and (min-width: 750px) {
-                height: 32em;
-            }
-        }
-        
-        .body {
-            display: flex;
-            flex-direction: column;
-            padding: 1.5em 2em;
-
-            h1 {
-                font-size: 1.8em;
-                margin-bottom: .5em;
-            }
-
-            h2 {
-                font-size: 1em;
-                line-height: 1.4em;
-                margin: 0;
-                color: #747373;
-                font-weight: 400;
-            }
-        }
-
-        .footer {
-            display: flex;
-            flex-direction: row;
-            align-items: center;
-            background-color: #f0f0f0;
-            border-radius: 0 0 $cardBorderRadius $cardBorderRadius;
-            padding: 1em 2em;
-            gap: 1em;
-            color: #6c757d;
-
-            img {
-                $imageSize: 4em;
-                border-radius: 10em;
-                width: $imageSize;
-                height: $imageSize;
-                object-fit: cover;
-            }
-
-            .publication-date {
-                font-style: italic;
-                color: #bdbdbd;
-            }
-        }
+    &:hover {
+      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .24), 0 4px 14px 0 rgba(0, 0, 0, .16);
     }
-}
+
+    img {
+      object-fit: cover;
+      height: 15em;
+      border-radius: $cardBorderRadius $cardBorderRadius 0 0;
+      transition: height .2s ease-in-out;
+
+      @media screen and (min-width: 450px) {
+        height: 20em;
+      }
+
+      @media screen and (min-width: 600px) {
+        height: 25em;
+      }
+
+      @media screen and (min-width: 750px) {
+        height: 32em;
+      }
+    }
+
+    .body {
+      display: flex;
+      flex-direction: column;
+      padding: 1.5em 2em;
+
+      h1 {
+        font-size: 1.8em;
+        margin-bottom: .5em;
+      }
+
+      h2 {
+        font-size: 1em;
+        line-height: 1.4em;
+        margin: 0;
+        color: #747373;
+        font-weight: 400;
+      }
+    }
+
+    .footer {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      background-color: #f0f0f0;
+      border-radius: 0 0 $cardBorderRadius $cardBorderRadius;
+      padding: 1em 2em;
+      gap: 1em;
+      color: #6c757d;
+
+      img {
+        $imageSize: 4em;
+        border-radius: 10em;
+        width: $imageSize;
+        height: $imageSize;
+        object-fit: cover;
+      }
+
+      .publication-date {
+        font-style: italic;
+        color: #bdbdbd;
+      }
+    }
+  }
+}

frontend/src/app/components/publication-list/publication-list.component.ts

@@ -1,17 +1,15 @@
-import { Component, Input } from "@angular/core";
-import { Publication } from "../../core/rest-services/publications/model/publication";
-import { Observable } from "rxjs";
-import { CommonModule } from "@angular/common";
-import { RouterModule } from "@angular/router";
-import { MatTooltipModule } from "@angular/material/tooltip";
+import {Component, input} from "@angular/core";
+import {Publication} from "../../core/rest-services/publications/model/publication";
+import {CommonModule} from "@angular/common";
+import {RouterModule} from "@angular/router";
+import {MatTooltipModule} from "@angular/material/tooltip";
 
 @Component({
-    selector: 'app-publication-list',
-    templateUrl: './publication-list.component.html',
-    styleUrl: './publication-list.component.scss',
-    imports: [CommonModule, RouterModule, MatTooltipModule]
+  selector: 'app-publication-list',
+  templateUrl: './publication-list.component.html',
+  styleUrl: './publication-list.component.scss',
+  imports: [CommonModule, RouterModule, MatTooltipModule]
 })
 export class PublicationListComponent {
-    @Input()
-    publications$!: Observable<Publication[]>;
-}
+  publications = input.required<Publication[]>();
+}

frontend/src/app/components/publications-search-bar/publications-search-bar.component.html

@@ -1,6 +1,6 @@
 <form [formGroup]="formGroup">
-    <input name="search-query" placeholder="Search something..." formControlName="criteria" i18n-placeholder/>
-    <button type="submit" (click)="searchPublications()" matRipple>
-        <mat-icon>search</mat-icon>
-    </button>
-</form>
+  <input name="search-query" placeholder="Search something..." formControlName="criteria" i18n-placeholder/>
+  <button type="submit" (click)="searchPublications()" matRipple>
+    <mat-icon>search</mat-icon>
+  </button>
+</form>

frontend/src/app/components/publications-search-bar/publications-search-bar.component.scss

@@ -1,38 +1,38 @@
 :host {
-    $borderRadiusValue: 10em;
-    position: relative;
-    flex-direction: row;
-    align-items: center;
+  $borderRadiusValue: 10em;
+  position: relative;
+  flex-direction: row;
+  align-items: center;
 
-    form {
-        display: flex;
+  form {
+    display: flex;
 
-        input {
-            flex: 1;
-            border-radius: $borderRadiusValue;
-            background-color: white;
-            border: solid 1px #ddd;
-            padding: .2em 2.7em .2em 1em;
-            height: 2em;
-            width: 100%;
-        }
-    
-        button {
-            position: absolute;
-            display: flex;
-            align-items: center;
-            border-radius: $borderRadiusValue;
-            background-color: white;
-            border: none;
-            top: 0;
-            right: 0;
-            color: #aaaaaa;
-            padding: .3em;
-    
-            &:hover {
-                background-color: #eee;
-                cursor: pointer;
-            }
-        }
+    input {
+      flex: 1;
+      border-radius: $borderRadiusValue;
+      background-color: white;
+      border: solid 1px #ddd;
+      padding: .2em 2.7em .2em 1em;
+      height: 2em;
+      width: 100%;
     }
-}
+
+    button {
+      position: absolute;
+      display: flex;
+      align-items: center;
+      border-radius: $borderRadiusValue;
+      background-color: white;
+      border: none;
+      top: 0;
+      right: 0;
+      color: #aaaaaa;
+      padding: .3em;
+
+      &:hover {
+        background-color: #eee;
+        cursor: pointer;
+      }
+    }
+  }
+}

frontend/src/app/components/publications-search-bar/publications-search-bar.component.ts

@@ -1,36 +1,36 @@
-import { Component, inject } from "@angular/core";
-import { FormBuilder, FormControl, ReactiveFormsModule, Validators } from "@angular/forms";
-import { MatRippleModule } from "@angular/material/core";
-import { MatIconModule } from "@angular/material/icon";
-import { Router } from "@angular/router";
+import {Component, inject} from "@angular/core";
+import {FormBuilder, FormControl, ReactiveFormsModule, Validators} from "@angular/forms";
+import {MatRippleModule} from "@angular/material/core";
+import {MatIconModule} from "@angular/material/icon";
+import {Router} from "@angular/router";
 
 
 @Component({
-    selector: 'app-publications-search-bar',
-    templateUrl: './publications-search-bar.component.html',
-    styleUrl: './publications-search-bar.component.scss',
-    imports: [
-        MatIconModule,
-        MatRippleModule,
-        ReactiveFormsModule
-    ],
-    providers: []
+  selector: 'app-publications-search-bar',
+  templateUrl: './publications-search-bar.component.html',
+  styleUrl: './publications-search-bar.component.scss',
+  imports: [
+    MatIconModule,
+    MatRippleModule,
+    ReactiveFormsModule
+  ],
+  providers: []
 })
 export class PublicationsSearchBarComponent {
-    private formBuilder = inject(FormBuilder);
-    private router = inject(Router);
-    formGroup = this.formBuilder.group({
-        criteria: new FormControl<string | undefined>('', [Validators.required])
-    });
+  private formBuilder = inject(FormBuilder);
+  private router = inject(Router);
+  formGroup = this.formBuilder.group({
+    criteria: new FormControl<string | undefined>('', [Validators.required])
+  });
 
-    searchPublications(): void {
-        const query = this.formGroup.controls.criteria.value
+  searchPublications(): void {
+    const query = this.formGroup.controls.criteria.value
 
-        if (query?.trim()) {
-            const queryParams = { 'query' : this.formGroup.controls.criteria.value ?? '' }
-            this.router.navigate(['/publications'], { queryParams });
-        } else {
-            this.router.navigate(['/home']);
-        }
+    if (query?.trim()) {
+      const queryParams = {'query': this.formGroup.controls.criteria.value ?? ''}
+      this.router.navigate(['/publications'], {queryParams});
+    } else {
+      this.router.navigate(['/home']);
     }
-}
+  }
+}

frontend/src/app/components/side-menu/categories-menu/categories-menu.component.html

@@ -1,18 +1,18 @@
-@for(category of categories$ | async; track category) {
-    <div class="category {{category.isOpenned ? 'openned' : ''}}">
-        <div id="category-{{category.id}}" class="category-header" (click)="setOpenned(category)">
-            {{category.name}}
-            <mat-icon>chevron_right</mat-icon>
-        </div>
-        <div class="sub-category-container {{category.isOpenned ? 'displayed' : ''}}">
-            @for(subCategory of category.subCategories; track subCategory) {
-                <a [routerLink]="['/publications']"
-                        [queryParams]="{'category-id': subCategory.id}"
-                        (click)="categoryClicked.emit()"
-                        class="sub-category">
-                    {{subCategory.name}}
-                </a>
-            }
-        </div>
+@for (category of categories$ | async; track category) {
+  <div class="category {{category.isOpenned ? 'openned' : ''}}">
+    <div id="category-{{category.id}}" class="category-header" (click)="setOpenned(category)">
+      {{ category.name }}
+      <mat-icon>chevron_right</mat-icon>
     </div>
-}
+    <div class="sub-category-container {{category.isOpenned ? 'displayed' : ''}}">
+      @for (subCategory of category.subCategories; track subCategory) {
+        <a [routerLink]="['/publications']"
+           [queryParams]="{'category-id': subCategory.id}"
+           (click)="categoryClicked.emit()"
+           class="sub-category">
+          {{ subCategory.name }}
+        </a>
+      }
+    </div>
+  </div>
+}

frontend/src/app/components/side-menu/categories-menu/categories-menu.component.scss

@@ -1,57 +1,57 @@
 :host {
-    display: flex;
-    flex-direction: column;
+  display: flex;
+  flex-direction: column;
 
-    .category {
+  .category {
+    transition: background-color .2s ease-in-out;
+
+    &:hover {
+      cursor: pointer;
+      background-color: #5c6bc0;
+    }
+
+    .category-header {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      padding: .5em 1em;
+
+      mat-icon {
+        transition: transform .2s ease-in-out;
+      }
+    }
+
+    &.openned {
+      .category-header {
+        mat-icon {
+          transform: rotate(90deg);
+        }
+      }
+
+      .sub-category-container {
+        max-height: none;
+      }
+    }
+
+    .sub-category-container {
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      max-height: 0;
+      transition: max-height .2s ease-in-out;
+      background-color: #303f9f;
+
+      .sub-category {
+        padding: .5em 1em .5em 2em;
+        text-decoration: none;
+        color: inherit;
         transition: background-color .2s ease-in-out;
 
         &:hover {
-            cursor: pointer;
-            background-color: #5c6bc0;
-        }
-
-        .category-header {
-            display: flex;
-            flex-direction: row;
-            justify-content: space-between;
-            align-items: center;
-            padding: .5em 1em;
-
-            mat-icon {
-                transition: transform .2s ease-in-out;
-            }
-        }
-
-        &.openned {
-            .category-header {
-                mat-icon {
-                    transform: rotate(90deg);
-                }
-            }
-
-            .sub-category-container {
-                max-height: none;
-            }
-        }
-
-        .sub-category-container {
-            display: flex;
-            flex-direction: column;
-            overflow: hidden;
-            max-height: 0;
-            transition: max-height .2s ease-in-out;
-            background-color: #303f9f;
-
-            .sub-category {
-                padding: .5em 1em .5em 2em;
-                text-decoration: none;
-                color: inherit;
-                transition: background-color .2s ease-in-out;
-                
-                &:hover {
-                    background-color: #5c6bc0;
-                }
-            }
+          background-color: #5c6bc0;
         }
+      }
     }
+  }
 }

frontend/src/app/components/side-menu/categories-menu/categories-menu.component.ts

@@ -1,19 +1,19 @@
-import { CommonModule } from "@angular/common";
-import { Component, EventEmitter, inject, OnInit, Output } from "@angular/core";
-import { MatIconModule } from "@angular/material/icon";
-import { DisplayableCategory, SideMenuService } from "../side-menu.service";
-import { Observable } from "rxjs";
-import { RouterModule } from "@angular/router";
+import {CommonModule} from "@angular/common";
+import {Component, EventEmitter, inject, OnInit, Output} from "@angular/core";
+import {MatIconModule} from "@angular/material/icon";
+import {DisplayableCategory, SideMenuService} from "../side-menu.service";
+import {Observable} from "rxjs";
+import {RouterModule} from "@angular/router";
 
 @Component({
-    selector: 'app-categories-menu',
-    templateUrl: './categories-menu.component.html',
-    imports: [
-        CommonModule,
-        RouterModule,
-        MatIconModule
-    ],
-    styleUrl: './categories-menu.component.scss'
+  selector: 'app-categories-menu',
+  templateUrl: './categories-menu.component.html',
+  imports: [
+    CommonModule,
+    RouterModule,
+    MatIconModule
+  ],
+  styleUrl: './categories-menu.component.scss'
 })
 export class CategoriesMenuComponent implements OnInit {
   private sideMenuService = inject(SideMenuService);
@@ -37,10 +37,10 @@ export class CategoriesMenuComponent implements OnInit {
     } else {
       const categoriesDivs = document.getElementsByClassName('category-header');
       Array.from(categoriesDivs)
-        .map(category => category as HTMLElement)  
+        .map(category => category as HTMLElement)
         .forEach(categoryDiv => this.closeAccordion(categoryDiv));
-      
-        const categoryDiv = document.getElementById(`category-${category.id}`);
+
+      const categoryDiv = document.getElementById(`category-${category.id}`);
       if (categoryDiv) {
         this.openAccordion(categoryDiv);
       }
@@ -58,4 +58,4 @@ export class CategoriesMenuComponent implements OnInit {
     const divContent = categoryDiv?.nextElementSibling as HTMLElement;
     divContent.style.maxHeight = `${divContent.scrollHeight}px`;
   }
-}
+}

frontend/src/app/components/side-menu/side-menu.component.html

@@ -1,19 +1,19 @@
-<div class="menu {{ isOpenned ? 'displayed' : '' }}">
-    <h1>
-        <a [routerLink]="['/home']">
-            <img src="assets/images/codiki.png" alt="logo"/>
-            Codiki
-        </a>
-        <button type="button"
-                (click)="close()"
-                class="cod-button icon"
-                matTooltip="Close the menu"
-                matRipple
-                i18n-matTooltip>
-            <mat-icon>close</mat-icon>
-        </button>
-    </h1>
-    <h2 i18n>Categories</h2>
-    <app-categories-menu (categoryClicked)="close()"></app-categories-menu>
+<div class="menu {{ isOpened() ? 'displayed' : '' }}">
+  <h1>
+    <a [routerLink]="['/home']">
+      <img src="assets/images/codiki.png" alt="logo"/>
+      Codiki
+    </a>
+    <button type="button"
+            (click)="close()"
+            class="cod-button icon"
+            matTooltip="Close the menu"
+            matRipple
+            i18n-matTooltip>
+      <mat-icon>close</mat-icon>
+    </button>
+  </h1>
+  <h2 i18n>Categories</h2>
+  <app-categories-menu (categoryClicked)="close()"></app-categories-menu>
 </div>
-<div class="overlay {{ isOpenned ? 'displayed' : ''}}" (click)="close()"></div>
+<div class="overlay {{ isOpened() ? 'displayed' : ''}}" (click)="close()"></div>

frontend/src/app/components/side-menu/side-menu.component.scss

@@ -1,68 +1,68 @@
 :host {
-    .menu {
+  .menu {
+    display: flex;
+    flex-direction: column;
+    background-color: #3f51b5;
+    color: white;
+
+    $categoriesMenuWidth: 20em;
+    position: fixed;
+    top: 0;
+    left: -$categoriesMenuWidth - 1em - 1;
+    bottom: 0;
+    transition: left .2s ease-in-out;
+    width: $categoriesMenuWidth;
+    z-index: 3;
+    padding: 1em 0;
+
+    &.displayed {
+      left: 0;
+    }
+
+    h1 {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0 1em;
+
+      a {
         display: flex;
-        flex-direction: column;
-        background-color: #3f51b5;
+        flex-direction: row;
+        justify-content: start;
+        align-items: center;
+        gap: .5em;
         color: white;
+        text-decoration: none;
 
-        $categoriesMenuWidth: 20em;
-        position: fixed;
-        top: 0;
-        left: -$categoriesMenuWidth - 1em - 1;
-        bottom: 0;
-        transition: left .2s ease-in-out;
-        width: $categoriesMenuWidth;
-        z-index: 3;
-        padding: 1em 0;
-
-        &.displayed {
-            left: 0;
-        }
-
-        h1 {
-            display: flex;
-            flex-direction: row;
-            justify-content: space-between;
-            align-items: center;
-            padding: 0 1em;
-
-            a {
-                display: flex;
-                flex-direction: row;
-                justify-content: start;
-                align-items: center;
-                gap: .5em;
-                color: white;
-                text-decoration: none;
-
-                img {
-                    $imageSize: 1.2em;
-                    width: $imageSize;
-                    height: $imageSize;
-                }
-            }
-        }
-
-        h2 {
-            padding: 0 1em;
+        img {
+          $imageSize: 1.2em;
+          width: $imageSize;
+          height: $imageSize;
         }
+      }
     }
 
-    .overlay {
-        display: none;
-        position: fixed;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        width: 100%;
-        height: 100%;
-        background-color: #000;
-        opacity: .2;
-        z-index: 2;
-
-        &.displayed {
-            display: block;
-        }
+    h2 {
+      padding: 0 1em;
     }
+  }
+
+  .overlay {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    height: 100%;
+    background-color: #000;
+    opacity: .2;
+    z-index: 2;
+
+    &.displayed {
+      display: block;
+    }
+  }
 }

frontend/src/app/components/side-menu/side-menu.component.ts

@@ -1,30 +1,30 @@
-import { Component } from '@angular/core';
-import { MatIconModule } from '@angular/material/icon';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { RouterModule } from '@angular/router';
-import { CategoriesMenuComponent } from './categories-menu/categories-menu.component';
-import { MatRippleModule } from '@angular/material/core';
+import {Component, signal} from '@angular/core';
+import {MatIconModule} from '@angular/material/icon';
+import {MatTooltipModule} from '@angular/material/tooltip';
+import {RouterModule} from '@angular/router';
+import {CategoriesMenuComponent} from './categories-menu/categories-menu.component';
+import {MatRippleModule} from '@angular/material/core';
 
 @Component({
-    selector: 'app-side-menu',
-    templateUrl: './side-menu.component.html',
-    styleUrl: './side-menu.component.scss',
-    imports: [
-        CategoriesMenuComponent,
-        MatIconModule,
-        MatRippleModule,
-        MatTooltipModule,
-        RouterModule
-    ]
+  selector: 'app-side-menu',
+  templateUrl: './side-menu.component.html',
+  styleUrl: './side-menu.component.scss',
+  imports: [
+    CategoriesMenuComponent,
+    MatIconModule,
+    MatRippleModule,
+    MatTooltipModule,
+    RouterModule
+  ]
 })
 export class SideMenuComponent {
-  isOpenned: boolean = false;
+  isOpened = signal(false);
 
   open(): void {
-    this.isOpenned = true;
+    this.isOpened.set(true);
   }
 
   close(): void {
-    this.isOpenned = false;
+    this.isOpened.set(false);
   }
 }

frontend/src/app/components/side-menu/side-menu.service.ts

@@ -1,8 +1,8 @@
-import { Injectable, inject } from '@angular/core';
-import { MatSnackBar } from '@angular/material/snack-bar';
-import { BehaviorSubject, Observable } from 'rxjs';
-import { CategoryRestService } from '../../core/rest-services/category/category.rest-service';
-import { Category } from '../../core/rest-services/category/model/category';
+import {inject, Injectable} from '@angular/core';
+import {MatSnackBar} from '@angular/material/snack-bar';
+import {BehaviorSubject, Observable} from 'rxjs';
+import {CategoryRestService} from '../../core/rest-services/category/category.rest-service';
+import {Category} from '../../core/rest-services/category/model/category';
 
 export interface DisplayableCategory {
   id: string;
@@ -53,7 +53,7 @@ export class SideMenuService {
   get categories$(): Observable<DisplayableCategory[]> {
     return this.categoriesSubject.asObservable();
   }
-  
+
   get isLoading$(): Observable<boolean> {
     return this.isLoadingSubject.asObservable();
   }
@@ -72,7 +72,7 @@ export class SideMenuService {
       .catch(error => {
         const errorMessage = $localize`An error occured while loading categories.`;
         console.error(errorMessage, error);
-        this.snackBar.open(errorMessage, $localize`Close`, { duration: 5000 });
+        this.snackBar.open(errorMessage, $localize`Close`, {duration: 5000});
       })
       .finally(() => {
         this.isLoadingSubject.next(false);

frontend/src/app/components/submit-button/submit-button.component.html

@@ -1,12 +1,12 @@
 <button type="submit"
-        class="cod-button {{color}}"
-        [disabled]="disabled || requestPending"
+        class="cod-button {{color()}}"
+        [disabled]="disabled() || requestPending()"
         (click)="click.emit()"
         matRipple>
-    @if (requestPending) {
-        <mat-spinner class="spinner {{color}}" [diameter]="25"></mat-spinner>
-    }
-    <span>
+  @if (requestPending()) {
+    <mat-spinner class="spinner {{color()}}" [diameter]="25"></mat-spinner>
+  }
+  <span>
         <ng-content/>
     </span>
-</button>
+</button>

frontend/src/app/components/submit-button/submit-button.component.scss

@@ -1,43 +1,43 @@
 button {
-    padding: .8em 1.2em;
-    border-radius: 10em;
-    border: none;
-    background-color: #3f51b5;
-    color: white;
-    transition: background-color .2s ease-in-out;
-    position: relative;
+  padding: .8em 1.2em;
+  border-radius: 10em;
+  border: none;
+  background-color: #3f51b5;
+  color: white;
+  transition: background-color .2s ease-in-out;
+  position: relative;
+
+  &:hover {
+    background-color: #5b6ed8;
+    cursor: pointer;
+  }
+
+  &.secondary {
+    color: #3f51b5;
+    background-color: white;
 
     &:hover {
-        background-color: #5b6ed8;
-        cursor: pointer;
+      background-color: #f2f4ff;
+      cursor: pointer;
     }
+  }
 
-    &.secondary {
-        color: #3f51b5;
-        background-color: white;
+  &:disabled {
+    background-color: #6d7ac5;
+    cursor: not-allowed;
+  }
 
-        &:hover {
-            background-color: #f2f4ff;
-            cursor: pointer;
-        }
-    }
-
-    &:disabled {
-        background-color: #6d7ac5;
-        cursor: not-allowed;
-    }
-
-    mat-spinner {
-        position: absolute;
-        top: calc(50% - 12px);
-        left: calc(50% - 12px);
-    }
+  mat-spinner {
+    position: absolute;
+    top: calc(50% - 12px);
+    left: calc(50% - 12px);
+  }
 }
 
 :host ::ng-deep .spinner circle {
-    stroke: white;
+  stroke: white;
 }
 
 :host ::ng-deep .spinner.secondary circle {
-    stroke: #3f51b5;
-}
+  stroke: #3f51b5;
+}

frontend/src/app/components/submit-button/submit-button.component.ts

@@ -1,22 +1,20 @@
-
-import { Component, EventEmitter, Input, Output } from "@angular/core";
-import { MatRippleModule } from "@angular/material/core";
-import { MatProgressSpinnerModule } from "@angular/material/progress-spinner";
+import {Component, input, output} from "@angular/core";
+import {MatRippleModule} from "@angular/material/core";
+import {MatProgressSpinnerModule} from "@angular/material/progress-spinner";
 
 @Component({
-    selector: 'app-submit-button',
-    templateUrl: 'submit-button.component.html',
-    styleUrl: 'submit-button.component.scss',
-    imports: [
+  selector: 'app-submit-button',
+  templateUrl: 'submit-button.component.html',
+  styleUrl: 'submit-button.component.scss',
+  imports: [
     MatRippleModule,
     MatProgressSpinnerModule
-]
+  ]
 })
 export class SubmitButtonComponent {
-    @Input() requestPending: boolean = false;
-    @Input() label: string = '';
-    @Input() disabled: boolean = false;
-    @Input() color?: 'secondary';
-    @Output() click = new EventEmitter<void>();
-  }
-  
+  requestPending = input.required<boolean>();
+  label = input<string>();
+  disabled = input<boolean>(false);
+  color = input<'secondary' | undefined>('secondary');
+  click = output<void>();
+}

frontend/src/app/core/guard/already-authenticated.guard.ts

@@ -1,18 +1,18 @@
-import { inject } from "@angular/core";
-import { CanActivateFn, Router } from "@angular/router";
-import { AuthenticationService } from "../service/authentication.service";
-import { MatSnackBar } from "@angular/material/snack-bar";
+import {inject} from "@angular/core";
+import {CanActivateFn, Router} from "@angular/router";
+import {AuthenticationService} from "../service/authentication.service";
+import {MatSnackBar} from "@angular/material/snack-bar";
 
 export const alreadyAuthenticatedGuard: CanActivateFn = () => {
-    const authenticationService = inject(AuthenticationService);
-    const router = inject(Router);
-    const snackBar = inject(MatSnackBar);
+  const authenticationService = inject(AuthenticationService);
+  const router = inject(Router);
+  const snackBar = inject(MatSnackBar);
 
-    if (authenticationService.isAuthenticated()) {
-        router.navigate(['/home']);
-        snackBar.open($localize`You can't access to this page because you are already authenticated.`, $localize`Close`, { duration: 5000 });
-        return false;
-    } else {
-        return true;
-    }
-}
+  if (authenticationService.isAuthenticated()) {
+    router.navigate(['/home']);
+    snackBar.open($localize`You can't access to this page because you are already authenticated.`, $localize`Close`, {duration: 5000});
+    return false;
+  } else {
+    return true;
+  }
+}

frontend/src/app/core/guard/authentication.guard.ts

@@ -1,20 +1,20 @@
-import { inject } from "@angular/core";
-import { CanActivateFn, Router } from "@angular/router";
-import { AuthenticationService } from "../service/authentication.service";
-import { MatSnackBar } from "@angular/material/snack-bar";
+import {inject} from "@angular/core";
+import {CanActivateFn, Router} from "@angular/router";
+import {AuthenticationService} from "../service/authentication.service";
+import {MatSnackBar} from "@angular/material/snack-bar";
 
 export const authenticationGuard: CanActivateFn = async () => {
-    const authenticationService = inject(AuthenticationService);
-    const router = inject(Router);
-    const snackBar = inject(MatSnackBar);
+  const authenticationService = inject(AuthenticationService);
+  const router = inject(Router);
+  const snackBar = inject(MatSnackBar);
 
-    await authenticationService.checkIsAuthenticated();
+  await authenticationService.checkIsAuthenticated();
 
-    if (authenticationService.isAuthenticated()) {
-        return true;
-    } else {
-        router.navigate(['/login']);
-        snackBar.open($localize`You are unauthenticated. Please, log-in first.`, $localize`Close`, { duration: 5000 });
-        return false;
-    }
-}
+  if (authenticationService.isAuthenticated()) {
+    return true;
+  } else {
+    router.navigate(['/login']);
+    snackBar.open($localize`You are unauthenticated. Please, log-in first.`, $localize`Close`, {duration: 5000});
+    return false;
+  }
+}

frontend/src/app/core/interceptor/jwt.interceptor.ts

@@ -1,78 +1,77 @@
-import { HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
-import { inject, Injectable } from '@angular/core';
-import { catchError, filter, Observable, Subject, switchMap, take, throwError } from 'rxjs';
-import { RefreshTokenRequest } from '../rest-services/user/model/refresh-token.model';
-import { UserRestService } from '../rest-services/user/user.rest-service';
-import { AuthenticationService } from '../service/authentication.service';
-import { Router } from '@angular/router';
-import { MatSnackBar } from '@angular/material/snack-bar';
+import {HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest} from '@angular/common/http';
+import {inject, Injectable} from '@angular/core';
+import {catchError, filter, Observable, Subject, switchMap, take, throwError} from 'rxjs';
+import {UserRestService} from '../rest-services/user/user.rest-service';
+import {AuthenticationService} from '../service/authentication.service';
+import {Router} from '@angular/router';
+import {MatSnackBar} from '@angular/material/snack-bar';
 
 @Injectable()
 export class JwtInterceptor implements HttpInterceptor {
-    private readonly authenticationService = inject(AuthenticationService);
-    private readonly router = inject(Router);
-    private readonly userRestService = inject(UserRestService);
-    private readonly snackBar = inject(MatSnackBar);
-    private isRefreshingToken = false;
-    private refreshTokenSubject = new Subject<string | undefined>();
+  private readonly authenticationService = inject(AuthenticationService);
+  private readonly router = inject(Router);
+  private readonly userRestService = inject(UserRestService);
+  private readonly snackBar = inject(MatSnackBar);
+  private isRefreshingToken = false;
+  private refreshTokenSubject = new Subject<string | undefined>();
 
-    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+    let requestWithAuthentication = request;
+
+    const jwt = this.authenticationService.getToken();
+    if (jwt) {
+      requestWithAuthentication = this.addTokenInHeaders(request, jwt);
+    }
+
+    return next.handle(requestWithAuthentication)
+      .pipe(
+        catchError(error => {
+          if (error instanceof HttpErrorResponse && error.status === 401) {
+            return this.handleAunauthorizedError(request, next, error);
+          }
+
+          return throwError(() => error);
+        })
+      );
+  }
+
+  private handleAunauthorizedError(request: HttpRequest<any>, next: HttpHandler, initialError: any): Observable<HttpEvent<any>> {
+    if (!this.isRefreshingToken) {
+      this.isRefreshingToken = true;
+      this.refreshTokenSubject.next(undefined);
+
+      this.authenticationService.refreshToken()
+        .then(refreshTokenResponse => {
+          this.refreshTokenSubject.next(refreshTokenResponse.accessToken);
+        })
+        .catch(() => this.handleNoRefreshToken(initialError))
+        .finally(() => this.isRefreshingToken = false);
+    }
+
+    return this.refreshTokenSubject.pipe(
+      filter(token => !!token),
+      take(1),
+      switchMap(token => {
         let requestWithAuthentication = request;
-
-        const jwt = this.authenticationService.getToken();
-        if (jwt) {
-            requestWithAuthentication = this.addTokenInHeaders(request, jwt);
+        if (token) {
+          requestWithAuthentication = this.addTokenInHeaders(request, token)
         }
+        return next.handle(requestWithAuthentication);
+      })
+    );
+  }
 
-        return next.handle(requestWithAuthentication)
-            .pipe(
-                catchError(error => {
-                    if (error instanceof HttpErrorResponse && error.status === 401) {
-                        return this.handleAunauthorizedError(request, next, error);
-                    }
+  private addTokenInHeaders(request: HttpRequest<any>, token: string): HttpRequest<any> {
+    return request.clone({
+      headers: request.headers.set('Authorization', `Bearer ${token}`)
+    });
+  }
 
-                    return throwError(() => error);
-                })
-            );
-    }
-
-    private handleAunauthorizedError(request: HttpRequest<any>, next: HttpHandler, initialError: any): Observable<HttpEvent<any>> {
-        if (!this.isRefreshingToken) {
-            this.isRefreshingToken = true;
-            this.refreshTokenSubject.next(undefined);
-
-            this.authenticationService.refreshToken()
-                .then(refreshTokenResponse => {
-                    this.refreshTokenSubject.next(refreshTokenResponse.accessToken);
-                })
-                .catch(() => this.handleNoRefreshToken(initialError))
-                .finally(() => this.isRefreshingToken = false);
-        }
-
-        return this.refreshTokenSubject.pipe(
-            filter(token => !!token),
-            take(1),
-            switchMap(token => {
-                let requestWithAuthentication = request;
-                if (token) {
-                    requestWithAuthentication = this.addTokenInHeaders(request, token)
-                }
-                return next.handle(requestWithAuthentication);
-            })
-        );
-    }
-
-    private addTokenInHeaders(request: HttpRequest<any>, token: string): HttpRequest<any> {
-        return request.clone({
-            headers: request.headers.set('Authorization', `Bearer ${token}`)
-        });
-    }
-
-    private handleNoRefreshToken(initialError: any): Observable<HttpEvent<any>> {
-        this.router.navigate(['/login']);
-        this.refreshTokenSubject.next(undefined);
-        this.authenticationService.unauthenticate();
-        this.snackBar.open($localize`You are unauthenticated. Please, re-authenticate before retrying your action.`, $localize`Close`, { duration: 5000 });
-        return throwError(() => initialError);
-    }
-}
+  private handleNoRefreshToken(initialError: any): Observable<HttpEvent<any>> {
+    this.router.navigate(['/login']);
+    this.refreshTokenSubject.next(undefined);
+    this.authenticationService.unauthenticate();
+    this.snackBar.open($localize`You are unauthenticated. Please, re-authenticate before retrying your action.`, $localize`Close`, {duration: 5000});
+    return throwError(() => initialError);
+  }
+}

frontend/src/app/core/model/FormError.ts

@@ -1,4 +1,4 @@
 export interface FormError {
-    fieldName: string;
-    errorMessage: string;
-}
+  fieldName: string;
+  errorMessage: string;
+}

frontend/src/app/core/model/User.ts

@@ -1,7 +1,7 @@
 export interface User {
-    id: string;
-    email: string;
-    pseudo: string;
-    photoId?: string;
-    roles: string[];
-}
+  id: string;
+  email: string;
+  pseudo: string;
+  photoId?: string;
+  roles: string[];
+}

frontend/src/app/core/rest-services/category/category.rest-service.ts

@@ -1,7 +1,7 @@
-import { HttpClient } from '@angular/common/http';
-import { Injectable, inject } from '@angular/core';
-import { lastValueFrom } from 'rxjs';
-import { Category } from './model/category';
+import {HttpClient} from '@angular/common/http';
+import {inject, Injectable} from '@angular/core';
+import {lastValueFrom} from 'rxjs';
+import {Category} from './model/category';
 
 @Injectable({
   providedIn: 'root'

frontend/src/app/core/rest-services/category/model/category.ts

@@ -1,5 +1,5 @@
 export interface Category {
-    id: string;
-    name: string;
-    subCategories: Category[];
-}
+  id: string;
+  name: string;
+  subCategories: Category[];
+}

frontend/src/app/core/rest-services/picture/model/picture.ts

@@ -1,4 +1,4 @@
 export interface Picture {
-    id: string,
-    publishedAt: Date
-}
+  id: string,
+  publishedAt: Date
+}

frontend/src/app/core/rest-services/picture/picture.rest-service.ts

@@ -1,21 +1,21 @@
-import { HttpClient, HttpParams } from "@angular/common/http";
-import { inject, Injectable } from "@angular/core";
-import { Picture } from "./model/picture";
-import { lastValueFrom } from "rxjs";
+import {HttpClient} from "@angular/common/http";
+import {inject, Injectable} from "@angular/core";
+import {Picture} from "./model/picture";
+import {lastValueFrom} from "rxjs";
 
 @Injectable({
-    providedIn: 'root'
+  providedIn: 'root'
 })
 export class PictureRestService {
-    private readonly httpClient = inject(HttpClient);
+  private readonly httpClient = inject(HttpClient);
 
-    getAllOfCurrentUser(): Promise<Picture[]> {
-        return lastValueFrom(this.httpClient.get<Picture[]>('/api/pictures/current-user'));
-    }
+  getAllOfCurrentUser(): Promise<Picture[]> {
+    return lastValueFrom(this.httpClient.get<Picture[]>('/api/pictures/current-user'));
+  }
 
-    uploadPicture(pictureFile: File): Promise<string> {
-        const formData = new FormData();
-        formData.append("file", pictureFile);
-        return lastValueFrom(this.httpClient.post<string>('/api/pictures', formData));
-    }
-}
+  uploadPicture(pictureFile: File): Promise<string> {
+    const formData = new FormData();
+    formData.append("file", pictureFile);
+    return lastValueFrom(this.httpClient.post<string>('/api/pictures', formData));
+  }
+}

frontend/src/app/core/rest-services/publications/model/author.ts

@@ -1,5 +1,5 @@
 export interface Author {
-    id: string;
-    name: string;
-    image: string;
-}
+  id: string;
+  name: string;
+  image: string;
+}

frontend/src/app/core/rest-services/publications/model/preview.ts

@@ -1,7 +1,7 @@
 export interface PreviewContentRequest {
-    text: string;
+  text: string;
 }
 
 export interface PreviewContentResponse {
-    text: string;
-}
+  text: string;
+}

frontend/src/app/core/rest-services/publications/model/publication.ts

@@ -1,14 +1,31 @@
-import { Author } from "./author";
+import {Author} from "./author";
 
 export interface Publication {
-    id: string;
-    key: string;
-    title: string;
-    text: string;
-    parsedText: string;
-    description: string;
-    creationDate: Date;
-    illustrationId: string;
-    categoryId: string;
-    author: Author;
-}
+  id: string;
+  key: string;
+  title: string;
+  text: string;
+  parsedText: string;
+  description: string;
+  creationDate: Date;
+  illustrationId: string;
+  categoryId: string;
+  author: Author;
+}
+
+export const DEFAULT_PUBLICATION: Publication = {
+  id: '',
+  key: '',
+  title: '',
+  text: '',
+  parsedText: '',
+  description: '',
+  creationDate: new Date(),
+  illustrationId: '',
+  categoryId: '',
+  author: {
+    id: '',
+    name: '',
+    image: ''
+  }
+}

frontend/src/app/core/rest-services/publications/publication.rest-service.ts

@@ -1,8 +1,8 @@
-import { HttpClient, HttpParams } from '@angular/common/http';
-import { Injectable, inject } from '@angular/core';
-import { last, lastValueFrom } from 'rxjs';
-import { Publication } from './model/publication';
-import { PreviewContentRequest, PreviewContentResponse } from './model/preview';
+import {HttpClient, HttpParams} from '@angular/common/http';
+import {inject, Injectable} from '@angular/core';
+import {lastValueFrom} from 'rxjs';
+import {Publication} from './model/publication';
+import {PreviewContentRequest, PreviewContentResponse} from './model/preview';
 
 @Injectable({
   providedIn: 'root'
@@ -29,7 +29,7 @@ export class PublicationRestService {
   search(searchCriteria: string): Promise<Publication[]> {
     let params = new HttpParams();
     params = params.set('query', searchCriteria);
-    return lastValueFrom(this.httpClient.get<Publication[]>('/api/publications', { params }));
+    return lastValueFrom(this.httpClient.get<Publication[]>('/api/publications', {params}));
   }
 
   preview(request: PreviewContentRequest): Promise<PreviewContentResponse> {

frontend/src/app/core/rest-services/user/model/login.model.ts

@@ -1,10 +1,10 @@
 export interface LoginRequest {
-    email?: string;
-    password?: string;
+  email?: string;
+  password?: string;
 }
 
 export interface LoginResponse {
-    tokenType: string,
-    accessToken: string,
-    refreshToken: string
-}
+  tokenType: string,
+  accessToken: string,
+  refreshToken: string
+}

frontend/src/app/core/rest-services/user/model/refresh-token.model.ts

@@ -1,3 +1,3 @@
 export interface RefreshTokenRequest {
-    refreshTokenValue: string;
-}
+  refreshTokenValue: string;
+}

frontend/src/app/core/rest-services/user/model/signin.model.ts

@@ -1,5 +1,5 @@
 export interface SigninRequest {
-    pseudo?: string;
-    email?: string;
-    password?: string;
-}
+  pseudo?: string;
+  email?: string;
+  password?: string;
+}

frontend/src/app/core/rest-services/user/user.rest-service.ts

@@ -1,25 +1,25 @@
-import { HttpClient } from "@angular/common/http";
-import { Injectable, inject } from "@angular/core";
-import { LoginRequest, LoginResponse } from "./model/login.model";
-import { lastValueFrom } from "rxjs";
-import { SigninRequest } from "./model/signin.model";
-import { RefreshTokenRequest } from "./model/refresh-token.model";
+import {HttpClient} from "@angular/common/http";
+import {inject, Injectable} from "@angular/core";
+import {LoginRequest, LoginResponse} from "./model/login.model";
+import {lastValueFrom} from "rxjs";
+import {SigninRequest} from "./model/signin.model";
+import {RefreshTokenRequest} from "./model/refresh-token.model";
 
 @Injectable({
-    providedIn: 'root'
+  providedIn: 'root'
 })
 export class UserRestService {
-    private httpClient = inject(HttpClient);
+  private httpClient = inject(HttpClient);
 
-    login(request: LoginRequest): Promise<LoginResponse> {
-        return lastValueFrom(this.httpClient.post<LoginResponse>('/api/users/login', request));
-    }
+  login(request: LoginRequest): Promise<LoginResponse> {
+    return lastValueFrom(this.httpClient.post<LoginResponse>('/api/users/login', request));
+  }
 
-    signin(request: SigninRequest): Promise<void> {
-        return lastValueFrom(this.httpClient.post<void>('/api/users', request));
-    }
+  signin(request: SigninRequest): Promise<void> {
+    return lastValueFrom(this.httpClient.post<void>('/api/users', request));
+  }
 
-    refreshToken(request: RefreshTokenRequest): Promise<LoginResponse> {
-        return lastValueFrom(this.httpClient.post<LoginResponse>('/api/users/refresh-token', request));
-    }
-}
+  refreshToken(request: RefreshTokenRequest): Promise<LoginResponse> {
+    return lastValueFrom(this.httpClient.post<LoginResponse>('/api/users/refresh-token', request));
+  }
+}

frontend/src/app/core/service/authentication.service.ts

@@ -1,146 +1,146 @@
-import { inject, Injectable } from "@angular/core";
-import { BehaviorSubject, interval } from "rxjs";
-import { User } from "../model/User";
-import { UserRestService } from "../rest-services/user/user.rest-service";
-import { RefreshTokenRequest } from "../rest-services/user/model/refresh-token.model";
-import { LoginResponse } from "../rest-services/user/model/login.model";
+import {inject, Injectable} from "@angular/core";
+import {BehaviorSubject, interval} from "rxjs";
+import {User} from "../model/User";
+import {UserRestService} from "../rest-services/user/user.rest-service";
+import {RefreshTokenRequest} from "../rest-services/user/model/refresh-token.model";
+import {LoginResponse} from "../rest-services/user/model/login.model";
 
 const JWT_PARAM = 'jwt';
 const REFRESH_TOKEN_PARAM = 'refresh-token';
 
 interface UserDetails {
-    sub: string;
-    exp: number;
-    email: string;
-    pseudo: string;
-    roles: string;
+  sub: string;
+  exp: number;
+  email: string;
+  pseudo: string;
+  roles: string;
 }
 
 @Injectable({
-    providedIn: 'root'
+  providedIn: 'root'
 })
 export class AuthenticationService {
-    private readonly AUTHENTICATION_CHECKING_PERIOD = 5 * 60 * 1000;
-    private isAuthenticatedSubject = new BehaviorSubject<boolean>(false);
-    private readonly userRestService = inject(UserRestService);
+  private readonly AUTHENTICATION_CHECKING_PERIOD = 5 * 60 * 1000;
+  private isAuthenticatedSubject = new BehaviorSubject<boolean>(false);
+  private readonly userRestService = inject(UserRestService);
 
-    startAuthenticationCheckingProcess(): void {
-        this.checkIsAuthenticated();
-        interval(this.AUTHENTICATION_CHECKING_PERIOD)
-            .subscribe(() => this.checkIsAuthenticated());
+  startAuthenticationCheckingProcess(): void {
+    this.checkIsAuthenticated();
+    interval(this.AUTHENTICATION_CHECKING_PERIOD)
+      .subscribe(() => this.checkIsAuthenticated());
+  }
+
+  authenticate(token: string, refreshToken: string): void {
+    localStorage.setItem(JWT_PARAM, token);
+    localStorage.setItem(REFRESH_TOKEN_PARAM, refreshToken);
+    this.isAuthenticatedSubject.next(true);
+  }
+
+  unauthenticate(): void {
+    localStorage.removeItem(JWT_PARAM);
+    localStorage.removeItem(REFRESH_TOKEN_PARAM);
+    this.isAuthenticatedSubject.next(false);
+  }
+
+  isAuthenticated(): boolean {
+    return this.isAuthenticatedSubject.value;
+  }
+
+  getAuthenticatedUser(): User | undefined {
+    return this.extractUserFromLocalStorage();
+  }
+
+  getToken(): string | undefined {
+    return localStorage.getItem(JWT_PARAM) ?? undefined;
+  }
+
+  getRefreshToken(): string | undefined {
+    return localStorage.getItem(REFRESH_TOKEN_PARAM) ?? undefined;
+  }
+
+  isTokenExpired(): boolean {
+    let result = true;
+
+    const userDetails = this.extractUserDetails();
+
+    if (userDetails) {
+      const expirationDate = new Date(userDetails.exp * 1000);
+      const now = new Date();
+
+      result = expirationDate < now;
     }
 
-    authenticate(token: string, refreshToken: string): void {
-        localStorage.setItem(JWT_PARAM, token);
-        localStorage.setItem(REFRESH_TOKEN_PARAM, refreshToken);
-        this.isAuthenticatedSubject.next(true);
-    }
+    return result;
+  }
 
-    unauthenticate(): void {
-        localStorage.removeItem(JWT_PARAM);
-        localStorage.removeItem(REFRESH_TOKEN_PARAM);
-        this.isAuthenticatedSubject.next(false);
-    }
-    
-    isAuthenticated(): boolean {
-        return this.isAuthenticatedSubject.value;
-    }
-
-    getAuthenticatedUser(): User | undefined {
-        return this.extractUserFromLocalStorage();
-    }
-
-    getToken(): string | undefined {
-        return localStorage.getItem(JWT_PARAM) ?? undefined;
-    }
-
-    getRefreshToken(): string | undefined {
-        return localStorage.getItem(REFRESH_TOKEN_PARAM) ?? undefined;
-    }
-
-    isTokenExpired(): boolean {
-        let result = true;
-
-        const userDetails = this.extractUserDetails();
-
-        if (userDetails) {
-            const expirationDate = new Date(userDetails.exp * 1000);
-            const now = new Date();
-
-            result = expirationDate < now;
-        }
-
-        return result;
-    }
-
-    refreshToken(): Promise<LoginResponse> {
-        const refreshToken = this.getRefreshToken();
-        if (refreshToken) {
-            const refreshTokenRequest: RefreshTokenRequest = {
-                refreshTokenValue: refreshToken
-            };
-            return this.userRestService.refreshToken(refreshTokenRequest)
-                .then(refreshTokenResponse => {
-                    this.authenticate(refreshTokenResponse.accessToken, refreshTokenResponse.refreshToken);
-                    return refreshTokenResponse;
-                });
-        }
-
-        return Promise.reject('No any refresh token found.');
-    }
-
-    checkIsAuthenticated(): Promise<void> {
-        return new Promise((resolve, reject) => {
-            const isTokenExpired = this.isTokenExpired();
-            if (isTokenExpired) {
-                if (this.getRefreshToken()) {
-                    this.refreshToken()
-                        .then(() => resolve())
-                        .catch(() => reject());
-                } else {
-                    this.isAuthenticatedSubject.next(false);
-                }
-            } else {
-                this.isAuthenticatedSubject.next(true);
-            }
-            resolve();
+  refreshToken(): Promise<LoginResponse> {
+    const refreshToken = this.getRefreshToken();
+    if (refreshToken) {
+      const refreshTokenRequest: RefreshTokenRequest = {
+        refreshTokenValue: refreshToken
+      };
+      return this.userRestService.refreshToken(refreshTokenRequest)
+        .then(refreshTokenResponse => {
+          this.authenticate(refreshTokenResponse.accessToken, refreshTokenResponse.refreshToken);
+          return refreshTokenResponse;
         });
-        
     }
 
-    private extractUserFromLocalStorage(): User | undefined {
-        let result: User | undefined;
+    return Promise.reject('No any refresh token found.');
+  }
 
-        const userDetails = this.extractUserDetails();
-        if (userDetails) {
-            const user = this.convertToUser(userDetails);
-            result = user;
+  checkIsAuthenticated(): Promise<void> {
+    return new Promise((resolve, reject) => {
+      const isTokenExpired = this.isTokenExpired();
+      if (isTokenExpired) {
+        if (this.getRefreshToken()) {
+          this.refreshToken()
+            .then(() => resolve())
+            .catch(() => reject());
+        } else {
+          this.isAuthenticatedSubject.next(false);
         }
+      } else {
+        this.isAuthenticatedSubject.next(true);
+      }
+      resolve();
+    });
 
-        return result;
+  }
+
+  private extractUserFromLocalStorage(): User | undefined {
+    let result: User | undefined;
+
+    const userDetails = this.extractUserDetails();
+    if (userDetails) {
+      const user = this.convertToUser(userDetails);
+      result = user;
     }
 
-    private extractUserDetails(): UserDetails | undefined {
-        let result: UserDetails | undefined = undefined;
+    return result;
+  }
 
-        const token = localStorage.getItem(JWT_PARAM);
+  private extractUserDetails(): UserDetails | undefined {
+    let result: UserDetails | undefined = undefined;
 
-        const tokenParts = token?.split('.');
-        if (tokenParts?.length === 3 && tokenParts[1].length) {
-            const decodedTokenPart = atob(tokenParts[1]);
-            const userDetails: UserDetails = JSON.parse(decodedTokenPart);
-            result = userDetails;
-        }
+    const token = localStorage.getItem(JWT_PARAM);
 
-        return result;
+    const tokenParts = token?.split('.');
+    if (tokenParts?.length === 3 && tokenParts[1].length) {
+      const decodedTokenPart = atob(tokenParts[1]);
+      const userDetails: UserDetails = JSON.parse(decodedTokenPart);
+      result = userDetails;
     }
 
-    private convertToUser(userDetails: UserDetails): User {
-        return {
-            id: userDetails.sub,
-            email: userDetails.email,
-            pseudo: userDetails.pseudo,
-            roles: userDetails.roles.split(',')
-        };
-    }
-}
+    return result;
+  }
+
+  private convertToUser(userDetails: UserDetails): User {
+    return {
+      id: userDetails.sub,
+      email: userDetails.email,
+      pseudo: userDetails.pseudo,
+      roles: userDetails.roles.split(',')
+    };
+  }
+}

frontend/src/app/core/service/category.service.ts

@@ -1,7 +1,7 @@
-import { Injectable, inject } from '@angular/core';
-import { CategoryRestService } from '../rest-services/category/category.rest-service';
-import { BehaviorSubject, Observable } from 'rxjs';
-import { Category } from '../rest-services/category/model/category';
+import {inject, Injectable} from '@angular/core';
+import {CategoryRestService} from '../rest-services/category/category.rest-service';
+import {BehaviorSubject, Observable} from 'rxjs';
+import {Category} from '../rest-services/category/model/category';
 
 @Injectable({
   providedIn: 'root'

frontend/src/app/core/utils/ObjectUtils.ts

@@ -1,5 +1,5 @@
 export function copy<T>(object: T): T {
-    return JSON.parse(
-        JSON.stringify(object)
-    );
-}
+  return JSON.parse(
+    JSON.stringify(object)
+  );
+}

frontend/src/app/pages/disconnection/disconnection.component.scss

@@ -1,6 +1,6 @@
 :host {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-}
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}

frontend/src/app/pages/disconnection/disconnection.component.ts

@@ -1,13 +1,13 @@
-import { Component, OnInit, inject } from '@angular/core';
-import {MatProgressSpinnerModule} from '@angular/material/progress-spinner'; 
-import { AuthenticationService } from '../../core/service/authentication.service';
-import { Router } from '@angular/router';
+import {Component, inject, OnInit} from '@angular/core';
+import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
+import {AuthenticationService} from '../../core/service/authentication.service';
+import {Router} from '@angular/router';
 
 @Component({
-    selector: 'app-disconnection',
-    imports: [MatProgressSpinnerModule],
-    templateUrl: './disconnection.component.html',
-    styleUrl: './disconnection.component.scss'
+  selector: 'app-disconnection',
+  imports: [MatProgressSpinnerModule],
+  templateUrl: './disconnection.component.html',
+  styleUrl: './disconnection.component.scss'
 })
 export class DisconnectionComponent implements OnInit {
   private authenticationService = inject(AuthenticationService);

frontend/src/app/pages/home/home.component.html

@@ -1,11 +1,11 @@
 <h1 i18n>Last publications</h1>
-@if ((isLoading$ | async) === true) {
-    <h2 i18n>Publications loading...</h2>
-    <mat-spinner></mat-spinner>
+@if ((isLoading())) {
+  <h2 i18n>Publications loading...</h2>
+  <mat-spinner/>
 } @else {
-    @if ((publications$ | async) != []) {
-        <app-publication-list [publications$]="publications$"></app-publication-list>
-    } @else {
-        <h2 i18n>No any publication.</h2>
-    }
+  @if (publications(); as publications) {
+    <app-publication-list [publications]="publications"/>
+  } @else {
+    <h2 i18n>No any publication.</h2>
+  }
 }

frontend/src/app/pages/home/home.component.scss

@@ -1,6 +1,6 @@
 :host {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-}
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}

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

@@ -1,34 +1,26 @@
-import { Component, OnInit, inject } from '@angular/core';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import { Observable } from 'rxjs';
-import { PublicationListComponent } from '../../components/publication-list/publication-list.component';
-import { Publication } from '../../core/rest-services/publications/model/publication';
-import { HomeService } from './home.service';
-import { CommonModule } from '@angular/common';
+import {Component, inject, OnInit} from '@angular/core';
+import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
+import {PublicationListComponent} from '../../components/publication-list/publication-list.component';
+import {HomeService} from './home.service';
+import {CommonModule} from '@angular/common';
 
 @Component({
-    selector: 'app-home',
-    imports: [
-        CommonModule,
-        MatProgressSpinnerModule,
-        PublicationListComponent
-    ],
-    templateUrl: './home.component.html',
-    styleUrl: './home.component.scss',
-    providers: [HomeService]
+  selector: 'app-home',
+  imports: [
+    CommonModule,
+    MatProgressSpinnerModule,
+    PublicationListComponent
+  ],
+  templateUrl: './home.component.html',
+  styleUrl: './home.component.scss',
+  providers: [HomeService]
 })
 export class HomeComponent implements OnInit {
-  private homeService = inject(HomeService);
-
-  get isLoading$(): Observable<boolean> {
-    return this.homeService.isLoading$;
-  }
-
-  get publications$(): Observable<Publication[]> {
-    return this.homeService.publications$;
-  }
+  readonly #homeService = inject(HomeService);
+  isLoading = this.#homeService.isLoading;
+  publications = this.#homeService.publications;
 
   ngOnInit(): void {
-    this.homeService.startLatestPublicationsRetrieving();
+    this.#homeService.startLatestPublicationsRetrieving();
   }
 }

frontend/src/app/pages/home/home.service.ts

@@ -1,35 +1,34 @@
-import { Injectable, inject } from "@angular/core";
-import { PublicationRestService } from "../../core/rest-services/publications/publication.rest-service";
-import { BehaviorSubject, Observable } from "rxjs";
-import { MatSnackBar } from "@angular/material/snack-bar"
-import { Publication } from "../../core/rest-services/publications/model/publication";
+import {inject, Injectable, Signal, signal} from "@angular/core";
+import {PublicationRestService} from "../../core/rest-services/publications/publication.rest-service";
+import {MatSnackBar} from "@angular/material/snack-bar"
+import {Publication} from "../../core/rest-services/publications/model/publication";
 
 @Injectable()
 export class HomeService {
-    private publicationRestService = inject(PublicationRestService);
-    private snackBar = inject(MatSnackBar);
+  private publicationRestService = inject(PublicationRestService);
+  private snackBar = inject(MatSnackBar);
 
-    private publicationsSubject = new BehaviorSubject<Publication[]>([]);
-    private isLoadingSubject = new BehaviorSubject<boolean>(false);
+  #publications = signal<Publication[]>([]);
+  #isLoadingSubject = signal<boolean>(false);
 
-    get isLoading$(): Observable<boolean> {
-        return this.isLoadingSubject.asObservable();
-    }
+  get isLoading(): Signal<boolean> {
+    return this.#isLoadingSubject.asReadonly();
+  }
 
-    get publications$(): Observable<Publication[]> {
-        return this.publicationsSubject.asObservable();
-    }
+  get publications(): Signal<Publication[]> {
+    return this.#publications.asReadonly();
+  }
 
-    startLatestPublicationsRetrieving(): void {
-        this.isLoadingSubject.next(true);
+  startLatestPublicationsRetrieving(): void {
+    this.#isLoadingSubject.set(true);
 
-        this.publicationRestService.getLatest()
-            .then(publications => this.publicationsSubject.next(publications))
-            .catch(error => {
-                const errorMessage = $localize`An error occurred while retrieving latest publications...`;
-                this.snackBar.open(errorMessage, $localize`Close`, { duration: 5000 });
-                console.error(errorMessage, error);
-            })
-            .finally(() => this.isLoadingSubject.next(false));
-    }
-}
+    this.publicationRestService.getLatest()
+      .then(publications => this.#publications.set(publications))
+      .catch(error => {
+        const errorMessage = $localize`An error occurred while retrieving latest publications...`;
+        this.snackBar.open(errorMessage, $localize`Close`, {duration: 5000});
+        console.error(errorMessage, error);
+      })
+      .finally(() => this.#isLoadingSubject.set(false));
+  }
+}

frontend/src/app/pages/login/login.component.html

@@ -1,23 +1,23 @@
 <form [formGroup]="loginForm" (submit)="performLogin()" class="cod-form card" ngNativeValidate>
-    <h1 i18n>Login</h1>
-    <div class="form-field">
-        <mat-icon>mail</mat-icon>
-        <label for="email" i18n>
-            Email address
-            <span class="required">*</span>
-        </label>
-        <input type="email" id="email" formControlName="email" autocomplete="email" required />
-    </div>
-    <div class="form-field">
-        <mat-icon>lock</mat-icon>
-        <label for="password" i18n>
-            Password
-            <span class="required">*</span>
-        </label>
-        <input type="password" id="password" formControlName="password" required />
-    </div>
-    <div class="actions reversed">
-        <app-submit-button [requestPending]="false" [disabled]="false" i18n>Send</app-submit-button>
-        <a [routerLink]="['/signin']" class="cod-button secondary" matRipple i18n>Create an account</a>
-    </div>
-</form>
+  <h1 i18n>Login</h1>
+  <div class="form-field">
+    <mat-icon>mail</mat-icon>
+    <label for="email" i18n>
+      Email address
+      <span class="required">*</span>
+    </label>
+    <input type="email" id="email" formControlName="email" autocomplete="email" required/>
+  </div>
+  <div class="form-field">
+    <mat-icon>lock</mat-icon>
+    <label for="password" i18n>
+      Password
+      <span class="required">*</span>
+    </label>
+    <input type="password" id="password" formControlName="password" required/>
+  </div>
+  <div class="actions reversed">
+    <app-submit-button [requestPending]="false" [disabled]="false" i18n>Send</app-submit-button>
+    <a [routerLink]="['/signin']" class="cod-button secondary" matRipple i18n>Create an account</a>
+  </div>
+</form>

frontend/src/app/pages/login/login.component.scss

@@ -1,7 +1,7 @@
 :host {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    padding: 1em;
-}
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 1em;
+}

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

@@ -1,25 +1,25 @@
-import { Component, OnDestroy, OnInit, inject } from '@angular/core';
-import { FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
-import { MatSnackBarModule } from '@angular/material/snack-bar';
-import { Subscription, debounceTime, map } from 'rxjs';
-import { LoginService } from './login.service';
-import { MatIconModule } from '@angular/material/icon';
-import { RouterModule } from '@angular/router';
-import { SubmitButtonComponent } from "../../components/submit-button/submit-button.component";
-import { MatRippleModule } from '@angular/material/core';
+import {Component, inject, OnDestroy, OnInit} from '@angular/core';
+import {FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
+import {MatSnackBarModule} from '@angular/material/snack-bar';
+import {debounceTime, map, Subscription} from 'rxjs';
+import {LoginService} from './login.service';
+import {MatIconModule} from '@angular/material/icon';
+import {RouterModule} from '@angular/router';
+import {SubmitButtonComponent} from "../../components/submit-button/submit-button.component";
+import {MatRippleModule} from '@angular/material/core';
 
 @Component({
-    selector: 'app-login',
-    templateUrl: './login.component.html',
-    styleUrl: './login.component.scss',
-    imports: [
-        MatIconModule,
-        MatRippleModule,
-        ReactiveFormsModule,
-        RouterModule,
-        SubmitButtonComponent
-    ],
-    providers: [LoginService, MatSnackBarModule]
+  selector: 'app-login',
+  templateUrl: './login.component.html',
+  styleUrl: './login.component.scss',
+  imports: [
+    MatIconModule,
+    MatRippleModule,
+    ReactiveFormsModule,
+    RouterModule,
+    SubmitButtonComponent
+  ],
+  providers: [LoginService, MatSnackBarModule]
 })
 export class LoginComponent implements OnInit, OnDestroy {
   private loginService = inject(LoginService);
@@ -52,10 +52,10 @@ export class LoginComponent implements OnInit, OnDestroy {
     this.subscriptions.push(passwordSubscription)
 
     const stateSubscription = this.loginService.state$
-        .subscribe(state => {
-          this.loginForm.controls['email'].setValue(state.request.email, { emitEvent: false });
-          this.loginForm.controls['password'].setValue(state.request.password, { emitEvent: false });
-        });
+      .subscribe(state => {
+        this.loginForm.controls['email'].setValue(state.request.email, {emitEvent: false});
+        this.loginForm.controls['password'].setValue(state.request.password, {emitEvent: false});
+      });
     this.subscriptions.push(stateSubscription);
   }
 

frontend/src/app/pages/login/login.service.ts

@@ -1,12 +1,12 @@
-import { Injectable, inject } from '@angular/core';
-import { BehaviorSubject, Observable } from 'rxjs';
-import { copy } from '../../core/utils/ObjectUtils';
-import { FormError } from '../../core/model/FormError';
-import { UserRestService } from '../../core/rest-services/user/user.rest-service';
-import { LoginRequest } from '../../core/rest-services/user/model/login.model';
-import { AuthenticationService } from '../../core/service/authentication.service';
-import { MatSnackBar } from '@angular/material/snack-bar';
-import { Router } from '@angular/router';
+import {inject, Injectable} from '@angular/core';
+import {BehaviorSubject, Observable} from 'rxjs';
+import {copy} from '../../core/utils/ObjectUtils';
+import {FormError} from '../../core/model/FormError';
+import {UserRestService} from '../../core/rest-services/user/user.rest-service';
+import {LoginRequest} from '../../core/rest-services/user/model/login.model';
+import {AuthenticationService} from '../../core/service/authentication.service';
+import {MatSnackBar} from '@angular/material/snack-bar';
+import {Router} from '@angular/router';
 
 export interface LoginState {
   request: LoginRequest;
@@ -65,15 +65,15 @@ export class LoginService {
         .login(state.request)
         .then((response) => {
           this.authenticationService.authenticate(response.accessToken, response.refreshToken);
-          this.snackBar.open($localize`Authentication succeeded!`, $localize`Close`, { duration: 5000 });
+          this.snackBar.open($localize`Authentication succeeded!`, $localize`Close`, {duration: 5000});
           this.router.navigate(['/home']);
         })
         .catch((error) => {
           console.error(error);
-          this.snackBar.open($localize`Authentication failed.`, $localize`Close`, { duration: 5000 });
+          this.snackBar.open($localize`Authentication failed.`, $localize`Close`, {duration: 5000});
         });
     } else {
-      this.snackBar.open($localize`Please, fill the inputs before send.`, $localize`Close`, { duration: 5000 });
+      this.snackBar.open($localize`Please, fill the inputs before send.`, $localize`Close`, {duration: 5000});
     }
   }
 

frontend/src/app/pages/my-publications/my-publications.component.html

@@ -1,21 +1,21 @@
 <h1 i18n>Your publications</h1>
 
 <a [routerLink]="['/publications/new']"
-    class="new-publication"
-    matTooltip="Add a new publication"
-    matTooltipPosition="left"
-    matRipple
-    i18n-matTooltip>
-    +
+   class="new-publication"
+   matTooltip="Add a new publication"
+   matTooltipPosition="left"
+   matRipple
+   i18n-matTooltip>
+  +
 </a>
 
-@if ((isLoading$ | async) === true) {
-    <h2 i18n>Publication loading...</h2>
-    <mat-spinner></mat-spinner>
+@if (isLoading()) {
+  <h2 i18n>Publication loading...</h2>
+  <mat-spinner></mat-spinner>
 } @else {
-    @if ((isLoaded$ | async) === true) {
-        <app-publication-list [publications$]="publications$"></app-publication-list>
-    } @else {
-        <h2 i18n>There is no any publication...</h2>
-    }
-}
+  @if (isLoaded()) {
+    <app-publication-list [publications]="publications()"></app-publication-list>
+  } @else {
+    <h2 i18n>There is no any publication...</h2>
+  }
+}

frontend/src/app/pages/my-publications/my-publications.component.scss

@@ -1,29 +1,29 @@
 $newPublicationButtonSize: 1.7em;
 
 :host {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 
-    .new-publication {
-        position: fixed;
-        border-radius: 10em;
-        background-color: #14A44D;
-        color: white;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        bottom: $newPublicationButtonSize;
-        right: $newPublicationButtonSize;
-        width: $newPublicationButtonSize;
-        height: $newPublicationButtonSize;
-        text-decoration: none;
-        box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
-        transition: background-color .2s ease-in-out;
-        font-size: 2.2em;
-        
-        &:hover {
-            background-color: #0e7a3a;
-        }
+  .new-publication {
+    position: fixed;
+    border-radius: 10em;
+    background-color: #14A44D;
+    color: white;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    bottom: $newPublicationButtonSize;
+    right: $newPublicationButtonSize;
+    width: $newPublicationButtonSize;
+    height: $newPublicationButtonSize;
+    text-decoration: none;
+    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
+    transition: background-color .2s ease-in-out;
+    font-size: 2.2em;
+
+    &:hover {
+      background-color: #0e7a3a;
     }
-}
+  }
+}

frontend/src/app/pages/my-publications/my-publications.component.ts

@@ -1,45 +1,35 @@
-import { Component, inject, OnInit } from "@angular/core";
-import { MatProgressSpinnerModule } from "@angular/material/progress-spinner";
-import { MyPublicationsService } from "./my-publications.service";
-import { Observable } from "rxjs";
-import { PublicationListComponent } from "../../components/publication-list/publication-list.component";
-import { Publication } from "../../core/rest-services/publications/model/publication";
-import { CommonModule } from "@angular/common";
-import { RouterModule } from "@angular/router";
-import { MatTooltipModule } from "@angular/material/tooltip";
-import { MatRippleModule } from "@angular/material/core";
+import {Component, inject, OnInit} from "@angular/core";
+import {MatProgressSpinnerModule} from "@angular/material/progress-spinner";
+import {MyPublicationsService} from "./my-publications.service";
+import {PublicationListComponent} from "../../components/publication-list/publication-list.component";
+import {CommonModule} from "@angular/common";
+import {RouterModule} from "@angular/router";
+import {MatTooltipModule} from "@angular/material/tooltip";
+import {MatRippleModule} from "@angular/material/core";
 
 
 @Component({
-    selector: 'app-my-component',
-    templateUrl: './my-publications.component.html',
-    styleUrl: './my-publications.component.scss',
-    imports: [
-        CommonModule,
-        MatProgressSpinnerModule,
-        MatRippleModule,
-        MatTooltipModule,
-        PublicationListComponent,
-        RouterModule
-    ],
-    providers: [MyPublicationsService]
+  selector: 'app-my-component',
+  templateUrl: './my-publications.component.html',
+  styleUrl: './my-publications.component.scss',
+  imports: [
+    CommonModule,
+    MatProgressSpinnerModule,
+    MatRippleModule,
+    MatTooltipModule,
+    PublicationListComponent,
+    RouterModule
+  ],
+  providers: [MyPublicationsService]
 })
 export class MyPublicationsComponent implements OnInit {
-    private readonly myPublicationsService = inject(MyPublicationsService);
+  private readonly myPublicationsService = inject(MyPublicationsService);
 
-    get publications$(): Observable<Publication[]> {
-        return this.myPublicationsService.publications$;
-    }
+  publications = this.myPublicationsService.publications;
+  isLoading = this.myPublicationsService.isLoading;
+  isLoaded = this.myPublicationsService.isLoaded;
 
-    get isLoading$(): Observable<boolean> {
-        return this.myPublicationsService.isLoading$;
-    }
-
-    get isLoaded$(): Observable<boolean> {
-        return this.myPublicationsService.isLoaded$;
-    }
-
-    ngOnInit(): void {
-        this.myPublicationsService.loadAuthenticatedUserPublications();    
-    }
-}
+  ngOnInit(): void {
+    this.myPublicationsService.loadAuthenticatedUserPublications();
+  }
+}

frontend/src/app/pages/my-publications/my-publications.routes.ts

@@ -1,7 +1,7 @@
-import { Route } from "@angular/router";
-import { authenticationGuard } from "../../core/guard/authentication.guard";
-import { MyPublicationsComponent } from "./my-publications.component";
+import {Route} from "@angular/router";
+import {authenticationGuard} from "../../core/guard/authentication.guard";
+import {MyPublicationsComponent} from "./my-publications.component";
 
 export const ROUTES: Route[] = [
-    { path: '', component: MyPublicationsComponent, canActivate: [authenticationGuard] }
-]
+  {path: '', component: MyPublicationsComponent, canActivate: [authenticationGuard]}
+]

frontend/src/app/pages/my-publications/my-publications.service.ts

@@ -1,57 +1,56 @@
-import { inject, Injectable } from "@angular/core";
-import { PublicationRestService } from "../../core/rest-services/publications/publication.rest-service";
-import { AuthenticationService } from "../../core/service/authentication.service";
-import { BehaviorSubject, Observable } from "rxjs";
-import { Publication } from "../../core/rest-services/publications/model/publication";
-import { Router } from "@angular/router";
-import { MatSnackBar } from "@angular/material/snack-bar";
+import {inject, Injectable, Signal, signal} from "@angular/core";
+import {PublicationRestService} from "../../core/rest-services/publications/publication.rest-service";
+import {AuthenticationService} from "../../core/service/authentication.service";
+import {Publication} from "../../core/rest-services/publications/model/publication";
+import {Router} from "@angular/router";
+import {MatSnackBar} from "@angular/material/snack-bar";
 
 @Injectable()
 export class MyPublicationsService {
-    private readonly authenticationService = inject(AuthenticationService);
-    private readonly publicationRestService = inject(PublicationRestService);
-    private readonly snackBar = inject(MatSnackBar);
-    private readonly router = inject(Router);
-    private publicationsSubject = new BehaviorSubject<Publication[]>([]);
-    private isLoadingSubject = new BehaviorSubject<boolean>(false);
-    private isLoadedSubject = new BehaviorSubject<boolean>(false);
+  readonly #authenticationService = inject(AuthenticationService);
+  readonly #publicationRestService = inject(PublicationRestService);
+  readonly #snackBar = inject(MatSnackBar);
+  readonly #router = inject(Router);
+  #publications = signal<Publication[]>([]);
+  #isLoading = signal(false);
+  #isLoaded = signal(false);
 
-    get publications$(): Observable<Publication[]> {
-        return this.publicationsSubject.asObservable();
+  get publications(): Signal<Publication[]> {
+    return this.#publications.asReadonly();
+  }
+
+  get isLoading(): Signal<boolean> {
+    return this.#isLoading.asReadonly();
+  }
+
+  get isLoaded(): Signal<boolean> {
+    return this.#isLoaded.asReadonly();
+  }
+
+  loadAuthenticatedUserPublications(): void {
+    const authenticatedUser = this.#authenticationService.getAuthenticatedUser();
+    if (authenticatedUser) {
+      this.#isLoading.set(true);
+      this.#isLoaded.set(false);
+
+      const query = `author_id=${authenticatedUser.id}`;
+      this.#publicationRestService.search(query)
+        .then(publications => {
+          this.#publications.set(publications);
+        })
+        .catch(error => {
+          const errorMessage = $localize`An error occurred while retrieving your publications...`;
+          this.#snackBar.open(errorMessage, $localize`Close`, {duration: 5000});
+          console.error(errorMessage, error);
+        })
+        .finally(() => {
+          this.#isLoading.set(false);
+          this.#isLoaded.set(true);
+        });
+    } else {
+      this.#authenticationService.unauthenticate();
+      this.#snackBar.open($localize`You are unauthenticated. Please, log-in first.`, $localize`Close`, {duration: 5000});
+      this.#router.navigate(['/login']);
     }
-
-    get isLoading$(): Observable<boolean> {
-        return this.isLoadingSubject.asObservable();
-    }
-
-    get isLoaded$(): Observable<boolean> {
-        return this.isLoadedSubject.asObservable();
-    }
-
-    loadAuthenticatedUserPublications(): void {
-        const authenticatedUser = this.authenticationService.getAuthenticatedUser();
-        if (authenticatedUser) {
-            this.isLoadingSubject.next(true);
-            this.isLoadedSubject.next(false);
-
-            const query = `author_id=${authenticatedUser.id}`;
-            this.publicationRestService.search(query)
-                .then(publications => {
-                    this.publicationsSubject.next(publications);
-                })
-                .catch(error => {
-                    const errorMessage = $localize`An error occurred while retrieving your publications...`;
-                    this.snackBar.open(errorMessage, $localize`Close`, { duration: 5000 });
-                    console.error(errorMessage, error);
-                })
-                .finally(() => {
-                    this.isLoadingSubject.next(false);
-                    this.isLoadedSubject.next(true);
-                });
-        } else {
-            this.authenticationService.unauthenticate();
-            this.snackBar.open($localize`You are unauthenticated. Please, log-in first.`, $localize`Close`, { duration: 5000 });
-            this.router.navigate(['/login']);
-        }
-    }
-}
+  }
+}

frontend/src/app/pages/publication-creation/publication-creation.component.html

@@ -1,7 +1,7 @@
 <app-publication-edition
-    title="Creation of a new publication"
-    [publication]="publication" 
-    [isSaving$]="isSaving$"
-    (publicationSave)="onPublicationSave($event)"
-    i18n-title>
-</app-publication-edition>
+  title="Creation of a new publication"
+  [publication]="publication()"
+  [isSaving]="isSaving()"
+  (publicationSave)="onPublicationSave($event)"
+  i18n-title
+/>

frontend/src/app/pages/publication-creation/publication-creation.component.ts

@@ -1,74 +1,53 @@
-import { Component, inject, OnInit } from "@angular/core";
-import { PublicationEditionComponent } from "../../components/publication-edition/publication-edition.component";
-import { PublicationRestService } from "../../core/rest-services/publications/publication.rest-service";
-import { ActivatedRoute, Router } from "@angular/router";
-import { MatSnackBar } from "@angular/material/snack-bar";
-import { BehaviorSubject, Observable, Subscription } from "rxjs";
-import { Publication } from "../../core/rest-services/publications/model/publication";
-import { AuthenticationService } from "../../core/service/authentication.service";
-import { Author } from "../../core/rest-services/publications/model/author";
-
+import {Component, inject, OnInit, signal} from "@angular/core";
+import {PublicationEditionComponent} from "../../components/publication-edition/publication-edition.component";
+import {PublicationRestService} from "../../core/rest-services/publications/publication.rest-service";
+import {Router} from "@angular/router";
+import {MatSnackBar} from "@angular/material/snack-bar";
+import {DEFAULT_PUBLICATION, Publication} from "../../core/rest-services/publications/model/publication";
+import {AuthenticationService} from "../../core/service/authentication.service";
+import {Author} from "../../core/rest-services/publications/model/author";
 
 @Component({
-    selector: 'app-publication-creation',
-    templateUrl: './publication-creation.component.html',
-    styleUrl: './publication-creation.component.scss',
-    imports: [
+  selector: 'app-publication-creation',
+  templateUrl: './publication-creation.component.html',
+  styleUrl: './publication-creation.component.scss',
+  imports: [
     PublicationEditionComponent
-]
+  ]
 })
 export class PublicationCreationComponent implements OnInit {
-    private readonly authenticationService = inject(AuthenticationService);
-    private readonly publicationRestService = inject(PublicationRestService);
-    private readonly router = inject(Router);
-    private readonly snackBar = inject(MatSnackBar);
-    private isSavingSubject = new BehaviorSubject<boolean>(false);
-    private subscriptions: Subscription[] = [];
-    publication!: Publication;
+  readonly #authenticationService = inject(AuthenticationService);
+  readonly #publicationRestService = inject(PublicationRestService);
+  readonly #router = inject(Router);
+  readonly #snackBar = inject(MatSnackBar);
+  isSaving = signal(false);
+  publication = signal<Publication>(DEFAULT_PUBLICATION);
 
-    get isSaving$(): Observable<boolean> {
-        return this.isSavingSubject.asObservable();
+  ngOnInit(): void {
+    const authenticatedUser = this.#authenticationService.getAuthenticatedUser();
+    if (authenticatedUser) {
+      const author: Author = {
+        id: authenticatedUser.id,
+        name: authenticatedUser.pseudo,
+        image: authenticatedUser.photoId ?? ''
+      };
+      const newPublication: Publication = {...DEFAULT_PUBLICATION, author};
+      this.publication.set(newPublication);
     }
+  }
 
-    ngOnInit(): void {
-        const authenticatedUser = this.authenticationService.getAuthenticatedUser();
-        if (authenticatedUser) {
-            const author: Author = {
-                id: authenticatedUser.id,
-                name: authenticatedUser.pseudo,
-                image: authenticatedUser.photoId ?? ''
-            };
-            this.publication = {
-                id: '',
-                key: '',
-                title: '',
-                text: '',
-                parsedText: '',
-                description: '',
-                creationDate: new Date(),
-                illustrationId: '',
-                categoryId: '',
-                author
-            };
-        }
-    }
-
-    ngOnDestroy(): void {
-        this.subscriptions.forEach(subscription => subscription?.unsubscribe());
-    }
-
-    onPublicationSave(publication: Publication): void {
-        this.isSavingSubject.next(true);
-        this.publicationRestService.create(publication)
-            .then(() => {
-                this.snackBar.open($localize`Publication created succesfully!`, $localize`Close`, { duration: 5000 });
-                this.router.navigate(['/my-publications']);
-            })
-            .catch(error => {
-                const errorMessage = $localize`An error occured while saving new publication.`;
-                console.error(errorMessage, error);
-                this.snackBar.open(errorMessage, $localize`Close`, { duration: 5000 });
-            })
-            .finally(() => this.isSavingSubject.next(false));
-    }
-}
+  onPublicationSave(publication: Publication): void {
+    this.isSaving.set(true);
+    this.#publicationRestService.create(publication)
+      .then(() => {
+        this.#snackBar.open($localize`Publication created succesfully!`, $localize`Close`, {duration: 5000});
+        this.#router.navigate(['/my-publications']);
+      })
+      .catch(error => {
+        const errorMessage = $localize`An error occured while saving new publication.`;
+        console.error(errorMessage, error);
+        this.#snackBar.open(errorMessage, $localize`Close`, {duration: 5000});
+      })
+      .finally(() => this.isSaving.set(false));
+  }
+}

frontend/src/app/pages/publication-creation/publication-creation.routes.ts

@@ -1,7 +1,7 @@
-import { Route } from "@angular/router";
-import { authenticationGuard } from "../../core/guard/authentication.guard";
-import { PublicationCreationComponent } from "./publication-creation.component";
+import {Route} from "@angular/router";
+import {authenticationGuard} from "../../core/guard/authentication.guard";
+import {PublicationCreationComponent} from "./publication-creation.component";
 
 export const ROUTES: Route[] = [
-    { path: '', component: PublicationCreationComponent, canActivate: [authenticationGuard] }
-]
+  {path: '', component: PublicationCreationComponent, canActivate: [authenticationGuard]}
+]

frontend/src/app/pages/publication-update/publication-update.component.html

@@ -1,20 +1,18 @@
-@if ((isLoading$ | async) == true) {
-    <h2 i18n>Loading publication to edit...</h2>
-    <mat-spinner></mat-spinner>
-} 
-@else {
-    @if (publication) {
-        <app-publication-edition
-            title="Update publication {{ publication.title }}"
-            [publication]="publication"
-            [isSaving$]="isSaving$"
-            (publicationSave)="onPublicationSave($event)"
-            i18n-title>
-        </app-publication-edition>
-    }
-    @else {
-        <div class="loading-failed">
-            <h1 i18n>Publication failed to load...</h1>
-        </div>
-    }
-}
+@if (isLoading()) {
+  <h2 i18n>Loading publication to edit...</h2>
+  <mat-spinner/>
+} @else {
+  @if (publication(); as publication) {
+    <app-publication-edition
+      title="Update publication {{ publication.title }}"
+      [publication]="publication"
+      [isSaving]="isSaving()"
+      (publicationSave)="onPublicationSave($event)"
+      i18n-title
+    />
+  } @else {
+    <div class="loading-failed">
+      <h1 i18n>Publication failed to load...</h1>
+    </div>
+  }
+}

frontend/src/app/pages/publication-update/publication-update.component.scss

@@ -1,7 +1,7 @@
 :host {
-    display: flex;
+  display: flex;
 
-    app-publication-edition {
-        flex: 1;
-    }
-}
+  app-publication-edition {
+    flex: 1;
+  }
+}

frontend/src/app/pages/publication-update/publication-update.component.ts

@@ -1,93 +1,93 @@
-import { CommonModule, Location } from '@angular/common';
-import { Component, inject, OnDestroy, OnInit } from '@angular/core';
-import { ReactiveFormsModule } from '@angular/forms';
-import { MatDialogModule } from '@angular/material/dialog';
-import { MatIconModule } from '@angular/material/icon';
-import { MatInputModule } from '@angular/material/input';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import { MatSnackBar } from '@angular/material/snack-bar';
-import { MatTabsModule } from '@angular/material/tabs';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { ActivatedRoute, Router } from '@angular/router';
-import { BehaviorSubject, Observable, Subscription } from 'rxjs';
-import { PublicationEditionComponent } from '../../components/publication-edition/publication-edition.component';
-import { Publication } from '../../core/rest-services/publications/model/publication';
-import { PublicationRestService } from '../../core/rest-services/publications/publication.rest-service';
+import {CommonModule, Location} from '@angular/common';
+import {Component, effect, inject, Signal, signal} from '@angular/core';
+import {ReactiveFormsModule} from '@angular/forms';
+import {MatDialogModule} from '@angular/material/dialog';
+import {MatIconModule} from '@angular/material/icon';
+import {MatInputModule} from '@angular/material/input';
+import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
+import {MatSnackBar} from '@angular/material/snack-bar';
+import {MatTabsModule} from '@angular/material/tabs';
+import {MatTooltipModule} from '@angular/material/tooltip';
+import {ActivatedRoute, Router} from '@angular/router';
+import {PublicationEditionComponent} from '../../components/publication-edition/publication-edition.component';
+import {Publication} from '../../core/rest-services/publications/model/publication';
+import {PublicationRestService} from '../../core/rest-services/publications/publication.rest-service';
+import {toSignal} from "@angular/core/rxjs-interop";
+import {map} from "rxjs";
 
 @Component({
-    selector: 'app-publication-update',
-    imports: [
-        CommonModule,
-        MatDialogModule,
-        MatIconModule,
-        MatInputModule,
-        MatProgressSpinnerModule,
-        MatTabsModule,
-        MatTooltipModule,
-        ReactiveFormsModule,
-        PublicationEditionComponent
-    ],
-    templateUrl: './publication-update.component.html',
-    styleUrl: './publication-update.component.scss'
+  selector: 'app-publication-update',
+  imports: [
+    CommonModule,
+    MatDialogModule,
+    MatIconModule,
+    MatInputModule,
+    MatProgressSpinnerModule,
+    MatTabsModule,
+    MatTooltipModule,
+    ReactiveFormsModule,
+    PublicationEditionComponent
+  ],
+  templateUrl: './publication-update.component.html',
+  styleUrl: './publication-update.component.scss'
 })
-export class PublicationUpdateComponent implements OnInit, OnDestroy {
-  private readonly publicationRestService = inject(PublicationRestService);
-  private readonly activatedRoute = inject(ActivatedRoute);
-  private readonly location = inject(Location);
-  private readonly router = inject(Router);
-  private readonly snackBar = inject(MatSnackBar);
-  private isLoadingSubject = new BehaviorSubject<boolean>(false);
-  private isSavingSubject = new BehaviorSubject<boolean>(false);
-  private subscriptions: Subscription[] = [];
-  publication: Publication | undefined;
+export class PublicationUpdateComponent {
+  readonly #activatedRoute = inject(ActivatedRoute);
+  readonly #location = inject(Location);
+  readonly #publicationRestService = inject(PublicationRestService);
+  readonly #router = inject(Router);
+  readonly #snackBar = inject(MatSnackBar);
+  #isLoading = signal(false);
+  #isSavingSubject = signal(false);
+  publication = signal<Publication | undefined>(undefined);
 
-  get isLoading$(): Observable<boolean> {
-    return this.isLoadingSubject.asObservable();
+  #publicationId$ = this.#activatedRoute.params
+    .pipe(map(queryParams => queryParams['publicationId']));
+  #publicationId = toSignal(this.#publicationId$, {initialValue: undefined});
+
+  get isLoading(): Signal<boolean> {
+    return this.#isLoading.asReadonly();
   }
 
-  get isSaving$(): Observable<boolean> {
-    return this.isSavingSubject.asObservable();
+  get isSaving(): Signal<boolean> {
+    return this.#isSavingSubject.asReadonly();
   }
 
-  ngOnInit(): void {
-    this.isLoadingSubject.next(true);
-    const activatedRouteSubscription = this.activatedRoute.paramMap.subscribe(params => {
-        const publicationId = params.get('publicationId');
-        if (publicationId == undefined) {
-            this.snackBar.open($localize`A technical error occurred while loading publication data.`, $localize`Close`, { duration: 5000 });
-            this.location.back();
-        } else {
-            this.publicationRestService.getById(publicationId)
-            .then(publication => {
-              this.publication = publication;
-            })
-            .catch(error => {
-                const errorMessage = $localize`A technical error occurred while loading publication data.`;
-                this.snackBar.open(errorMessage, $localize`Close`, { duration: 5000 });
-                console.error(errorMessage, error)
-            })
-            .finally(() => this.isLoadingSubject.next(false));
-        }
-      });
-    this.subscriptions.push(activatedRouteSubscription);
-  }
+  constructor() {
+    effect(() => {
+      this.#isLoading.set(true);
 
-  ngOnDestroy(): void {
-    this.subscriptions.forEach(subscription => subscription?.unsubscribe());
+      const publicationId = this.#publicationId();
+      if (publicationId) {
+        this.#publicationRestService.getById(publicationId)
+          .then(publication => {
+            this.publication.set(publication);
+          })
+          .catch(error => {
+            const errorMessage = $localize`A technical error occurred while loading publication data.`;
+            this.#snackBar.open(errorMessage, $localize`Close`, {duration: 5000});
+            console.error(errorMessage, error)
+          })
+          .finally(() => this.#isLoading.set(false));
+      } else {
+        this.#snackBar.open($localize`A technical error occurred while loading publication data.`, $localize`Close`, {duration: 5000});
+        this.#location.back();
+      }
+    });
   }
 
   onPublicationSave(publication: Publication): void {
-    this.isSavingSubject.next(true);
-    this.publicationRestService.update(publication)
-        .then(() => {
-            this.snackBar.open($localize`Publication updated succesfully!`, $localize`Close`, { duration: 5000 });
-            this.router.navigate(['/home']);
-        })
-        .catch(error => {
-            const errorMessage = $localize`An error occured while saving publication modifications.`;
-            console.error(errorMessage, error);
-            this.snackBar.open(errorMessage, $localize`Close`, { duration: 5000 });
-        })
-        .finally(() => this.isSavingSubject.next(false));
+    this.#isSavingSubject.set(true);
+    this.#publicationRestService.update(publication)
+      .then(() => {
+        this.#snackBar.open($localize`Publication updated succesfully!`, $localize`Close`, {duration: 5000});
+        this.#router.navigate(['/home']);
+      })
+      .catch(error => {
+        const errorMessage = $localize`An error occured while saving publication modifications.`;
+        console.error(errorMessage, error);
+        this.#snackBar.open(errorMessage, $localize`Close`, {duration: 5000});
+      })
+      .finally(() => this.#isSavingSubject.set(false));
   }
 }

frontend/src/app/pages/publication-update/publication-update.routes.ts

@@ -1,7 +1,7 @@
-import { Route } from "@angular/router";
-import { PublicationUpdateComponent } from "./publication-update.component";
-import { authenticationGuard } from "../../core/guard/authentication.guard";
+import {Route} from "@angular/router";
+import {PublicationUpdateComponent} from "./publication-update.component";
+import {authenticationGuard} from "../../core/guard/authentication.guard";
 
 export const ROUTES: Route[] = [
-    { path: '', component: PublicationUpdateComponent, canActivate: [authenticationGuard] }
-]
+  {path: '', component: PublicationUpdateComponent, canActivate: [authenticationGuard]}
+]

frontend/src/app/pages/publication/publication.component.html

@@ -1,50 +1,50 @@
-@if (isLoading) {
-    <h2 i18n>Publication content loading...</h2>
-    <mat-spinner></mat-spinner>
+@if (isLoading()) {
+  <h2 i18n>Publication content loading...</h2>
+  <mat-spinner></mat-spinner>
 } @else {
-    @if (publication) {
-        <div class="card">
-            <img src="/api/pictures/{{ publication.illustrationId }}" />
-            <header>
-                <h1>{{ publication.title }}</h1>
-                <h2>{{ publication.description }}</h2>
-                @if (isAuthorAndUserEquals) {
-                    <a [routerLink]="['edit']"
-                        class="button action"
-                        matTooltip="Click to edit the publication"
-                        matRipple
-                        i18n-matTooltip>
-                        <mat-icon>edit</mat-icon>
-                    </a>
-                }
-            </header>
-            <main [innerHTML]="publication.parsedText"></main>
-            <footer>
-                <div class="metadata">
-                    <img src="/api/pictures/{{ publication.author.image }}" [matTooltip]="publication.author.name" />
-                    <div class="posting-data">
-                        <span i18n>Publication posted by {{ publication.author.name }}</span>
-                        <span class="publication-date">
+  @if (publication(); as publication) {
+    <div class="card">
+      <img src="/api/pictures/{{ publication.illustrationId }}"/>
+      <header>
+        <h1>{{ publication.title }}</h1>
+        <h2>{{ publication.description }}</h2>
+        @if (isAuthorAndUserEquals()) {
+          <a [routerLink]="['edit']"
+             class="button action"
+             matTooltip="Click to edit the publication"
+             matRipple
+             i18n-matTooltip>
+            <mat-icon>edit</mat-icon>
+          </a>
+        }
+      </header>
+      <main [innerHTML]="publication.parsedText"></main>
+      <footer>
+        <div class="metadata">
+          <img src="/api/pictures/{{ publication.author.image }}" [matTooltip]="publication.author.name"/>
+          <div class="posting-data">
+            <span i18n>Publication posted by {{ publication.author.name }}</span>
+            <span class="publication-date">
                             ({{ publication.creationDate | date: 'short' }})
                         </span>
-                    </div>
-                </div>
-                @if (isAuthorAndUserEquals) {
-                    <button type="button"
-                        (click)="deletePublication()"
-                        matTooltip="Click to delete the publication" 
-                        matTooltipPosition="left"
-                        matRipple
-                        i18n-matTooltip>
-                        <mat-icon>delete</mat-icon>
-                        Delete
-                    </button>
-                }
-            </footer>
+          </div>
         </div>
-    } @else {
-        <div class="loading-failed">
-            <h1 i18n>Publication failed to load...</h1>
-        </div>
-    }
-}
+        @if (isAuthorAndUserEquals()) {
+          <button type="button"
+                  (click)="deletePublication()"
+                  matTooltip="Click to delete the publication"
+                  matTooltipPosition="left"
+                  matRipple
+                  i18n-matTooltip>
+            <mat-icon>delete</mat-icon>
+            Delete
+          </button>
+        }
+      </footer>
+    </div>
+  } @else {
+    <div class="loading-failed">
+      <h1 i18n>Publication failed to load...</h1>
+    </div>
+  }
+}

frontend/src/app/pages/publication/publication.component.scss

@@ -1,140 +1,140 @@
 $cardBorderRadius: .5em;
 
 :host {
-    display: flex;
-    justify-content: center;
+  display: flex;
+  justify-content: center;
 
-    .card {
+  .card {
+    display: flex;
+    flex-direction: column;
+    margin: 1em;
+    max-width: 80em;
+    width: 90%;
+    border-radius: .5em;
+    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
+
+    img {
+      height: 12em;
+      object-fit: cover;
+      border-radius: $cardBorderRadius $cardBorderRadius 0 0;
+      transition: height .2s ease-in-out;
+
+      @media screen and (min-width: 450px) {
+        height: 15em;
+      }
+
+      @media screen and (min-width: 600px) {
+        height: 20em;
+      }
+
+      @media screen and (min-width: 750px) {
+        height: 25em;
+      }
+    }
+
+    header {
+      padding: 2em;
+      position: relative;
+
+      h1 {
+        font-size: 2em;
+        margin-bottom: .5em;
+      }
+
+      h2 {
+        font-size: 1.2em;
+        line-height: 1.6em;
+        margin: 0;
+        font-weight: 400;
+      }
+
+      a {
+        padding: .8em .8em;
+        border-radius: 10em;
+        border: none;
+        background-color: #3f51b5;
+        color: white;
+        transition: background-color .2s ease-in-out;
+        position: absolute;
+        top: -1.5em;
+        right: 3em;
         display: flex;
-        flex-direction: column;
-        margin: 1em;
-        max-width: 80em;
-        width: 90%;
-        border-radius: .5em;    
-        box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
+        justify-content: center;
+        align-items: center;
+
+        &:hover {
+          background-color: #5b6ed8;
+          cursor: pointer;
+        }
+      }
+    }
+
+    main {
+      border-top: 1px solid #dddddd;
+      margin: 0 2em 2em 2em;
+      padding-top: 2em;
+      text-align: justify;
+    }
+
+    footer {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      align-items: center;
+      background-color: #f0f0f0;
+      border-radius: 0 0 $cardBorderRadius $cardBorderRadius;
+      padding: 1em 2em;
+      gap: 1em;
+
+      @media screen and (min-width: 500px) {
+        flex-direction: row;
+      }
+
+      .metadata {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 1em;
 
         img {
-            height: 12em;
-            object-fit: cover;
-            border-radius: $cardBorderRadius $cardBorderRadius 0 0;
-            transition: height .2s ease-in-out;
-
-            @media screen and (min-width: 450px) {
-                height: 15em;
-            }
-
-            @media screen and (min-width: 600px) {
-                height: 20em;
-            }
-
-            @media screen and (min-width: 750px) {
-                height: 25em;
-            }
+          $imageSize: 4em;
+          border-radius: 10em;
+          width: $imageSize;
+          height: $imageSize;
+          object-fit: cover;
         }
 
-        header {
-            padding: 2em;
-            position: relative;
+        .posting-data {
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: start;
 
-            h1 {
-                font-size: 2em;
-                margin-bottom: .5em;
-            }
-
-            h2 {
-                font-size: 1.2em;
-                line-height: 1.6em;
-                margin: 0;
-                font-weight: 400;
-            }
-
-            a {
-                padding: .8em .8em;
-                border-radius: 10em;
-                border: none;
-                background-color: #3f51b5;
-                color: white;
-                transition: background-color .2s ease-in-out;
-                position: absolute;
-                top: -1.5em;
-                right: 3em;
-                display: flex;
-                justify-content: center;
-                align-items: center;
-
-                &:hover {
-                    background-color: #5b6ed8;
-                    cursor: pointer;
-                }
-            }
+          .publication-date {
+            font-style: italic;
+            color: #bdbdbd;
+          }
         }
+      }
 
-        main {
-            border-top: 1px solid #dddddd;
-            margin: 0 2em 2em 2em;
-            padding-top: 2em;
-            text-align: justify;
-        }
-
-        footer {
-            display: flex;
-            flex-direction: column;
-            justify-content: space-between;
-            align-items: center;
-            background-color: #f0f0f0;
-            border-radius: 0 0 $cardBorderRadius $cardBorderRadius;
-            padding: 1em 2em;
-            gap: 1em;
-
-            @media screen and (min-width: 500px) {
-                flex-direction: row;
-            }
-
-            .metadata {
-                display: flex;
-                flex-direction: row;
-                align-items: center;
-                gap: 1em;
-    
-                img {
-                    $imageSize: 4em;
-                    border-radius: 10em;
-                    width: $imageSize;
-                    height: $imageSize;
-                    object-fit: cover;
-                }
-    
-                .posting-data {
-                    display: flex;
-                    flex-direction: column;
-                    justify-content: center;
-                    align-items: start;
-
-                    .publication-date {
-                        font-style: italic;
-                        color: #bdbdbd;
-                    }
-                }
-            }
-
-            button {
-                padding: .8em 1.2em;
-                border-radius: 10em;
-                border: none;
-                background-color: #D50000;
-                color: white;
-                transition: background-color .2s ease-in-out;
-                display: flex;
-                flex-direction: row;
-                justify-content: center;
-                align-items: center;
-                gap: .5em;
-            
-                &:hover {
-                    background-color: #E53935;
-                    cursor: pointer;
-                }
-            }
+      button {
+        padding: .8em 1.2em;
+        border-radius: 10em;
+        border: none;
+        background-color: #D50000;
+        color: white;
+        transition: background-color .2s ease-in-out;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        gap: .5em;
+
+        &:hover {
+          background-color: #E53935;
+          cursor: pointer;
         }
+      }
     }
-}
+  }
+}

frontend/src/app/pages/publication/publication.component.ts

@@ -1,32 +1,32 @@
-import { CommonModule, Location } from '@angular/common';
-import { Component, OnDestroy, OnInit, inject } from '@angular/core';
-import { MatRippleModule } from '@angular/material/core';
-import { MatDialog } from '@angular/material/dialog';
-import { MatIcon } from '@angular/material/icon';
-import { MatProgressSpinner } from '@angular/material/progress-spinner';
-import { MatSnackBar } from '@angular/material/snack-bar';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { ActivatedRoute, RouterModule } from '@angular/router';
-import { Subscription } from 'rxjs';
-import { ConfirmationDialog } from '../../components/confirmation-dialog/confirmation-dialog.component';
-import { Publication } from '../../core/rest-services/publications/model/publication';
-import { PublicationRestService } from '../../core/rest-services/publications/publication.rest-service';
-import { AuthenticationService } from '../../core/service/authentication.service';
+import {CommonModule, Location} from '@angular/common';
+import {Component, inject, OnDestroy, OnInit, signal} from '@angular/core';
+import {MatRippleModule} from '@angular/material/core';
+import {MatDialog} from '@angular/material/dialog';
+import {MatIcon} from '@angular/material/icon';
+import {MatProgressSpinner} from '@angular/material/progress-spinner';
+import {MatSnackBar} from '@angular/material/snack-bar';
+import {MatTooltipModule} from '@angular/material/tooltip';
+import {ActivatedRoute, RouterModule} from '@angular/router';
+import {Subscription} from 'rxjs';
+import {ConfirmationDialog} from '../../components/confirmation-dialog/confirmation-dialog.component';
+import {Publication} from '../../core/rest-services/publications/model/publication';
+import {PublicationRestService} from '../../core/rest-services/publications/publication.rest-service';
+import {AuthenticationService} from '../../core/service/authentication.service';
 
 declare let Prism: any;
 
 @Component({
-    selector: 'app-publication',
-    templateUrl: './publication.component.html',
-    styleUrl: './publication.component.scss',
-    imports: [
-        CommonModule,
-        MatIcon,
-        MatRippleModule,
-        MatProgressSpinner,
-        MatTooltipModule,
-        RouterModule
-    ]
+  selector: 'app-publication',
+  templateUrl: './publication.component.html',
+  styleUrl: './publication.component.scss',
+  imports: [
+    CommonModule,
+    MatIcon,
+    MatRippleModule,
+    MatProgressSpinner,
+    MatTooltipModule,
+    RouterModule
+  ]
 })
 export class PublicationComponent implements OnInit, OnDestroy {
   private readonly activatedRoute = inject(ActivatedRoute);
@@ -37,35 +37,35 @@ export class PublicationComponent implements OnInit, OnDestroy {
   private readonly snackBar = inject(MatSnackBar);
   private paramMapSubscription?: Subscription;
   private afterDialogCloseSubscription?: Subscription;
-  isLoading: boolean = false;
-  isAuthorAndUserEquals: boolean = false;
-  publication?: Publication;
+  isLoading = signal(false);
+  isAuthorAndUserEquals = signal(false);
+  publication = signal<Publication | null>(null);
 
   ngOnInit(): void {
     this.paramMapSubscription = this.activatedRoute
-        .paramMap
-        .subscribe(params => {
-          const publicationId = params.get('publicationId');
+      .paramMap
+      .subscribe(params => {
+        const publicationId = params.get('publicationId');
 
-          if (publicationId) {
-            this.isLoading = true;
+        if (publicationId) {
+          this.isLoading.set(true);
 
-            this.publicationRestService.getById(publicationId)
-                .then(publication => {
-                  this.publication = publication;
-                  this.isAuthorAndUserEquals = this.authenticationService.getAuthenticatedUser()?.id === this.publication.author.id;
-                  setTimeout(() => Prism.highlightAll(), 100);
-                })
-                .catch(error => {
-                  const errorMessage = $localize`An error occurred while loading publication...`;
-                  this.snackBar.open(errorMessage, $localize`Close`, { duration: 5000 });
-                  console.error(errorMessage, error);
-                })
-                .finally(() => {
-                  this.isLoading = false;
-                });
-          }
-        });
+          this.publicationRestService.getById(publicationId)
+            .then(publication => {
+              this.publication.set(publication);
+              this.isAuthorAndUserEquals.set(this.authenticationService.getAuthenticatedUser()?.id === this.publication()?.author.id);
+              setTimeout(() => Prism.highlightAll(), 100);
+            })
+            .catch(error => {
+              const errorMessage = $localize`An error occurred while loading publication...`;
+              this.snackBar.open(errorMessage, $localize`Close`, {duration: 5000});
+              console.error(errorMessage, error);
+            })
+            .finally(() => {
+              this.isLoading.set(false);
+            });
+        }
+      });
   }
 
   ngOnDestroy(): void {
@@ -86,9 +86,10 @@ export class PublicationComponent implements OnInit, OnDestroy {
 
     this.afterDialogCloseSubscription = dialogRef.afterClosed()
       .subscribe(response => {
-        if (response && this.publication?.id) {
-          this.publicationRestService.delete(this.publication.id);
-          this.snackBar.open($localize`Publication deleted`, $localize`Close`, { duration: 5000 });
+        const publication = this.publication();
+        if (response && publication?.id) {
+          this.publicationRestService.delete(publication.id);
+          this.snackBar.open($localize`Publication deleted`, $localize`Close`, {duration: 5000});
           this.location.back();
         }
       });

frontend/src/app/pages/search-publications/search-publications.component.html

@@ -1,13 +1,13 @@
 <h1 i18n>Search results</h1>
-@if((isLoading$ | async) === true) {
-    <h2 i18n>Search in progress...</h2>
-    <mat-spinner></mat-spinner>
-} @else if((isLoaded$ | async) === true) {
-    @if((publications$ | async)?.length) {
-        <app-publication-list [publications$]="publications$"></app-publication-list>
-    } @else {
-        <span i18n>No any result.</span>
-    }
-} @else {
+@if (isLoading()) {
+  <h2 i18n>Search in progress...</h2>
+  <mat-spinner/>
+} @else if (isLoaded()) {
+  @if (publications().length) {
+    <app-publication-list [publications]="publications()"/>
+  } @else {
     <span i18n>No any result.</span>
+  }
+} @else {
+  <span i18n>No any result.</span>
 }

frontend/src/app/pages/search-publications/search-publications.component.scss

@@ -1,6 +1,6 @@
 :host {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-}
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}

frontend/src/app/pages/search-publications/search-publications.component.ts

@@ -1,51 +1,39 @@
-import { CommonModule } from "@angular/common";
-import { Component, inject, OnDestroy, OnInit } from "@angular/core";
-import { MatProgressSpinner } from "@angular/material/progress-spinner";
-import { ActivatedRoute } from "@angular/router";
-import { Observable, Subscription } from "rxjs";
-import { PublicationListComponent } from "../../components/publication-list/publication-list.component";
-import { Publication } from "../../core/rest-services/publications/model/publication";
-import { SearchPublicationsService } from "./search-publications.service";
+import {CommonModule} from "@angular/common";
+import {Component, effect, inject} from "@angular/core";
+import {MatProgressSpinner} from "@angular/material/progress-spinner";
+import {ActivatedRoute} from "@angular/router";
+import {PublicationListComponent} from "../../components/publication-list/publication-list.component";
+import {SearchPublicationsService} from "./search-publications.service";
+import {toSignal} from "@angular/core/rxjs-interop";
 
 @Component({
-    selector: 'app-search-publications',
-    templateUrl: './search-publications.component.html',
-    styleUrl: './search-publications.component.scss',
-    imports: [CommonModule, MatProgressSpinner, PublicationListComponent],
-    providers: [SearchPublicationsService]
+  selector: 'app-search-publications',
+  templateUrl: './search-publications.component.html',
+  styleUrl: './search-publications.component.scss',
+  imports: [CommonModule, MatProgressSpinner, PublicationListComponent],
+  providers: [SearchPublicationsService]
 })
-export class SearchPublicationsComponent implements OnInit, OnDestroy {
-    private searchPublicationsService = inject(SearchPublicationsService);
-    private activatedRoute = inject(ActivatedRoute);
-    private queryParamsSubscription?: Subscription;
+export class SearchPublicationsComponent {
+  private searchPublicationsService = inject(SearchPublicationsService);
+  private activatedRoute = inject(ActivatedRoute);
+  publications = this.searchPublicationsService.publications;
+  isLoading = this.searchPublicationsService.isLoading;
+  isLoaded = this.searchPublicationsService.isLoaded;
 
-    ngOnInit(): void {
-        this.queryParamsSubscription = this.activatedRoute.queryParamMap
-            .subscribe(params => {  
-                const categoryId = params.get('category-id');
-                if (categoryId) {
-                    this.searchPublicationsService.loadPublications(`category_id=${categoryId}`);
-                }
-                const query = params.get('query')
-                if (query) {
-                    this.searchPublicationsService.loadPublications(query);
-                }
-            });
-    }
-
-    ngOnDestroy(): void {
-        this.queryParamsSubscription?.unsubscribe();
-    }
-
-    get publications$(): Observable<Publication[]> {
-        return this.searchPublicationsService.publications$;
-    }
-
-    get isLoading$(): Observable<boolean> {
-        return this.searchPublicationsService.isLoading$;
-    }
-
-    get isLoaded$(): Observable<boolean> {
-        return this.searchPublicationsService.isLoaded$;
-    }
-}
+  constructor() {
+    const queryParams = toSignal(this.activatedRoute.queryParamMap);
+    effect(() => {
+      let params = queryParams();
+      if (params) {
+        const categoryId = params.get('category-id');
+        if (categoryId) {
+          this.searchPublicationsService.loadPublications(`category_id=${categoryId}`);
+        }
+        const query = params.get('query')
+        if (query) {
+          this.searchPublicationsService.loadPublications(query);
+        }
+      }
+    });
+  }
+}

frontend/src/app/pages/search-publications/search-publications.service.ts

@@ -1,49 +1,47 @@
-import { inject, Injectable } from "@angular/core";
-import { PublicationRestService } from "../../core/rest-services/publications/publication.rest-service";
-import { BehaviorSubject, Observable } from "rxjs";
-import { Publication } from "../../core/rest-services/publications/model/publication";
-import { MatSnackBar } from "@angular/material/snack-bar";
-
+import {inject, Injectable, Signal, signal} from "@angular/core";
+import {PublicationRestService} from "../../core/rest-services/publications/publication.rest-service";
+import {Publication} from "../../core/rest-services/publications/model/publication";
+import {MatSnackBar} from "@angular/material/snack-bar";
 
 @Injectable()
 export class SearchPublicationsService {
-    private publicationRestService = inject(PublicationRestService);
-    private publicationsSubject = new BehaviorSubject<Publication[]>([]);
-    private isLoadingSubject = new BehaviorSubject<boolean>(false);
-    private isLoadedSubject = new BehaviorSubject<boolean>(false);
-    private snackBar = inject(MatSnackBar);
+  #snackBar = inject(MatSnackBar);
+  #publicationRestService = inject(PublicationRestService);
+  #publications = signal<Publication[]>([]);
+  #isLoading = signal(false);
+  #isLoaded = signal(false);
 
-    get publications$(): Observable<Publication[]> {
-        return this.publicationsSubject.asObservable();
-    }
-    
-    get isLoading$(): Observable<boolean> {
-        return this.isLoadingSubject.asObservable();
-    }
+  get publications(): Signal<Publication[]> {
+    return this.#publications.asReadonly();
+  }
 
-    get isLoaded$(): Observable<boolean> {
-        return this.isLoadedSubject.asObservable();
-    }
+  get isLoading(): Signal<boolean> {
+    return this.#isLoading.asReadonly();
+  }
 
-    loadPublications(searchCriteria: string): void {
-         this.isLoadingSubject.next(true);
-         this.isLoadedSubject.next(false);
-         this.publicationsSubject.next([]);
+  get isLoaded(): Signal<boolean> {
+    return this.#isLoaded.asReadonly();
+  }
 
-         this.publicationRestService.search(searchCriteria)
-            .then(publications => {
-                this.publicationsSubject.next(publications);
-            })
-            .catch(error => {
-                if (error.status !== 404) {
-                    const errorMessage = $localize`An error occured while retrieving publications.`;
-                    console.error(errorMessage, error);
-                    this.snackBar.open(errorMessage, $localize`Close`, { duration: 5000 });
-                }
-            })
-            .finally(() => {
-                this.isLoadingSubject.next(false);
-                this.isLoadedSubject.next(true);
-            });
-    }
-}
+  loadPublications(searchCriteria: string): void {
+    this.#isLoading.set(true);
+    this.#isLoaded.set(false);
+    this.#publications.set([]);
+
+    this.#publicationRestService.search(searchCriteria)
+      .then(publications => {
+        this.#publications.set(publications);
+      })
+      .catch(error => {
+        if (error.status !== 404) {
+          const errorMessage = $localize`An error occured while retrieving publications.`;
+          console.error(errorMessage, error);
+          this.#snackBar.open(errorMessage, $localize`Close`, {duration: 5000});
+        }
+      })
+      .finally(() => {
+        this.#isLoading.set(false);
+        this.#isLoaded.set(true);
+      });
+  }
+}

frontend/src/app/pages/signin/signin.component.html

@@ -1,39 +1,39 @@
 <form [formGroup]="signinForm" (submit)="performSignin()" class="cod-form card" ngNativeValidate>
-    <h1 i18n>Signin</h1>
-    <div class="form-field">
-        <mat-icon>person</mat-icon>
-        <label for="pseudo" i18n>
-            Pseudo
-            <span class="required">*</span>
-        </label>
-        <input type="text" id="pseudo" formControlName="pseudo" autocomplete="pseudo" required />
-    </div>
-    <div class="form-field">
-        <mat-icon>mail</mat-icon>
-        <label for="email" i18n>
-            Email address
-            <span class="required">*</span>
-        </label>
-        <input type="email" id="email" formControlName="email" autocomplete="email" required />
-    </div>
-    <div class="form-field">
-        <mat-icon>lock</mat-icon>
-        <label for="password" i18n>
-            Password
-            <span class="required">*</span>
-        </label>
-        <input type="password" id="password" formControlName="password" required />
-    </div>
-    <div class="form-field">
-        <mat-icon>lock</mat-icon>
-        <label for="confirm-password" i18n>
-            Confirm password
-            <span class="required">*</span>
-        </label>
-        <input type="password" id="confirm-password" formControlName="confirmPassword" required />
-    </div>
-    <div class="actions reversed">
-        <app-submit-button [requestPending]="false" [disabled]="false" i18n>Send</app-submit-button>
-        <a [routerLink]="['/login']" class="cod-button secondary" matRipple i18n>I already have an account</a>
-    </div>
-</form>
+  <h1 i18n>Signin</h1>
+  <div class="form-field">
+    <mat-icon>person</mat-icon>
+    <label for="pseudo" i18n>
+      Pseudo
+      <span class="required">*</span>
+    </label>
+    <input type="text" id="pseudo" formControlName="pseudo" autocomplete="pseudo" required/>
+  </div>
+  <div class="form-field">
+    <mat-icon>mail</mat-icon>
+    <label for="email" i18n>
+      Email address
+      <span class="required">*</span>
+    </label>
+    <input type="email" id="email" formControlName="email" autocomplete="email" required/>
+  </div>
+  <div class="form-field">
+    <mat-icon>lock</mat-icon>
+    <label for="password" i18n>
+      Password
+      <span class="required">*</span>
+    </label>
+    <input type="password" id="password" formControlName="password" required/>
+  </div>
+  <div class="form-field">
+    <mat-icon>lock</mat-icon>
+    <label for="confirm-password" i18n>
+      Confirm password
+      <span class="required">*</span>
+    </label>
+    <input type="password" id="confirm-password" formControlName="confirmPassword" required/>
+  </div>
+  <div class="actions reversed">
+    <app-submit-button [requestPending]="false" [disabled]="false" i18n>Send</app-submit-button>
+    <a [routerLink]="['/login']" class="cod-button secondary" matRipple i18n>I already have an account</a>
+  </div>
+</form>

frontend/src/app/pages/signin/signin.component.scss

@@ -1,7 +1,7 @@
 :host {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    padding: 1em;
-}
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 1em;
+}

frontend/src/app/pages/signin/signin.component.ts

@@ -1,26 +1,26 @@
-import { Component, OnDestroy, OnInit, inject } from '@angular/core';
-import { FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
-import { MatIconModule } from '@angular/material/icon';
-import { RouterModule } from '@angular/router';
-import { Subscription, debounceTime, distinctUntilChanged, map } from 'rxjs';
-import { SigninService } from './signin.service';
-import { LoginService } from '../login/login.service';
-import { FormError } from '../../core/model/FormError';
-import { SubmitButtonComponent } from "../../components/submit-button/submit-button.component";
-import { MatRippleModule } from '@angular/material/core';
+import {Component, inject, OnDestroy, OnInit} from '@angular/core';
+import {FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
+import {MatIconModule} from '@angular/material/icon';
+import {RouterModule} from '@angular/router';
+import {debounceTime, distinctUntilChanged, map, Subscription} from 'rxjs';
+import {SigninService} from './signin.service';
+import {LoginService} from '../login/login.service';
+import {FormError} from '../../core/model/FormError';
+import {SubmitButtonComponent} from "../../components/submit-button/submit-button.component";
+import {MatRippleModule} from '@angular/material/core';
 
 @Component({
-    selector: 'app-signin',
-    templateUrl: './signin.component.html',
-    styleUrl: './signin.component.scss',
-    imports: [
-        MatIconModule,
-        MatRippleModule,
-        ReactiveFormsModule,
-        RouterModule,
-        SubmitButtonComponent
-    ],
-    providers: [SigninService, LoginService]
+  selector: 'app-signin',
+  templateUrl: './signin.component.html',
+  styleUrl: './signin.component.scss',
+  imports: [
+    MatIconModule,
+    MatRippleModule,
+    ReactiveFormsModule,
+    RouterModule,
+    SubmitButtonComponent
+  ],
+  providers: [SigninService, LoginService]
 })
 export class SigninComponent implements OnInit, OnDestroy {
   private signinService = inject(SigninService);
@@ -38,63 +38,63 @@ export class SigninComponent implements OnInit, OnDestroy {
 
   ngOnInit(): void {
     const pseudoSubscription = this.signinForm.controls['pseudo'].valueChanges
-        .pipe(
-          debounceTime(300),
-          distinctUntilChanged(),
-          map(value => value?.length ? value as string : '')
-        )
-        .subscribe(pseudo => {
-          this.signinService.editPseudo(pseudo);
-        });
+      .pipe(
+        debounceTime(300),
+        distinctUntilChanged(),
+        map(value => value?.length ? value as string : '')
+      )
+      .subscribe(pseudo => {
+        this.signinService.editPseudo(pseudo);
+      });
     this.subscriptions.push(pseudoSubscription);
 
     const emailSubscription = this.signinForm.controls['email'].valueChanges
-        .pipe(
-          debounceTime(300),
-          distinctUntilChanged(),
-          map(value => value?.length ? value as string : '')
-        )
-        .subscribe(email => {
-          this.signinService.editEmail(email);
-        });
+      .pipe(
+        debounceTime(300),
+        distinctUntilChanged(),
+        map(value => value?.length ? value as string : '')
+      )
+      .subscribe(email => {
+        this.signinService.editEmail(email);
+      });
     this.subscriptions.push(emailSubscription);
 
     const passwordSubscription = this.signinForm.controls['password'].valueChanges
-        .pipe(
-          debounceTime(300),
-          distinctUntilChanged(),
-          map(value => value?.length ? value as string : '')
-        )
-        .subscribe(password => {
-          this.signinService.editPassword(password);
-        });
+      .pipe(
+        debounceTime(300),
+        distinctUntilChanged(),
+        map(value => value?.length ? value as string : '')
+      )
+      .subscribe(password => {
+        this.signinService.editPassword(password);
+      });
     this.subscriptions.push(passwordSubscription);
 
     const confirmPasswordSubscription = this.signinForm.controls['confirmPassword'].valueChanges
-        .pipe(
-          debounceTime(300),
-          distinctUntilChanged(),
-          map(value => value?.length ? value as string : '')
-        )
-        .subscribe(confirmPassword => {
-          this.signinService.editConfirmPassword(confirmPassword);
-        });
+      .pipe(
+        debounceTime(300),
+        distinctUntilChanged(),
+        map(value => value?.length ? value as string : '')
+      )
+      .subscribe(confirmPassword => {
+        this.signinService.editConfirmPassword(confirmPassword);
+      });
     this.subscriptions.push(confirmPasswordSubscription);
 
     const stateSubscription = this.signinService.state$
-        .subscribe(state => {
-          this.signinForm.controls['pseudo'].setValue(state.request.pseudo, { emitEvent: false });
-          this.signinForm.controls['email'].setValue(state.request.email, { emitEvent: false });
-          this.signinForm.controls['password'].setValue(state.request.password, { emitEvent: false });
-          this.signinForm.controls['confirmPassword'].setValue(state.confirmPassword, { emitEvent: false });
-        });
+      .subscribe(state => {
+        this.signinForm.controls['pseudo'].setValue(state.request.pseudo, {emitEvent: false});
+        this.signinForm.controls['email'].setValue(state.request.email, {emitEvent: false});
+        this.signinForm.controls['password'].setValue(state.request.password, {emitEvent: false});
+        this.signinForm.controls['confirmPassword'].setValue(state.confirmPassword, {emitEvent: false});
+      });
     this.subscriptions.push(stateSubscription);
   }
 
   ngOnDestroy(): void {
     this.subscriptions.forEach(subscription => subscription.unsubscribe());
   }
-  
+
   performSignin(): void {
     if (this.signinForm.valid) {
       this.signinService.performSignin();

frontend/src/app/pages/signin/signin.service.ts

@@ -1,12 +1,12 @@
-import { Injectable, inject } from '@angular/core';
-import { SigninRequest } from '../../core/rest-services/user/model/signin.model';
-import { FormError } from '../../core/model/FormError';
-import { BehaviorSubject, Observable } from 'rxjs';
-import { copy } from '../../core/utils/ObjectUtils';
-import { UserRestService } from '../../core/rest-services/user/user.rest-service';
-import { MatSnackBar } from '@angular/material/snack-bar';
-import { Router } from '@angular/router';
-import { LoginService } from '../login/login.service';
+import {inject, Injectable} from '@angular/core';
+import {SigninRequest} from '../../core/rest-services/user/model/signin.model';
+import {FormError} from '../../core/model/FormError';
+import {BehaviorSubject, Observable} from 'rxjs';
+import {copy} from '../../core/utils/ObjectUtils';
+import {UserRestService} from '../../core/rest-services/user/user.rest-service';
+import {MatSnackBar} from '@angular/material/snack-bar';
+import {Router} from '@angular/router';
+import {LoginService} from '../login/login.service';
 
 export interface SigninState {
   request: SigninRequest;
@@ -74,12 +74,12 @@ export class SigninService {
     state.confirmPassword = newConfirmPassword;
 
     if (state.request.password !== state.confirmPassword) {
-        const confirmPasswordError: FormError = {
-            fieldName: 'confirmPassword',
-            errorMessage: $localize`Typed passwords are different.`
-        }
-        state.errors.filter(error => error.fieldName !== 'confirmPassword');
-        state.errors.push(confirmPasswordError)
+      const confirmPasswordError: FormError = {
+        fieldName: 'confirmPassword',
+        errorMessage: $localize`Typed passwords are different.`
+      }
+      state.errors.filter(error => error.fieldName !== 'confirmPassword');
+      state.errors.push(confirmPasswordError)
     }
 
     this.save(state);
@@ -91,12 +91,12 @@ export class SigninService {
     // Check state is valid
 
     this.userRestService
-        .signin(state.request)
-        .then(() => {
-            this.loginService.editEmail(state.request.email!!);
-            this.loginService.editPassword(state.request.password!!);
+      .signin(state.request)
+      .then(() => {
+        this.loginService.editEmail(state.request.email!!);
+        this.loginService.editPassword(state.request.password!!);
 
-            this.loginService.performLogin();
-        })
+        this.loginService.performLogin();
+      })
   }
 }

frontend/src/design_system/button.scss

@@ -1,43 +1,43 @@
 button.cod-button, a.cod-button {
-    padding: .8em 1.2em;
-    border-radius: 10em;
-    border: none;
-    background-color: #3f51b5;
-    color: white;
-    transition: background-color .2s ease-in-out;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+  padding: .8em 1.2em;
+  border-radius: 10em;
+  border: none;
+  background-color: #3f51b5;
+  color: white;
+  transition: background-color .2s ease-in-out;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  &:hover {
+    background-color: #5b6ed8;
+    cursor: pointer;
+  }
+
+  &.secondary {
+    color: #3f51b5;
+    background-color: white;
 
     &:hover {
-        background-color: #5b6ed8;
-        cursor: pointer;
+      background-color: #f2f4ff;
     }
+  }
 
-    &.secondary {
-        color: #3f51b5;
-        background-color: white;
-    
-        &:hover {
-            background-color: #f2f4ff;
-        }
-    }
-
-    &.icon {
-        $buttonSize: 2.5em;
-        width: $buttonSize;
-        height: $buttonSize;
-        padding: 0;
-
-        &.close {
-            position: absolute;
-            top: 1em;
-            right: 1em;
-            color: black;
-        }
+  &.icon {
+    $buttonSize: 2.5em;
+    width: $buttonSize;
+    height: $buttonSize;
+    padding: 0;
+
+    &.close {
+      position: absolute;
+      top: 1em;
+      right: 1em;
+      color: black;
     }
+  }
 }
 
 a.cod-button {
-    text-decoration: none;
-}
+  text-decoration: none;
+}

frontend/src/design_system/form.scss

@@ -1,64 +1,64 @@
 form.cod-form {
-    &.card {
-        width: 80%;
-        max-width: 20em;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        gap: 1em;
-        box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
-        border-radius: .5em;
-        padding: 1em 1.5em;
-        background-color: #ffffff;
+  &.card {
+    width: 80%;
+    max-width: 20em;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 1em;
+    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
+    border-radius: .5em;
+    padding: 1em 1.5em;
+    background-color: #ffffff;
+  }
+
+  h1 {
+    margin: 0;
+  }
+
+  div {
+    &.actions {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+
+      &.reversed {
+        flex-direction: row-reverse;
+      }
     }
 
-    h1 {
-        margin: 0;
-    }
+    &.form-field {
+      display: flex;
+      flex-direction: column;
+      position: relative;
+      gap: .1em;
 
-    div {
-        &.actions {
-            display: flex;
-            flex-direction: row;
-            justify-content: space-between;
-            align-items: center;
+      mat-icon {
+        position: absolute;
+        top: 1.3em;
+        left: .5em;
+        color: #777;
+      }
 
-            &.reversed {
-                flex-direction: row-reverse;
-            }
+      label {
+        flex: 1;
+        font-style: italic;
+        padding-left: 1em;
+        color: #777;
+
+        .required {
+          color: red;
         }
+      }
 
-        &.form-field {
-            display: flex;
-            flex-direction: column;
-            position: relative;
-            gap: .1em;
-    
-            mat-icon {
-                position: absolute;
-                top: 1.3em;
-                left: .5em;
-                color: #777;
-            }
-    
-            label {
-                flex: 1;
-                font-style: italic;
-                padding-left: 1em;
-                color: #777;
-    
-                .required {
-                    color: red;
-                }
-            }
-    
-            input {
-                flex: 1;
-                background-color: #eeeeee;
-                border: none;
-                border-radius: 10em;
-                padding: 1em 1em 1em 3em;
-            }
-        }
+      input {
+        flex: 1;
+        background-color: #eeeeee;
+        border: none;
+        border-radius: 10em;
+        padding: 1em 1em 1em 3em;
+      }
     }
-}
+  }
+}

frontend/src/index.html

@@ -8,11 +8,11 @@
   <link rel="icon" type="image/x-icon" href="assets/images/favicon.ico">
   <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">
-  <link href="./assets/css/prism.css" rel="stylesheet" />
+  <link href="./assets/css/prism.css" rel="stylesheet"/>
 </head>
 <body class="mat-typography">
-  <app-root></app-root>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.8/clipboard.min.js"></script>
-  <script type="text/javascript" src="./assets/js/prism.js"></script>
+<app-root></app-root>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.8/clipboard.min.js"></script>
+<script type="text/javascript" src="./assets/js/prism.js"></script>
 </body>
 </html>