Try fix database update.

.gitea/workflows/build-and-deploy.yml

@@ -4,6 +4,7 @@ on:
   push:
     branches:
       - main
+      - update-dependencies
 
 jobs:
   build-and-deploy:

Dockerfile-frontend

@@ -1,4 +1,4 @@
-FROM node:25-alpine AS builder
+FROM node:24-alpine AS builder
 WORKDIR /app
 COPY frontend /app
 RUN npm install

backend/docker-compose.yml

@@ -3,7 +3,7 @@ version: '3.9'
 services:
   codiki-database:
     container_name: "codiki-database"
-    image: "postgres:16"
+    image: "postgres:17"
     ports:
       - "50001:5432"
     networks:

docker-compose.yml

@@ -1,6 +1,6 @@
 services:
   codiki-database:
-    image: "postgres:16"
+    image: "postgres:17"
     container_name: "codiki-database"
     ports:
       - "50010:5432"

frontend/angular.json

@@ -30,6 +30,7 @@
             "index": "src/index.html",
             "browser": "src/main.ts",
             "polyfills": [
+              "zone.js",
               "@angular/localize/init"
             ],
             "tsConfig": "tsconfig.app.json",
@@ -132,6 +133,8 @@
           "builder": "@angular/build:karma",
           "options": {
             "polyfills": [
+              "zone.js",
+              "zone.js/testing"
             ],
             "tsConfig": "tsconfig.spec.json",
             "inlineStyleLanguage": "scss",

frontend/package.json

@@ -17,26 +17,32 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^21.1.2",
+    "@angular/animations": "^21.0.6",
-    "@angular/cdk": "^21.1.2",
+    "@angular/cdk": "^21.0.5",
-    "@angular/common": "^21.1.2",
+    "@angular/common": "^21.0.6",
-    "@angular/compiler": "^21.1.2",
+    "@angular/compiler": "^21.0.6",
-    "@angular/core": "^21.1.2",
+    "@angular/core": "^21.0.6",
-    "@angular/forms": "^21.1.2",
+    "@angular/forms": "^21.0.6",
-    "@angular/material": "^21.1.2",
+    "@angular/material": "^21.0.5",
-    "@angular/platform-browser": "^21.1.2",
+    "@angular/platform-browser": "^21.0.6",
-    "@angular/platform-browser-dynamic": "^21.1.2",
+    "@angular/platform-browser-dynamic": "^21.0.6",
-    "@angular/router": "^21.1.2",
+    "@angular/router": "^21.0.6",
-    "rxjs": "~7.8.2",
+    "rxjs": "~7.8.0",
-    "tslib": "^2.8.1"
+    "tslib": "^2.3.0",
+    "zone.js": "~0.15.1"
   },
   "devDependencies": {
-    "@angular/build": "^21.1.2",
+    "@angular/build": "^21.0.4",
-    "@angular/cli": "^21.1.2",
+    "@angular/cli": "^21.0.4",
-    "@angular/compiler-cli": "^21.1.2",
+    "@angular/compiler-cli": "^21.0.6",
-    "@angular/localize": "^21.1.2",
+    "@angular/localize": "^21.0.6",
-    "@types/jasmine": "~5.1.15",
+    "@types/jasmine": "~5.1.0",
-    "jasmine-core": "~5.13.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",
     "typescript": "~5.9.3"
   }
 }

frontend/src/app/app.component.ts

@@ -1,3 +1,4 @@
+
 import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 import { HeaderComponent } from './components/header/header.component';

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

@@ -1,4 +1,4 @@
-import {Component, inject} from "@angular/core";
+import { Component, inject, Input } from "@angular/core";
 import { MatRippleModule } from "@angular/material/core";
 import { MAT_DIALOG_DATA, MatDialogRef } from "@angular/material/dialog";
 

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

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

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

@@ -12,12 +12,10 @@
         display: flex;
         flex-direction: row;
         align-items: center;
-    gap: .2em;
 
         .copy-left {
             transform: rotate(180deg);
         }
-
         a {
             text-decoration: none;
             color: rgba(255,255,255,.6);

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

@@ -10,4 +10,5 @@ import {RouterModule} from '@angular/router';
     styleUrl: './footer.component.scss'
 })
 export class FooterComponent {
+
 }

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

@@ -1,3 +1,4 @@
+
 import { Component, inject } from '@angular/core';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';

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

@@ -10,14 +10,13 @@
     <h1 i18n>Select an illustration</h1>
 </header>
 <div class="picture-container">
-  @if (isLoading()) {
+    @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"
+                <img src="/api/pictures/{{picture.id}}" (click)="selectPicture(picture)" matTooltip="Choose this illustration" i18n-matTooltip/>
-             i18n-matTooltip/>
             }
         } @else {
             <h2 i18n>There is no any picture.</h2>

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

@@ -1,4 +1,4 @@
-import {Component, inject, OnInit, signal} from "@angular/core";
+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";
@@ -24,12 +24,12 @@ export class PictureSelectionDialog implements OnInit {
     private readonly snackBar = inject(MatSnackBar);
     private readonly dialogRef = inject(MatDialogRef<PictureSelectionDialog>);
 
-  isLoading = signal(false);
+    isLoading: boolean = false;
-  isLoaded = signal(false);
+    isLoaded: boolean = false;
     pictures: Picture[] = [];
 
     ngOnInit(): void {
-    this.isLoading.set(true);
+        this.isLoading = true;
         this.pictureRestService.getAllOfCurrentUser()
             .then(pictures => {
                 this.pictures = pictures;
@@ -38,14 +38,14 @@ export class PictureSelectionDialog implements OnInit {
                 if (error.status === 401) {
                     this.dialogRef.close();
                 } else {
-          const errorMessage = $localize`An error occurred while loading pictures.`;
+                    const errorMessage = $localize`An error occured while loading pictures.`;
                     console.error(errorMessage, error);
                     this.snackBar.open(errorMessage, $localize`Close`, { duration: 5000 });
                 }
             })
             .finally(() => {
-        this.isLoading.set(false);
+                this.isLoading = false;
-        this.isLoaded.set(true);
+                this.isLoaded = true;
             });
     }
 
@@ -65,7 +65,7 @@ export class PictureSelectionDialog implements OnInit {
                     this.dialogRef.close(pictureId);
                 })
                 .catch(error => {
-          const errorMessage = $localize`A technical error occurred while uploading your picture.`;
+                    const errorMessage = $localize`A technical error occured while uploading your picture.`;
                     console.error(errorMessage, error);
                     this.snackBar.open(errorMessage, $localize`Close`, { duration: 5000 });
                 });

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

@@ -1,6 +1,6 @@
 <form [formGroup]="publicationEditionForm" (submit)="save()" ngNativeValidate>
     <header>
-    <h1>{{ title() }}</h1>
+        <h1>{{title}}</h1>
     </header>
 
     <mat-tab-group dynamicHeight (selectedIndexChange)="onTabChange($event)">
@@ -29,8 +29,7 @@
                     </div>
 
                     <div class="picture-container">
-            <img
+                        <img [src]="publication.illustrationId.length ? '/api/pictures/' + publication.illustrationId : '/assets/images/default-picture.png'"
-              [src]="publication().illustrationId.length ? '/api/pictures/' + publication().illustrationId : '/assets/images/default-picture.png'"
                             (click)="displayPictureSectionDialog()"
                             matTooltip="Click to change illustration"
                             i18n-matTooltip/>
@@ -104,24 +103,24 @@
 
         <mat-tab label="Previewing" i18n-label>
             <div class="preview">
-        @if (isPreviewing()) {
+                @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 }}"/>
+                    <img class="illustration" src="/api/pictures/{{ publication.illustrationId }}" />
                     <header>
-            <h1>{{ publication().title }}</h1>
+                        <h1>{{ publication.title }}</h1>
-            <h2>{{ publication().description }}</h2>
+                        <h2>{{ publication.description }}</h2>
                     </header>
-          <main [innerHTML]="publicationInEdition().parsedText"></main>
+                    <main [innerHTML]="publicationInEdition.parsedText"></main>
                 }
             </div>
         </mat-tab>
     </mat-tab-group>
     <footer>
-    <app-submit-button [requestPending]="isSaving()" i18n>Save</app-submit-button>
+        <app-submit-button [requestPending]="!!(isSaving$ | async)" i18n>Save</app-submit-button>
         <button type="button"
                 class="cod-button secondary" 
                 (click)="goPreviousLocation()" 

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

@@ -1,5 +1,5 @@
 import { CommonModule, Location } from "@angular/common";
-import {Component, effect, inject, input, output, signal} from "@angular/core";
+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";
@@ -8,11 +8,12 @@ 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 { map, Observable, of, Subscription } from "rxjs";
 import { Category } from "../../core/rest-services/category/model/category";
-import {DEFAULT_PUBLICATION, Publication} from "../../core/rest-services/publications/model/publication";
+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";
 
@@ -35,37 +36,36 @@ import {MatRippleModule} from "@angular/material/core";
     ],
     providers: [PublicationEditionService]
 })
-export class PublicationEditionComponent {
+export class PublicationEditionComponent implements OnChanges, OnDestroy {
-  readonly #categoryService = inject(CategoryService);
+    @Input()
-  readonly #location = inject(Location);
+    publication!: Publication;
-  readonly #publicationEditionService = inject(PublicationEditionService);
+    @Input()
+    title!: string;
+    @Input()
+    isSaving$: Observable<boolean> = of(false);
+    @Output()
+    publicationSave = new EventEmitter<Publication>();
 
-  publication = input.required<Publication>();
+    publicationInEdition!: Publication;
-  title = input.required<string>();
+    private readonly categoryService = inject(CategoryService);
-  isSaving = input.required<boolean>();
+    private readonly location = inject(Location);
-  publicationSave = output<Publication>();
+    private readonly publicationEditionService = inject(PublicationEditionService);
-
+    private subscriptions: Subscription[] = [];
-  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;
+        return this.publicationEditionService.publicationEditionForm;
+    }
+
+    get isLoading$(): Observable<boolean> {
+        return this.publicationEditionService.isLoading$;
+    }
+
+    get isPreviewing$(): Observable<boolean> {
+        return this.publicationEditionService.isPreviewing$;
     }
 
     get categories$(): Observable<Category[]> {
-    return this.#categoryService.categories$
+        return this.categoryService.categories$
             .pipe(
                 map(categories =>
                     categories.filter(category => category.subCategories.length == 0)
@@ -88,28 +88,41 @@ export class PublicationEditionComponent {
         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();
+        this.location.back();
     }
 
     insertTitle(titleNumber: number): void {
-    this.#publicationEditionService.insertTitle(titleNumber);
+        this.publicationEditionService.insertTitle(titleNumber);
     }
 
     selectAPicture(): void {
-    this.#publicationEditionService.selectAPicture();
+        this.publicationEditionService.selectAPicture();
     }
 
     insertLink(): void {
-    this.#publicationEditionService.insertLink();
+        this.publicationEditionService.insertLink();
     }
 
     displayCodeBlockDialog(): void {
-    this.#publicationEditionService.displayCodeBlockDialog();
+        this.publicationEditionService.displayCodeBlockDialog();
     }
 
     displayPictureSectionDialog(): void {
-    this.#publicationEditionService.displayPictureSectionDialog();
+        this.publicationEditionService.displayPictureSectionDialog();
     }
 
     updateCursorPosition(event: KeyboardEvent | MouseEvent): void {
@@ -119,17 +132,17 @@ export class PublicationEditionComponent {
             const positionStart = textarea.selectionStart;
             const positionEnd = textarea.selectionEnd;
 
-      this.#publicationEditionService.editCursorPosition(positionStart, positionEnd);
+            this.publicationEditionService.editCursorPosition(positionStart, positionEnd);
         }
     }
 
     save(): void {
-    this.publicationSave.emit(this.#publicationEditionService.editedPublication);
+        this.publicationSave.emit(this.publicationEditionService.editedPublication);
     }
 
     onTabChange(tabSelectedIndex: number): void {
         if (tabSelectedIndex === 1) {
-      this.#publicationEditionService.loadPreview();
+            this.publicationEditionService.loadPreview();
         }
     }
 }

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

@@ -1,10 +1,10 @@
 import { Location } from "@angular/common";
-import {inject, Injectable, OnDestroy, Signal, signal} from "@angular/core";
+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 {debounceTime, distinctUntilChanged, Subscription} from "rxjs";
+import { BehaviorSubject, debounceTime, distinctUntilChanged, Observable, Subscription } from "rxjs";
-import {DEFAULT_PUBLICATION, Publication} from "../../core/rest-services/publications/model/publication";
+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";
@@ -31,6 +31,23 @@ export interface PublicationEditionState {
     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 = {
@@ -40,20 +57,20 @@ const DEFAULT_STATE: PublicationEditionState = {
 
 @Injectable()
 export class PublicationEditionService implements OnDestroy {
-  readonly #activatedRoute = inject(ActivatedRoute);
+    private readonly activatedRoute = inject(ActivatedRoute);
-  readonly #dialog = inject(MatDialog);
+    private readonly dialog = inject(MatDialog);
-  readonly #formBuilder = inject(FormBuilder);
+    private readonly formBuilder = inject(FormBuilder);
-  readonly #location = inject(Location);
+    private readonly location = inject(Location);
-  readonly #publicationRestService = inject(PublicationRestService);
+    private readonly publicationRestService = inject(PublicationRestService);
-  readonly #snackBar = inject(MatSnackBar);
+    private readonly snackBar = inject(MatSnackBar);
 
-  #isLoading = signal(false);
+    private isLoadingSubject = new BehaviorSubject<boolean>(false);
-  #state = signal<PublicationEditionState>(copy(DEFAULT_STATE));
+    private stateSubject = new BehaviorSubject<PublicationEditionState>(copy(DEFAULT_STATE));
-  #isSaving = signal<boolean>(false);
+    private subscriptions: Subscription[] = [];
-  #isPreviewing = signal<boolean>(false);
+    private isSavingSubject = new BehaviorSubject<boolean>(false);
-  #subscriptions: Subscription[] = [];
+    private isPreviewingSubject = new BehaviorSubject<boolean>(false);
 
-  publicationEditionForm: FormGroup = this.#formBuilder.group({
+    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]),
@@ -62,11 +79,19 @@ export class PublicationEditionService implements OnDestroy {
     });
 
     ngOnDestroy(): void {
-    this.#subscriptions.forEach(subscription => subscription.unsubscribe());
+        this.subscriptions.forEach(subscription => subscription.unsubscribe());
     }
 
-  #updateForm(): void {
+    private get _state(): PublicationEditionState {
-    const state = this.#state();
+        return this.stateSubject.value;
+    }
+
+    private _save(state: PublicationEditionState): void {
+        this.stateSubject.next(state);
+    }
+
+    private _updateForm(): void {
+        const state = this._state;
         const publication = state.publication;
 
         this.publicationEditionForm.controls['title'].setValue(publication.title);
@@ -76,56 +101,56 @@ export class PublicationEditionService implements OnDestroy {
         this.publicationEditionForm.controls['categoryId'].setValue(publication.categoryId);
     }
 
-  get isLoading(): Signal<boolean> {
+    get isLoading$(): Observable<boolean> {
-    return this.#isLoading.asReadonly();
+        return this.isLoadingSubject.asObservable();
     }
 
-  get isSaving(): Signal<boolean> {
+    get isSaving$(): Observable<boolean> {
-    return this.#isSaving.asReadonly();
+        return this.isSavingSubject.asObservable();
     }
 
-  get isPreviewing(): Signal<boolean> {
+    get isPreviewing$(): Observable<boolean> {
-    return this.#isPreviewing.asReadonly();
+        return this.isPreviewingSubject.asObservable();
     }
 
-  get state(): Signal<PublicationEditionState> {
+    get state$(): Observable<PublicationEditionState> {
-    return this.#state.asReadonly();
+        return this.stateSubject.asObservable();
     }
 
     get editedPublication(): Publication {
-    return this.#state().publication;
+        return this._state.publication;
     }
 
     loadPublication(): void {
-    this.#isLoading.set(true);
+        this.isLoadingSubject.next(true);
         
-    this.#activatedRoute.paramMap.subscribe(params => {
+        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.snackBar.open($localize`A technical error occurred while loading publication data.`, $localize`Close`, { duration: 5000 });
-        this.#location.back();
+                this.location.back();
             } else {
-        this.#publicationRestService.getById(publicationId)
+                this.publicationRestService.getById(publicationId)
                     .then(publication => {
-            const state = this.#state();
+                        const state = this._state;
                         state.publication = publication;
-            this.#state.set(state);
+                        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});
+                        this.snackBar.open(errorMessage, $localize`Close`, {duration: 5000});
                         console.error(errorMessage, error)
                     })
-          .finally(() => this.#isLoading.set(false));
+                    .finally(() => this.isLoadingSubject.next(false));
             }
         });
     }
 
     init(publication: Publication): void {
-    const state = this.#state();
+        const state = this._state;
         state.publication = publication;
-    this.#state.set(state);
+        this.stateSubject.next(state);
-    this.#updateForm();
+        this._updateForm();
 
         const formValueChangesSubscription = this.publicationEditionForm.valueChanges
             .pipe(
@@ -133,7 +158,7 @@ export class PublicationEditionService implements OnDestroy {
                 distinctUntilChanged()
             )
             .subscribe(formValue => {
-        const state = this.#state();
+                const state = this._state;
                 const publication = state.publication;
 
                 publication.title = formValue.title;
@@ -141,19 +166,19 @@ export class PublicationEditionService implements OnDestroy {
                 publication.categoryId = formValue.categoryId;
                 publication.text = formValue.text;
 
-        this.#state.set(state);
+                this._save(state);
-      });
+            })
-    this.#subscriptions.push(formValueChangesSubscription);
+        this.subscriptions.push(formValueChangesSubscription);
     }
 
     private editIllustrationId(pictureId: string): void {
-    const state = this.#state();
+        const state = this._state;
         state.publication.illustrationId = pictureId
-    this.#state.set(state);
+        this._save(state);
     }
 
     displayPictureSectionDialog(): void {
-    const dialogRef = this.#dialog.open(PictureSelectionDialog);
+        const dialogRef = this.dialog.open(PictureSelectionDialog);
 
         const afterDialogCloseSubscription = dialogRef.afterClosed()
             .subscribe(newPictureId => {
@@ -161,11 +186,11 @@ export class PublicationEditionService implements OnDestroy {
                     this.editIllustrationId(newPictureId);
                 }
             });
-    this.#subscriptions.push(afterDialogCloseSubscription);
+        this.subscriptions.push(afterDialogCloseSubscription);
     }
 
     displayCodeBlockDialog(): void {
-    const dialogRef = this.#dialog.open(CodeBlockDialog, {width: '60em'});
+        const dialogRef = this.dialog.open(CodeBlockDialog, { width: '60em' });
 
         const afterDialogCloseSubscription = dialogRef.afterClosed()
             .subscribe(codeBlockWithLanguage => {
@@ -173,21 +198,21 @@ export class PublicationEditionService implements OnDestroy {
                     this.insertCodeBlock(codeBlockWithLanguage.programmingLanguage, codeBlockWithLanguage.codeBlock);
                 }
             });
-    this.#subscriptions.push(afterDialogCloseSubscription);
+        this.subscriptions.push(afterDialogCloseSubscription);
     }
 
     editCursorPosition(positionStart: number, positionEnd: number): void {
-    const state = this.#state();
+        const state = this._state;
 
         state.cursorPosition.start = positionStart;
         state.cursorPosition.end = positionEnd;
 
-    this.#state.set(state);
+        this._save(state);
     }
 
     insertTitle(titleNumber: number): void {
         if (titleNumber >= 1 && titleNumber <= 3) {
-      const state = this.#state();
+            const state = this._state;
 
             const publication = state.publication;
 
@@ -198,15 +223,15 @@ export class PublicationEditionService implements OnDestroy {
 
             publication.text = textWithTags;
 
-      this.#state.set(state);
+            this._save(state);
-      this.#updateForm();
+            this._updateForm();
         } else {
             console.error(`Bad value for parameter of function 'insertTitle': '${titleNumber}'.`);
         }
     }
 
     selectAPicture(): void {
-    const dialogRef = this.#dialog.open(PictureSelectionDialog);
+        const dialogRef = this.dialog.open(PictureSelectionDialog);
 
         const afterDialogCloseSubscription = dialogRef.afterClosed()
             .subscribe(newPictureId => {
@@ -214,11 +239,11 @@ export class PublicationEditionService implements OnDestroy {
                     this.insertPicture(newPictureId);
                 }
             });
-    this.#subscriptions.push(afterDialogCloseSubscription);
+        this.subscriptions.push(afterDialogCloseSubscription);
     }
 
     insertPicture(pictureId: string): void {
-    const state = this.#state();
+        const state = this._state;
 
         const publication = state.publication;
 
@@ -228,12 +253,12 @@ export class PublicationEditionService implements OnDestroy {
 
         publication.text = textWithTags;
 
-    this.#state.set(state);
+        this._save(state);
-    this.#updateForm();
+        this._updateForm();
     }
 
     insertLink(): void {
-    const state = this.#state();
+        const state = this._state;
 
         const publication = state.publication;
 
@@ -244,12 +269,12 @@ export class PublicationEditionService implements OnDestroy {
 
         publication.text = textWithTags;
 
-    this.#state.set(state);
+        this._save(state);
-    this.#updateForm();
+        this._updateForm();
     }
 
     private insertCodeBlock(programmingLanguage: string, codeBlock: string): void {
-    const state = this.#state();
+        const state = this._state;
 
         const publication = state.publication;
 
@@ -260,28 +285,28 @@ export class PublicationEditionService implements OnDestroy {
 
         publication.text = textWithTags;
 
-    this.#state.set(state);
+        this._save(state);
-    this.#updateForm();
+        this._updateForm();
     }
 
     loadPreview(): void {
-    const state = this.#state();
+        const state = this._state;
 
-    this.#isPreviewing.set(true);
+        this.isPreviewingSubject.next(true);
         const request: PreviewContentRequest = {
             text: state.publication.text
         };
-    this.#publicationRestService.preview(request)
+        this.publicationRestService.preview(request)
             .then(response => {
                 state.publication.parsedText = response.text;
-        this.#state.set(state);
+                this._save(state);
                 setTimeout(() => Prism.highlightAll(), 1000);
             })
             .catch(error => {
                 console.error(error);
             })
             .finally(() => {
-        this.#isPreviewing.set(false);
+                this.isPreviewingSubject.next(false);
             });
     }
 }

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

@@ -1,4 +1,4 @@
-@for (publication of publications(); track publication.id) {
+@for(publication of publications$ | async; track publication) {
     <a [routerLink]="['/publications/' + publication.id]" class="publication">
         <img src="/api/pictures/{{ publication.illustrationId }}"/>
         <div class="body">

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

@@ -1,5 +1,6 @@
-import {Component, input} from "@angular/core";
+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";
@@ -11,5 +12,6 @@ import {MatTooltipModule} from "@angular/material/tooltip";
     imports: [CommonModule, RouterModule, MatTooltipModule]
 })
 export class PublicationListComponent {
-  publications = input.required<Publication[]>();
+    @Input()
+    publications$!: Observable<Publication[]>;
 }

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

@@ -1,6 +1,6 @@
-@for (category of categories(); track category.id) {
+@for(category of categories$ | async; track category) {
     <div class="category {{category.isOpenned ? 'openned' : ''}}">
-    <div id="category-{{category.id}}" class="category-header" (click)="setOpened(category)">
+        <div id="category-{{category.id}}" class="category-header" (click)="setOpenned(category)">
             {{category.name}}
             <mat-icon>chevron_right</mat-icon>
         </div>

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

@@ -1,7 +1,8 @@
 import { CommonModule } from "@angular/common";
-import {Component, inject, OnInit, output, Signal} from "@angular/core";
+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({
@@ -15,44 +16,45 @@ import {RouterModule} from "@angular/router";
     styleUrl: './categories-menu.component.scss'
 })
 export class CategoriesMenuComponent implements OnInit {
-  readonly #sideMenuService = inject(SideMenuService);
+  private sideMenuService = inject(SideMenuService);
-  categoryClicked = output<void>();
+  @Output()
+  categoryClicked = new EventEmitter<void>();
 
   ngOnInit(): void {
-    this.#sideMenuService.loadCategories();
+    this.sideMenuService.loadCategories();
   }
 
-  get categories(): Signal<DisplayableCategory[]> {
+  get categories$(): Observable<DisplayableCategory[]> {
-    return this.#sideMenuService.categories;
+    return this.sideMenuService.categories$;
   }
 
-  setOpened(category: DisplayableCategory): void {
+  setOpenned(category: DisplayableCategory): void {
     if (category.isOpenned) {
       const categoryDiv = document.getElementById(`category-${category.id}`);
       if (categoryDiv) {
-        this.#closeAccordion(categoryDiv);
+        this.closeAccordion(categoryDiv);
       }
     } else {
       const categoriesDivs = document.getElementsByClassName('category-header');
       Array.from(categoriesDivs)
         .map(category => category as HTMLElement)  
-        .forEach(categoryDiv => this.#closeAccordion(categoryDiv));
+        .forEach(categoryDiv => this.closeAccordion(categoryDiv));
       
         const categoryDiv = document.getElementById(`category-${category.id}`);
       if (categoryDiv) {
-        this.#openAccordion(categoryDiv);
+        this.openAccordion(categoryDiv);
       }
     }
 
-    this.#sideMenuService.setOpened(category);
+    this.sideMenuService.setOpenned(category);
   }
 
-  #closeAccordion(categoryDiv: HTMLElement): void {
+  private closeAccordion(categoryDiv: HTMLElement): void {
     const divContent = categoryDiv?.nextElementSibling as HTMLElement;
     divContent.style.maxHeight = '0';
   }
 
-  #openAccordion(categoryDiv: HTMLElement): void {
+  private openAccordion(categoryDiv: HTMLElement): void {
     const divContent = categoryDiv?.nextElementSibling as HTMLElement;
     divContent.style.maxHeight = `${divContent.scrollHeight}px`;
   }

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

@@ -1,4 +1,4 @@
-<div class="menu {{ isOpened() ? 'displayed' : '' }}">
+<div class="menu {{ isOpenned ? 'displayed' : '' }}">
     <h1>
         <a [routerLink]="['/home']">
             <img src="assets/images/codiki.png" alt="logo"/>
@@ -14,6 +14,6 @@
         </button>
     </h1>
     <h2 i18n>Categories</h2>
-  <app-categories-menu (categoryClicked)="close()"/>
+    <app-categories-menu (categoryClicked)="close()"></app-categories-menu>
 </div>
-<div class="overlay {{ isOpened() ? 'displayed' : ''}}" (click)="close()"></div>
+<div class="overlay {{ isOpenned ? 'displayed' : ''}}" (click)="close()"></div>

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

@@ -1,4 +1,4 @@
-import {Component, signal} from '@angular/core';
+import { Component } from '@angular/core';
 import { MatIconModule } from '@angular/material/icon';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { RouterModule } from '@angular/router';
@@ -18,13 +18,13 @@ import {MatRippleModule} from '@angular/material/core';
     ]
 })
 export class SideMenuComponent {
-  isOpened = signal(false);
+  isOpenned: boolean = false;
 
   open(): void {
-    this.isOpened.set(true);
+    this.isOpenned = true;
   }
 
   close(): void {
-    this.isOpened.set(false);
+    this.isOpenned = false;
   }
 }

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

@@ -1,5 +1,6 @@
-import {inject, Injectable, Signal, signal} from '@angular/core';
+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';
 
@@ -19,60 +20,68 @@ export interface DisplayableSubCategory {
   providedIn: 'root'
 })
 export class SideMenuService {
-  readonly #categoryRestService = inject(CategoryRestService);
+  private categoryRestService = inject(CategoryRestService);
-  readonly #snackBar = inject(MatSnackBar);
+  private snackBar = inject(MatSnackBar);
-  #categories = signal<DisplayableCategory[]>([]);
+  private categoriesSubject = new BehaviorSubject<DisplayableCategory[]>([]);
-  #isLoading = signal(false);
+  private isLoadingSubject = new BehaviorSubject<boolean>(false);
-  isLoaded = signal(false);
+  private isLoadedSubject = new BehaviorSubject<boolean>(false);
 
-  #mapToDisplayableCategory(category: Category): DisplayableCategory {
+  private mapToDisplayableCategory(category: Category): DisplayableCategory {
     return {
       id: category.id,
       name: category.name,
-      subCategories: category.subCategories.map(subCategory => this.#mapToDisplayableSubCategory(subCategory)),
+      subCategories: category.subCategories.map(subCategory => this.mapToDisplayableSubCategory(subCategory)),
       isOpenned: false
     };
   }
 
-  #mapToDisplayableSubCategory(subCategory: Category): DisplayableSubCategory {
+  private mapToDisplayableSubCategory(subCategory: Category): DisplayableSubCategory {
     return {
       id: subCategory.id,
       name: subCategory.name
     }
   }
 
-  get categories(): Signal<DisplayableCategory[]> {
+  private get categories(): DisplayableCategory[] {
-    return this.#categories.asReadonly();
+    return this.categoriesSubject.value;
   }
 
-  get isLoading(): Signal<boolean> {
+  private save(categories: DisplayableCategory[]): void {
-    return this.#isLoading.asReadonly();
+    this.categoriesSubject.next(categories);
+  }
+
+  get categories$(): Observable<DisplayableCategory[]> {
+    return this.categoriesSubject.asObservable();
+  }
+  
+  get isLoading$(): Observable<boolean> {
+    return this.isLoadingSubject.asObservable();
   }
 
   loadCategories(): void {
-    this.#isLoading.set(true);
+    this.isLoadingSubject.next(true);
-    this.isLoaded.set(false);
+    this.isLoadedSubject.next(false);
 
-    this.#categoryRestService.getCategories()
+    this.categoryRestService.getCategories()
       .then(categories => {
         const displayableCategories = categories
           .filter(category => category.subCategories?.length)
-          .map(category => this.#mapToDisplayableCategory(category));
+          .map(category => this.mapToDisplayableCategory(category));
-        this.#categories.set(displayableCategories);
+        this.categoriesSubject.next(displayableCategories);
       })
       .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.#isLoading.set(false);
+        this.isLoadingSubject.next(false);
-        this.isLoaded.set(true);
+        this.isLoadedSubject.next(true);
       });
   }
 
-  setOpened(category: DisplayableCategory): void {
+  setOpenned(category: DisplayableCategory): void {
-    const categories = this.#categories();
+    const categories = this.categories;
     const matchingCategory = categories.find(categoryTemp => categoryTemp.id === category.id);
     if (matchingCategory) {
       const actualOpennedCategory = categories.find(category => category.isOpenned);
@@ -82,7 +91,7 @@ export class SideMenuService {
         categories.forEach(categoryTemp => categoryTemp.isOpenned = false);
         matchingCategory.isOpenned = true;
       }
-      this.#categories.set(categories);
+      this.save(categories);
     }
   }
 }

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

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

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

@@ -1,4 +1,5 @@
-import {Component, input, output} from "@angular/core";
+
+import { Component, EventEmitter, Input, Output } from "@angular/core";
 import { MatRippleModule } from "@angular/material/core";
 import { MatProgressSpinnerModule } from "@angular/material/progress-spinner";
 
@@ -12,9 +13,10 @@ import {MatProgressSpinnerModule} from "@angular/material/progress-spinner";
 ]
 })
 export class SubmitButtonComponent {
-  requestPending = input.required<boolean>();
+    @Input() requestPending: boolean = false;
-  label = input<string>();
+    @Input() label: string = '';
-  disabled = input<boolean>(false);
+    @Input() disabled: boolean = false;
-  color = input<'secondary' | undefined>('secondary');
+    @Input() color?: 'secondary';
-  click = output<void>();
+    @Output() click = new EventEmitter<void>();
   }
+  

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

@@ -1,6 +1,7 @@
 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';

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

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

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

@@ -1,4 +1,4 @@
-import {HttpClient} from "@angular/common/http";
+import { HttpClient, HttpParams } from "@angular/common/http";
 import { inject, Injectable } from "@angular/core";
 import { Picture } from "./model/picture";
 import { lastValueFrom } from "rxjs";

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

@@ -12,20 +12,3 @@ export interface Publication {
     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,6 +1,6 @@
 import { HttpClient, HttpParams } from '@angular/common/http';
-import {inject, Injectable} from '@angular/core';
+import { Injectable, inject } from '@angular/core';
-import {lastValueFrom} from 'rxjs';
+import { last, lastValueFrom } from 'rxjs';
 import { Publication } from './model/publication';
 import { PreviewContentRequest, PreviewContentResponse } from './model/preview';
 

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

@@ -1,5 +1,5 @@
 import { HttpClient } from "@angular/common/http";
-import {inject, Injectable} from "@angular/core";
+import { Injectable, inject } from "@angular/core";
 import { LoginRequest, LoginResponse } from "./model/login.model";
 import { lastValueFrom } from "rxjs";
 import { SigninRequest } from "./model/signin.model";

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

@@ -1,4 +1,4 @@
-import {inject, Injectable} from '@angular/core';
+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';

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

@@ -1,4 +1,4 @@
-import {Component, inject, OnInit} from '@angular/core';
+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';

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

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

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

@@ -1,6 +1,8 @@
-import {Component, inject, OnInit} from '@angular/core';
+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';
 
@@ -16,11 +18,17 @@ import {CommonModule} from '@angular/common';
     providers: [HomeService]
 })
 export class HomeComponent implements OnInit {
-  readonly #homeService = inject(HomeService);
+  private homeService = inject(HomeService);
-  isLoading = this.#homeService.isLoading;
+
-  publications = this.#homeService.publications;
+  get isLoading$(): Observable<boolean> {
+    return this.homeService.isLoading$;
+  }
+
+  get publications$(): Observable<Publication[]> {
+    return this.homeService.publications$;
+  }
 
   ngOnInit(): void {
-    this.#homeService.startLatestPublicationsRetrieving();
+    this.homeService.startLatestPublicationsRetrieving();
   }
 }

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

@@ -1,5 +1,6 @@
-import {inject, Injectable, Signal, signal} from "@angular/core";
+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";
 
@@ -8,27 +9,27 @@ export class HomeService {
     private publicationRestService = inject(PublicationRestService);
     private snackBar = inject(MatSnackBar);
 
-  #publications = signal<Publication[]>([]);
+    private publicationsSubject = new BehaviorSubject<Publication[]>([]);
-  #isLoadingSubject = signal<boolean>(false);
+    private isLoadingSubject = new BehaviorSubject<boolean>(false);
 
-  get isLoading(): Signal<boolean> {
+    get isLoading$(): Observable<boolean> {
-    return this.#isLoadingSubject.asReadonly();
+        return this.isLoadingSubject.asObservable();
     }
 
-  get publications(): Signal<Publication[]> {
+    get publications$(): Observable<Publication[]> {
-    return this.#publications.asReadonly();
+        return this.publicationsSubject.asObservable();
     }
 
     startLatestPublicationsRetrieving(): void {
-    this.#isLoadingSubject.set(true);
+        this.isLoadingSubject.next(true);
 
         this.publicationRestService.getLatest()
-      .then(publications => this.#publications.set(publications))
+            .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.set(false));
+            .finally(() => this.isLoadingSubject.next(false));
     }
 }

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

@@ -1,7 +1,7 @@
-import {Component, inject, OnDestroy, OnInit} from '@angular/core';
+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 {debounceTime, map, Subscription} from 'rxjs';
+import { Subscription, debounceTime, map } from 'rxjs';
 import { LoginService } from './login.service';
 import { MatIconModule } from '@angular/material/icon';
 import { RouterModule } from '@angular/router';

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

@@ -1,4 +1,4 @@
-import {inject, Injectable} from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { copy } from '../../core/utils/ObjectUtils';
 import { FormError } from '../../core/model/FormError';

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

@@ -9,12 +9,12 @@
     +
 </a>
 
-@if (isLoading()) {
+@if ((isLoading$ | async) === true) {
     <h2 i18n>Publication loading...</h2>
     <mat-spinner></mat-spinner>
 } @else {
-  @if (isLoaded()) {
+    @if ((isLoaded$ | async) === true) {
-    <app-publication-list [publications]="publications()"></app-publication-list>
+        <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.ts

@@ -1,7 +1,9 @@
 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";
@@ -25,9 +27,17 @@ import {MatRippleModule} from "@angular/material/core";
 export class MyPublicationsComponent implements OnInit {
     private readonly myPublicationsService = inject(MyPublicationsService);
 
-  publications = this.myPublicationsService.publications;
+    get publications$(): Observable<Publication[]> {
-  isLoading = this.myPublicationsService.isLoading;
+        return this.myPublicationsService.publications$;
-  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();    

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

@@ -1,56 +1,57 @@
-import {inject, Injectable, Signal, signal} from "@angular/core";
+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";
 
 @Injectable()
 export class MyPublicationsService {
-  readonly #authenticationService = inject(AuthenticationService);
+    private readonly authenticationService = inject(AuthenticationService);
-  readonly #publicationRestService = inject(PublicationRestService);
+    private readonly publicationRestService = inject(PublicationRestService);
-  readonly #snackBar = inject(MatSnackBar);
+    private readonly snackBar = inject(MatSnackBar);
-  readonly #router = inject(Router);
+    private readonly router = inject(Router);
-  #publications = signal<Publication[]>([]);
+    private publicationsSubject = new BehaviorSubject<Publication[]>([]);
-  #isLoading = signal(false);
+    private isLoadingSubject = new BehaviorSubject<boolean>(false);
-  #isLoaded = signal(false);
+    private isLoadedSubject = new BehaviorSubject<boolean>(false);
 
-  get publications(): Signal<Publication[]> {
+    get publications$(): Observable<Publication[]> {
-    return this.#publications.asReadonly();
+        return this.publicationsSubject.asObservable();
     }
 
-  get isLoading(): Signal<boolean> {
+    get isLoading$(): Observable<boolean> {
-    return this.#isLoading.asReadonly();
+        return this.isLoadingSubject.asObservable();
     }
 
-  get isLoaded(): Signal<boolean> {
+    get isLoaded$(): Observable<boolean> {
-    return this.#isLoaded.asReadonly();
+        return this.isLoadedSubject.asObservable();
     }
 
     loadAuthenticatedUserPublications(): void {
-    const authenticatedUser = this.#authenticationService.getAuthenticatedUser();
+        const authenticatedUser = this.authenticationService.getAuthenticatedUser();
         if (authenticatedUser) {
-      this.#isLoading.set(true);
+            this.isLoadingSubject.next(true);
-      this.#isLoaded.set(false);
+            this.isLoadedSubject.next(false);
 
             const query = `author_id=${authenticatedUser.id}`;
-      this.#publicationRestService.search(query)
+            this.publicationRestService.search(query)
                 .then(publications => {
-          this.#publications.set(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});
+                    this.snackBar.open(errorMessage, $localize`Close`, { duration: 5000 });
                     console.error(errorMessage, error);
                 })
                 .finally(() => {
-          this.#isLoading.set(false);
+                    this.isLoadingSubject.next(false);
-          this.#isLoaded.set(true);
+                    this.isLoadedSubject.next(true);
                 });
         } else {
-      this.#authenticationService.unauthenticate();
+            this.authenticationService.unauthenticate();
-      this.#snackBar.open($localize`You are unauthenticated. Please, log-in first.`, $localize`Close`, {duration: 5000});
+            this.snackBar.open($localize`You are unauthenticated. Please, log-in first.`, $localize`Close`, { duration: 5000 });
-      this.#router.navigate(['/login']);
+            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()"
+    [publication]="publication" 
-  [isSaving]="isSaving()"
+    [isSaving$]="isSaving$"
     (publicationSave)="onPublicationSave($event)"
-  i18n-title
+    i18n-title>
-/>
+</app-publication-edition>

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

@@ -1,12 +1,14 @@
-import {Component, inject, OnInit, signal} from "@angular/core";
+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 {Router} from "@angular/router";
+import { ActivatedRoute, Router } from "@angular/router";
 import { MatSnackBar } from "@angular/material/snack-bar";
-import {DEFAULT_PUBLICATION, Publication} from "../../core/rest-services/publications/model/publication";
+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";
 
+
 @Component({
     selector: 'app-publication-creation',
     templateUrl: './publication-creation.component.html',
@@ -16,38 +18,57 @@ import {Author} from "../../core/rest-services/publications/model/author";
 ]
 })
 export class PublicationCreationComponent implements OnInit {
-  readonly #authenticationService = inject(AuthenticationService);
+    private readonly authenticationService = inject(AuthenticationService);
-  readonly #publicationRestService = inject(PublicationRestService);
+    private readonly publicationRestService = inject(PublicationRestService);
-  readonly #router = inject(Router);
+    private readonly router = inject(Router);
-  readonly #snackBar = inject(MatSnackBar);
+    private readonly snackBar = inject(MatSnackBar);
-  isSaving = signal(false);
+    private isSavingSubject = new BehaviorSubject<boolean>(false);
-  publication = signal<Publication>(DEFAULT_PUBLICATION);
+    private subscriptions: Subscription[] = [];
+    publication!: Publication;
+
+    get isSaving$(): Observable<boolean> {
+        return this.isSavingSubject.asObservable();
+    }
 
     ngOnInit(): void {
-    const authenticatedUser = this.#authenticationService.getAuthenticatedUser();
+        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 = {
-      this.publication.set(newPublication);
+                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.isSaving.set(true);
+        this.isSavingSubject.next(true);
-    this.#publicationRestService.create(publication)
+        this.publicationRestService.create(publication)
             .then(() => {
-        this.#snackBar.open($localize`Publication created succesfully!`, $localize`Close`, {duration: 5000});
+                this.snackBar.open($localize`Publication created succesfully!`, $localize`Close`, { duration: 5000 });
-        this.#router.navigate(['/my-publications']);
+                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});
+                this.snackBar.open(errorMessage, $localize`Close`, { duration: 5000 });
             })
-      .finally(() => this.isSaving.set(false));
+            .finally(() => this.isSavingSubject.next(false));
     }
 }

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

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

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

@@ -1,5 +1,5 @@
 import { CommonModule, Location } from '@angular/common';
-import {Component, effect, inject, Signal, signal} from '@angular/core';
+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';
@@ -9,11 +9,10 @@ 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 {toSignal} from "@angular/core/rxjs-interop";
-import {map} from "rxjs";
 
 @Component({
     selector: 'app-publication-update',
@@ -31,63 +30,64 @@ import {map} from "rxjs";
     templateUrl: './publication-update.component.html',
     styleUrl: './publication-update.component.scss'
 })
-export class PublicationUpdateComponent {
+export class PublicationUpdateComponent implements OnInit, OnDestroy {
-  readonly #activatedRoute = inject(ActivatedRoute);
+  private readonly publicationRestService = inject(PublicationRestService);
-  readonly #location = inject(Location);
+  private readonly activatedRoute = inject(ActivatedRoute);
-  readonly #publicationRestService = inject(PublicationRestService);
+  private readonly location = inject(Location);
-  readonly #router = inject(Router);
+  private readonly router = inject(Router);
-  readonly #snackBar = inject(MatSnackBar);
+  private readonly snackBar = inject(MatSnackBar);
-  #isLoading = signal(false);
+  private isLoadingSubject = new BehaviorSubject<boolean>(false);
-  #isSavingSubject = signal(false);
+  private isSavingSubject = new BehaviorSubject<boolean>(false);
-  publication = signal<Publication | undefined>(undefined);
+  private subscriptions: Subscription[] = [];
+  publication: Publication | undefined;
 
-  #publicationId$ = this.#activatedRoute.params
+  get isLoading$(): Observable<boolean> {
-    .pipe(map(queryParams => queryParams['publicationId']));
+    return this.isLoadingSubject.asObservable();
-  #publicationId = toSignal(this.#publicationId$, {initialValue: undefined});
-
-  get isLoading(): Signal<boolean> {
-    return this.#isLoading.asReadonly();
   }
 
-  get isSaving(): Signal<boolean> {
+  get isSaving$(): Observable<boolean> {
-    return this.#isSavingSubject.asReadonly();
+    return this.isSavingSubject.asObservable();
   }
 
-  constructor() {
+  ngOnInit(): void {
-    effect(() => {
+    this.isLoadingSubject.next(true);
-      this.#isLoading.set(true);
+    const activatedRouteSubscription = this.activatedRoute.paramMap.subscribe(params => {
-
+        const publicationId = params.get('publicationId');
-      const publicationId = this.#publicationId();
+        if (publicationId == undefined) {
-      if (publicationId) {
+            this.snackBar.open($localize`A technical error occurred while loading publication data.`, $localize`Close`, { duration: 5000 });
-        this.#publicationRestService.getById(publicationId)
+            this.location.back();
+        } else {
+            this.publicationRestService.getById(publicationId)
             .then(publication => {
-            this.publication.set(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});
+                this.snackBar.open(errorMessage, $localize`Close`, { duration: 5000 });
                 console.error(errorMessage, error)
             })
-          .finally(() => this.#isLoading.set(false));
+            .finally(() => this.isLoadingSubject.next(false));
-      } else {
-        this.#snackBar.open($localize`A technical error occurred while loading publication data.`, $localize`Close`, {duration: 5000});
-        this.#location.back();
         }
       });
+    this.subscriptions.push(activatedRouteSubscription);
+  }
+
+  ngOnDestroy(): void {
+    this.subscriptions.forEach(subscription => subscription?.unsubscribe());
   }
 
   onPublicationSave(publication: Publication): void {
-    this.#isSavingSubject.set(true);
+    this.isSavingSubject.next(true);
-    this.#publicationRestService.update(publication)
+    this.publicationRestService.update(publication)
         .then(() => {
-        this.#snackBar.open($localize`Publication updated succesfully!`, $localize`Close`, {duration: 5000});
+            this.snackBar.open($localize`Publication updated succesfully!`, $localize`Close`, { duration: 5000 });
-        this.#router.navigate(['/home']);
+            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});
+            this.snackBar.open(errorMessage, $localize`Close`, { duration: 5000 });
         })
-      .finally(() => this.#isSavingSubject.set(false));
+        .finally(() => this.isSavingSubject.next(false));
   }
 }

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

@@ -1,14 +1,14 @@
-@if (isLoading()) {
+@if (isLoading) {
     <h2 i18n>Publication content loading...</h2>
     <mat-spinner></mat-spinner>
 } @else {
-  @if (publication(); as publication) {
+    @if (publication) {
         <div class="card">
             <img src="/api/pictures/{{ publication.illustrationId }}" />
             <header>
                 <h1>{{ publication.title }}</h1>
                 <h2>{{ publication.description }}</h2>
-        @if (isAuthorAndUserEquals()) {
+                @if (isAuthorAndUserEquals) {
                     <a [routerLink]="['edit']"
                         class="button action"
                         matTooltip="Click to edit the publication"
@@ -29,7 +29,7 @@
                         </span>
                     </div>
                 </div>
-        @if (isAuthorAndUserEquals()) {
+                @if (isAuthorAndUserEquals) {
                     <button type="button"
                         (click)="deletePublication()"
                         matTooltip="Click to delete the publication" 

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

@@ -1,5 +1,5 @@
 import { CommonModule, Location } from '@angular/common';
-import {Component, inject, OnDestroy, OnInit, signal} from '@angular/core';
+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';
@@ -37,9 +37,9 @@ export class PublicationComponent implements OnInit, OnDestroy {
   private readonly snackBar = inject(MatSnackBar);
   private paramMapSubscription?: Subscription;
   private afterDialogCloseSubscription?: Subscription;
-  isLoading = signal(false);
+  isLoading: boolean = false;
-  isAuthorAndUserEquals = signal(false);
+  isAuthorAndUserEquals: boolean = false;
-  publication = signal<Publication | null>(null);
+  publication?: Publication;
 
   ngOnInit(): void {
     this.paramMapSubscription = this.activatedRoute
@@ -48,12 +48,12 @@ export class PublicationComponent implements OnInit, OnDestroy {
           const publicationId = params.get('publicationId');
 
           if (publicationId) {
-          this.isLoading.set(true);
+            this.isLoading = true;
 
             this.publicationRestService.getById(publicationId)
                 .then(publication => {
-              this.publication.set(publication);
+                  this.publication = publication;
-              this.isAuthorAndUserEquals.set(this.authenticationService.getAuthenticatedUser()?.id === this.publication()?.author.id);
+                  this.isAuthorAndUserEquals = this.authenticationService.getAuthenticatedUser()?.id === this.publication.author.id;
                   setTimeout(() => Prism.highlightAll(), 100);
                 })
                 .catch(error => {
@@ -62,7 +62,7 @@ export class PublicationComponent implements OnInit, OnDestroy {
                   console.error(errorMessage, error);
                 })
                 .finally(() => {
-              this.isLoading.set(false);
+                  this.isLoading = false;
                 });
           }
         });
@@ -86,9 +86,8 @@ export class PublicationComponent implements OnInit, OnDestroy {
 
     this.afterDialogCloseSubscription = dialogRef.afterClosed()
       .subscribe(response => {
-        const publication = this.publication();
+        if (response && this.publication?.id) {
-        if (response && publication?.id) {
+          this.publicationRestService.delete(this.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,10 +1,10 @@
 <h1 i18n>Search results</h1>
-@if (isLoading()) {
+@if((isLoading$ | async) === true) {
     <h2 i18n>Search in progress...</h2>
-  <mat-spinner/>
+    <mat-spinner></mat-spinner>
-} @else if (isLoaded()) {
+} @else if((isLoaded$ | async) === true) {
-  @if (publications().length) {
+    @if((publications$ | async)?.length) {
-    <app-publication-list [publications]="publications()"/>
+        <app-publication-list [publications$]="publications$"></app-publication-list>
     } @else {
         <span i18n>No any result.</span>
     }

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

@@ -1,10 +1,11 @@
 import { CommonModule } from "@angular/common";
-import {Component, effect, inject} from "@angular/core";
+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 {toSignal} from "@angular/core/rxjs-interop";
 
 @Component({
     selector: 'app-search-publications',
@@ -13,18 +14,14 @@ import {toSignal} from "@angular/core/rxjs-interop";
     imports: [CommonModule, MatProgressSpinner, PublicationListComponent],
     providers: [SearchPublicationsService]
 })
-export class SearchPublicationsComponent {
+export class SearchPublicationsComponent implements OnInit, OnDestroy {
     private searchPublicationsService = inject(SearchPublicationsService);
     private activatedRoute = inject(ActivatedRoute);
-  publications = this.searchPublicationsService.publications;
+    private queryParamsSubscription?: Subscription;
-  isLoading = this.searchPublicationsService.isLoading;
-  isLoaded = this.searchPublicationsService.isLoaded;
 
-  constructor() {
+    ngOnInit(): void {
-    const queryParams = toSignal(this.activatedRoute.queryParamMap);
+        this.queryParamsSubscription = this.activatedRoute.queryParamMap
-    effect(() => {
+            .subscribe(params => {  
-      let params = queryParams();
-      if (params) {
                 const categoryId = params.get('category-id');
                 if (categoryId) {
                     this.searchPublicationsService.loadPublications(`category_id=${categoryId}`);
@@ -33,7 +30,22 @@ export class SearchPublicationsComponent {
                 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$;
+    }
 }

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

@@ -1,47 +1,49 @@
-import {inject, Injectable, Signal, signal} from "@angular/core";
+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";
 
+
 @Injectable()
 export class SearchPublicationsService {
-  #snackBar = inject(MatSnackBar);
+    private publicationRestService = inject(PublicationRestService);
-  #publicationRestService = inject(PublicationRestService);
+    private publicationsSubject = new BehaviorSubject<Publication[]>([]);
-  #publications = signal<Publication[]>([]);
+    private isLoadingSubject = new BehaviorSubject<boolean>(false);
-  #isLoading = signal(false);
+    private isLoadedSubject = new BehaviorSubject<boolean>(false);
-  #isLoaded = signal(false);
+    private snackBar = inject(MatSnackBar);
 
-  get publications(): Signal<Publication[]> {
+    get publications$(): Observable<Publication[]> {
-    return this.#publications.asReadonly();
+        return this.publicationsSubject.asObservable();
     }
     
-  get isLoading(): Signal<boolean> {
+    get isLoading$(): Observable<boolean> {
-    return this.#isLoading.asReadonly();
+        return this.isLoadingSubject.asObservable();
     }
 
-  get isLoaded(): Signal<boolean> {
+    get isLoaded$(): Observable<boolean> {
-    return this.#isLoaded.asReadonly();
+        return this.isLoadedSubject.asObservable();
     }
 
     loadPublications(searchCriteria: string): void {
-    this.#isLoading.set(true);
+         this.isLoadingSubject.next(true);
-    this.#isLoaded.set(false);
+         this.isLoadedSubject.next(false);
-    this.#publications.set([]);
+         this.publicationsSubject.next([]);
 
-    this.#publicationRestService.search(searchCriteria)
+         this.publicationRestService.search(searchCriteria)
             .then(publications => {
-        this.#publications.set(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});
+                    this.snackBar.open(errorMessage, $localize`Close`, { duration: 5000 });
                 }
             })
             .finally(() => {
-        this.#isLoading.set(false);
+                this.isLoadingSubject.next(false);
-        this.#isLoaded.set(true);
+                this.isLoadedSubject.next(true);
             });
     }
 }

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

@@ -1,8 +1,8 @@
-import {Component, inject, OnDestroy, OnInit} from '@angular/core';
+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 {debounceTime, distinctUntilChanged, map, Subscription} from 'rxjs';
+import { Subscription, debounceTime, distinctUntilChanged, map } from 'rxjs';
 import { SigninService } from './signin.service';
 import { LoginService } from '../login/login.service';
 import { FormError } from '../../core/model/FormError';

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

@@ -1,4 +1,4 @@
-import {inject, Injectable} from '@angular/core';
+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';

frontend/src/locale/messages-fr.json

@@ -3,7 +3,7 @@
   "translations": {
     "3603720768157919481": "Non",
     "4861926948802653243": "Oui",
-    "9101236728284262962": "{$START_TAG_SPAN}©{$CLOSE_TAG_SPAN} 2016 - 2026 Tous droits réservés - 2.2 {$START_LINK}{$START_TAG_MAT_ICON}favorite{$CLOSE_TAG_MAT_ICON}{$CLOSE_LINK}",
+    "6130235414952256120": "{$START_TAG_SPAN}©{$CLOSE_TAG_SPAN} 2016 - 2024 Tous droits réservés - 2.1 {$START_LINK}{$START_TAG_MAT_ICON}favorite{$CLOSE_TAG_MAT_ICON}{$CLOSE_LINK}",
     "9214089025589249203": "Les indicateurs de vie du site seront disponibles ultérieurement...",
     "1711651175531679766": "La documentation sera disponible ultérieurement...",
     "6299155290121808295": "Développements realisés par",
@@ -22,8 +22,8 @@
     "4111988153902305972": "Choisir cette illustation",
     "4491342806775118195": "Il n'y a aucune image.",
     "5036131155743433968": "{$START_TAG_MAT_ICON}upload_file{$CLOSE_TAG_MAT_ICON} Ajouter une nouvelle image",
-    "2175978098886350409": "Une erreur est survenue lors du chargements de vos images.",
+    "6852365376059142995": "Une erreur est survenue lors du chargements de vos images.",
-    "2334964899406832924": "Une erreur technique est survenue lors de l'ajout de votre image.",
+    "6198966268398913224": "Une erreur technique est survenue lors de l'ajout de votre image.",
     "3603937053948195893": "Édition",
     "5701618810648052610": "Titre",
     "4902817035128594900": "Description",

frontend/src/locale/messages.json

@@ -3,7 +3,7 @@
   "translations": {
     "3603720768157919481": " No ",
     "4861926948802653243": " Yes ",
-    "9101236728284262962": "{$START_TAG_SPAN}©{$CLOSE_TAG_SPAN} 2016 - 2026 All rights reserved - 2.2 {$START_LINK}{$START_TAG_MAT_ICON}favorite{$CLOSE_TAG_MAT_ICON}{$CLOSE_LINK}",
+    "6130235414952256120": "{$START_TAG_SPAN}©{$CLOSE_TAG_SPAN} 2016 - 2024 All rights reserved - 2.1 {$START_LINK}{$START_TAG_MAT_ICON}favorite{$CLOSE_TAG_MAT_ICON}{$CLOSE_LINK}",
     "9214089025589249203": "Health checking will be available in future...",
     "1711651175531679766": "Documentation will be available in future...",
     "6299155290121808295": "Development realised by",
@@ -22,8 +22,8 @@
     "4111988153902305972": "Choose this illustration",
     "4491342806775118195": "There is no any picture.",
     "5036131155743433968": "{$START_TAG_MAT_ICON}upload_file{$CLOSE_TAG_MAT_ICON} Add new picture ",
-    "2175978098886350409": "An error occurred while loading pictures.",
+    "6852365376059142995": "An error occured while loading pictures.",
-    "2334964899406832924": "A technical error occurred while uploading your picture.",
+    "6198966268398913224": "A technical error occured while uploading your picture.",
     "3603937053948195893": "Edition",
     "5701618810648052610": "Title",
     "4902817035128594900": "Description",

frontend/src/styles.scss

@@ -1,10 +1,7 @@
 /* You can add global styles to this file, and also import other style files */
 @use './design_system/index.scss';
 
-html, body {
+html, body { height: 100%; }
-  height: 100%;
-}
-
 body {
     margin: 0;
     font-family: Roboto, "Helvetica Neue", sans-serif;