Format and organise imports.

frontend/src/app/app.component.ts

@@ -1,4 +1,3 @@
-
 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, Input } from "@angular/core";
+import {Component, inject} 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.scss

@@ -17,6 +17,7 @@
     .copy-left {
       transform: rotate(180deg);
     }
+
     a {
       text-decoration: none;
       color: rgba(255, 255, 255, .6);

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

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

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

@@ -1,4 +1,3 @@
-
 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

@@ -16,7 +16,8 @@
   } @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/>
+        <img src="/api/pictures/{{picture.id}}" (click)="selectPicture(picture)" matTooltip="Choose this illustration"
+             i18n-matTooltip/>
       }
     } @else {
       <h2 i18n>There is no any picture.</h2>

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,7 +29,8 @@
           </div>
 
           <div class="picture-container">
-                        <img [src]="publication.illustrationId.length ? '/api/pictures/' + publication.illustrationId : '/assets/images/default-picture.png'"
+            <img
+              [src]="publication().illustrationId.length ? '/api/pictures/' + publication().illustrationId : '/assets/images/default-picture.png'"
               (click)="displayPictureSectionDialog()"
               matTooltip="Click to change illustration"
               i18n-matTooltip/>
@@ -103,24 +104,24 @@
 
     <mat-tab label="Previewing" i18n-label>
       <div class="preview">
-                @if ((isPreviewing$ | async) === true) {
+        @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 }}" />
+          <img class="illustration" src="/api/pictures/{{ publication().illustrationId }}"/>
           <header>
-                        <h1>{{ publication.title }}</h1>
-                        <h2>{{ publication.description }}</h2>
+            <h1>{{ publication().title }}</h1>
+            <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$ | async)" i18n>Save</app-submit-button>
+    <app-submit-button [requestPending]="isSaving()" 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, EventEmitter, inject, Input, OnChanges, OnDestroy, Output } from "@angular/core";
+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";
@@ -8,12 +8,11 @@ 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 {map, Observable} from "rxjs";
 import {Category} from "../../core/rest-services/category/model/category";
-import { Publication } from "../../core/rest-services/publications/model/publication";
+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 { PictureSelectionDialog } from "./picture-selection-dialog/picture-selection-dialog.component";
 import {PublicationEditionService} from "./publication-edition.service";
 import {MatRippleModule} from "@angular/material/core";
 
@@ -36,36 +35,37 @@ import { MatRippleModule } from "@angular/material/core";
   ],
   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>();
+
+  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 isLoading$(): Observable<boolean> {
-        return this.publicationEditionService.isLoading$;
-    }
-
-    get isPreviewing$(): Observable<boolean> {
-        return this.publicationEditionService.isPreviewing$;
+    return this.#publicationEditionService.publicationEditionForm;
   }
 
   get categories$(): Observable<Category[]> {
-        return this.categoryService.categories$
+    return this.#categoryService.categories$
       .pipe(
         map(categories =>
           categories.filter(category => category.subCategories.length == 0)
@@ -88,41 +88,28 @@ export class PublicationEditionComponent implements OnChanges, OnDestroy {
     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 {
@@ -132,17 +119,17 @@ export class PublicationEditionComponent implements OnChanges, OnDestroy {
       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 } from "@angular/core";
+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 { BehaviorSubject, debounceTime, distinctUntilChanged, Observable, Subscription } from "rxjs";
-import { Publication } from "../../core/rest-services/publications/model/publication";
+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";
@@ -31,23 +31,6 @@ 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 = {
@@ -57,20 +40,20 @@ const DEFAULT_STATE: PublicationEditionState = {
 
 @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({
+  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]),
@@ -79,19 +62,11 @@ export class PublicationEditionService implements OnDestroy {
   });
 
   ngOnDestroy(): void {
-        this.subscriptions.forEach(subscription => subscription.unsubscribe());
+    this.#subscriptions.forEach(subscription => subscription.unsubscribe());
   }
 
-    private get _state(): PublicationEditionState {
-        return this.stateSubject.value;
-    }
-
-    private _save(state: PublicationEditionState): void {
-        this.stateSubject.next(state);
-    }
-
-    private _updateForm(): void {
-        const state = this._state;
+  #updateForm(): void {
+    const state = this.#state();
     const publication = state.publication;
 
     this.publicationEditionForm.controls['title'].setValue(publication.title);
@@ -101,56 +76,56 @@ export class PublicationEditionService implements OnDestroy {
     this.publicationEditionForm.controls['categoryId'].setValue(publication.categoryId);
   }
 
-    get isLoading$(): Observable<boolean> {
-        return this.isLoadingSubject.asObservable();
+  get isLoading(): Signal<boolean> {
+    return this.#isLoading.asReadonly();
   }
 
-    get isSaving$(): Observable<boolean> {
-        return this.isSavingSubject.asObservable();
+  get isSaving(): Signal<boolean> {
+    return this.#isSaving.asReadonly();
   }
 
-    get isPreviewing$(): Observable<boolean> {
-        return this.isPreviewingSubject.asObservable();
+  get isPreviewing(): Signal<boolean> {
+    return this.#isPreviewing.asReadonly();
   }
 
-    get state$(): Observable<PublicationEditionState> {
-        return this.stateSubject.asObservable();
+  get state(): Signal<PublicationEditionState> {
+    return this.#state.asReadonly();
   }
 
   get editedPublication(): Publication {
-        return this._state.publication;
+    return this.#state().publication;
   }
 
   loadPublication(): void {
-        this.isLoadingSubject.next(true);
+    this.#isLoading.set(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.location.back();
+        this.#snackBar.open($localize`A technical error occurred while loading publication data.`, $localize`Close`, {duration: 5000});
+        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.stateSubject.next(state);
+            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});
+            this.#snackBar.open(errorMessage, $localize`Close`, {duration: 5000});
             console.error(errorMessage, error)
           })
-                    .finally(() => this.isLoadingSubject.next(false));
+          .finally(() => this.#isLoading.set(false));
       }
     });
   }
 
   init(publication: Publication): void {
-        const state = this._state;
+    const state = this.#state();
     state.publication = publication;
-        this.stateSubject.next(state);
-        this._updateForm();
+    this.#state.set(state);
+    this.#updateForm();
 
     const formValueChangesSubscription = this.publicationEditionForm.valueChanges
       .pipe(
@@ -158,7 +133,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;
@@ -166,19 +141,19 @@ export class PublicationEditionService implements OnDestroy {
         publication.categoryId = formValue.categoryId;
         publication.text = formValue.text;
 
-                this._save(state);
-            })
-        this.subscriptions.push(formValueChangesSubscription);
+        this.#state.set(state);
+      });
+    this.#subscriptions.push(formValueChangesSubscription);
   }
 
   private editIllustrationId(pictureId: string): void {
-        const state = this._state;
+    const state = this.#state();
     state.publication.illustrationId = pictureId
-        this._save(state);
+    this.#state.set(state);
   }
 
   displayPictureSectionDialog(): void {
-        const dialogRef = this.dialog.open(PictureSelectionDialog);
+    const dialogRef = this.#dialog.open(PictureSelectionDialog);
 
     const afterDialogCloseSubscription = dialogRef.afterClosed()
       .subscribe(newPictureId => {
@@ -186,11 +161,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 => {
@@ -198,21 +173,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._save(state);
+    this.#state.set(state);
   }
 
   insertTitle(titleNumber: number): void {
     if (titleNumber >= 1 && titleNumber <= 3) {
-            const state = this._state;
+      const state = this.#state();
 
       const publication = state.publication;
 
@@ -223,15 +198,15 @@ export class PublicationEditionService implements OnDestroy {
 
       publication.text = textWithTags;
 
-            this._save(state);
-            this._updateForm();
+      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);
+    const dialogRef = this.#dialog.open(PictureSelectionDialog);
 
     const afterDialogCloseSubscription = dialogRef.afterClosed()
       .subscribe(newPictureId => {
@@ -239,11 +214,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;
 
@@ -253,12 +228,12 @@ export class PublicationEditionService implements OnDestroy {
 
     publication.text = textWithTags;
 
-        this._save(state);
-        this._updateForm();
+    this.#state.set(state);
+    this.#updateForm();
   }
 
   insertLink(): void {
-        const state = this._state;
+    const state = this.#state();
 
     const publication = state.publication;
 
@@ -269,12 +244,12 @@ export class PublicationEditionService implements OnDestroy {
 
     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;
+    const state = this.#state();
 
     const publication = state.publication;
 
@@ -285,28 +260,28 @@ export class PublicationEditionService implements OnDestroy {
 
     publication.text = textWithTags;
 
-        this._save(state);
-        this._updateForm();
+    this.#state.set(state);
+    this.#updateForm();
   }
 
   loadPreview(): void {
-        const state = this._state;
+    const state = this.#state();
 
-        this.isPreviewingSubject.next(true);
+    this.#isPreviewing.set(true);
     const request: PreviewContentRequest = {
       text: state.publication.text
     };
-        this.publicationRestService.preview(request)
+    this.#publicationRestService.preview(request)
       .then(response => {
         state.publication.parsedText = response.text;
-                this._save(state);
+        this.#state.set(state);
         setTimeout(() => Prism.highlightAll(), 1000);
       })
       .catch(error => {
         console.error(error);
       })
       .finally(() => {
-                this.isPreviewingSubject.next(false);
+        this.#isPreviewing.set(false);
       });
   }
 }

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

@@ -1,6 +1,5 @@
-import {Component, input, 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";

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

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

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

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

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

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

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

@@ -1,7 +1,6 @@
 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 { Injectable, inject } from '@angular/core';
+import {inject, Injectable} 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, HttpParams } from "@angular/common/http";
+import {HttpClient} 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,3 +12,20 @@ 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 { Injectable, inject } from '@angular/core';
-import { last, lastValueFrom } from 'rxjs';
+import {inject, Injectable} from '@angular/core';
+import {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 { Injectable, inject } from "@angular/core";
+import {inject, Injectable} 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 { Injectable, inject } from '@angular/core';
+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';

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

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

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

@@ -1,11 +1,8 @@
-import {Component, OnInit, inject, Signal} from '@angular/core';
+import {Component, inject, OnInit} 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 {toSignal} from "@angular/core/rxjs-interop";
 
 @Component({
   selector: 'app-home',
@@ -19,17 +16,11 @@ import {toSignal} from "@angular/core/rxjs-interop";
   providers: [HomeService]
 })
 export class HomeComponent implements OnInit {
-  private homeService = inject(HomeService);
-
-  get isLoading(): Signal<boolean> {
-    return toSignal(this.homeService.isLoading$, { initialValue: false });
-  }
-
-  get publications(): Signal<Publication[]> {
-    return toSignal(this.homeService.publications$, { initialValue: [] });
-  }
+  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,6 +1,5 @@
-import { Injectable, inject } from "@angular/core";
+import {inject, Injectable, Signal, signal} 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";
 
@@ -9,27 +8,27 @@ export class HomeService {
   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);
+    this.#isLoadingSubject.set(true);
 
     this.publicationRestService.getLatest()
-            .then(publications => this.publicationsSubject.next(publications))
+      .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.next(false));
+      .finally(() => this.#isLoadingSubject.set(false));
   }
 }

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

@@ -1,7 +1,7 @@
-import { Component, OnDestroy, OnInit, inject } from '@angular/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 { Subscription, debounceTime, map } from 'rxjs';
+import {debounceTime, map, Subscription} 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 { Injectable, inject } from '@angular/core';
+import {inject, Injectable} 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.ts

@@ -1,14 +1,11 @@
-import {Component, inject, OnInit, Signal} from "@angular/core";
+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 {toSignal} from "@angular/core/rxjs-interop";
 
 
 @Component({
@@ -28,17 +25,9 @@ import {toSignal} from "@angular/core/rxjs-interop";
 export class MyPublicationsComponent implements OnInit {
   private readonly myPublicationsService = inject(MyPublicationsService);
 
-    get publications(): Signal<Publication[]> {
-        return toSignal(this.myPublicationsService.publications$, { initialValue: [] });
-    }
-
-    get isLoading(): Signal<boolean> {
-        return toSignal(this.myPublicationsService.isLoading$, { initialValue: false });
-    }
-
-    get isLoaded(): Signal<boolean> {
-        return toSignal(this.myPublicationsService.isLoaded$, { initialValue: false });
-    }
+  publications = this.myPublicationsService.publications;
+  isLoading = this.myPublicationsService.isLoading;
+  isLoaded = this.myPublicationsService.isLoaded;
 
   ngOnInit(): void {
     this.myPublicationsService.loadAuthenticatedUserPublications();

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

@@ -1,57 +1,56 @@
-import { inject, Injectable } from "@angular/core";
+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 { 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 {
-    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$(): Observable<boolean> {
-        return this.isLoadingSubject.asObservable();
+  get isLoading(): Signal<boolean> {
+    return this.#isLoading.asReadonly();
   }
 
-    get isLoaded$(): Observable<boolean> {
-        return this.isLoadedSubject.asObservable();
+  get isLoaded(): Signal<boolean> {
+    return this.#isLoaded.asReadonly();
   }
 
   loadAuthenticatedUserPublications(): void {
-        const authenticatedUser = this.authenticationService.getAuthenticatedUser();
+    const authenticatedUser = this.#authenticationService.getAuthenticatedUser();
     if (authenticatedUser) {
-            this.isLoadingSubject.next(true);
-            this.isLoadedSubject.next(false);
+      this.#isLoading.set(true);
+      this.#isLoaded.set(false);
 
       const query = `author_id=${authenticatedUser.id}`;
-            this.publicationRestService.search(query)
+      this.#publicationRestService.search(query)
         .then(publications => {
-                    this.publicationsSubject.next(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 });
+          this.#snackBar.open(errorMessage, $localize`Close`, {duration: 5000});
           console.error(errorMessage, error);
         })
         .finally(() => {
-                    this.isLoadingSubject.next(false);
-                    this.isLoadedSubject.next(true);
+          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']);
+      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$"
+  [publication]="publication()"
+  [isSaving]="isSaving()"
   (publicationSave)="onPublicationSave($event)"
-    i18n-title>
-</app-publication-edition>
+  i18n-title
+/>

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

@@ -1,14 +1,12 @@
-import { Component, inject, OnInit } from "@angular/core";
+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 { ActivatedRoute, Router } from "@angular/router";
+import {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 {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',
@@ -18,57 +16,38 @@ import { Author } from "../../core/rest-services/publications/model/author";
   ]
 })
 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;
-
-    get isSaving$(): Observable<boolean> {
-        return this.isSavingSubject.asObservable();
-    }
+  readonly #authenticationService = inject(AuthenticationService);
+  readonly #publicationRestService = inject(PublicationRestService);
+  readonly #router = inject(Router);
+  readonly #snackBar = inject(MatSnackBar);
+  isSaving = signal(false);
+  publication = signal<Publication>(DEFAULT_PUBLICATION);
 
   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 ?? ''
       };
-            this.publication = {
-                id: '',
-                key: '',
-                title: '',
-                text: '',
-                parsedText: '',
-                description: '',
-                creationDate: new Date(),
-                illustrationId: '',
-                categoryId: '',
-                author
-            };
+      const newPublication: Publication = {...DEFAULT_PUBLICATION, author};
+      this.publication.set(newPublication);
     }
   }
 
-    ngOnDestroy(): void {
-        this.subscriptions.forEach(subscription => subscription?.unsubscribe());
-    }
-
   onPublicationSave(publication: Publication): void {
-        this.isSavingSubject.next(true);
-        this.publicationRestService.create(publication)
+    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']);
+        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 });
+        this.#snackBar.open(errorMessage, $localize`Close`, {duration: 5000});
       })
-            .finally(() => this.isSavingSubject.next(false));
+      .finally(() => this.isSaving.set(false));
   }
 }

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

@@ -1,18 +1,16 @@
-@if ((isLoading$ | async) == true) {
+@if (isLoading()) {
   <h2 i18n>Loading publication to edit...</h2>
-    <mat-spinner></mat-spinner>
-} 
-@else {
-    @if (publication) {
+  <mat-spinner/>
+} @else {
+  @if (publication(); as publication) {
     <app-publication-edition
       title="Update publication {{ publication.title }}"
       [publication]="publication"
-            [isSaving$]="isSaving$"
+      [isSaving]="isSaving()"
       (publicationSave)="onPublicationSave($event)"
-            i18n-title>
-        </app-publication-edition>
-    }
-    @else {
+      i18n-title
+    />
+  } @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, inject, OnDestroy, OnInit } from '@angular/core';
+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';
@@ -9,10 +9,11 @@ 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',
@@ -30,64 +31,63 @@ import { PublicationRestService } from '../../core/rest-services/publications/pu
   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)
+  constructor() {
+    effect(() => {
+      this.#isLoading.set(true);
+
+      const publicationId = this.#publicationId();
+      if (publicationId) {
+        this.#publicationRestService.getById(publicationId)
           .then(publication => {
-              this.publication = 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 });
+            this.#snackBar.open(errorMessage, $localize`Close`, {duration: 5000});
             console.error(errorMessage, error)
           })
-            .finally(() => this.isLoadingSubject.next(false));
+          .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();
       }
     });
-    this.subscriptions.push(activatedRouteSubscription);
-  }
-
-  ngOnDestroy(): void {
-    this.subscriptions.forEach(subscription => subscription?.unsubscribe());
   }
 
   onPublicationSave(publication: Publication): void {
-    this.isSavingSubject.next(true);
-    this.publicationRestService.update(publication)
+    this.#isSavingSubject.set(true);
+    this.#publicationRestService.update(publication)
       .then(() => {
-            this.snackBar.open($localize`Publication updated succesfully!`, $localize`Close`, { duration: 5000 });
-            this.router.navigate(['/home']);
+        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 });
+        this.#snackBar.open(errorMessage, $localize`Close`, {duration: 5000});
       })
-        .finally(() => this.isSavingSubject.next(false));
+      .finally(() => this.#isSavingSubject.set(false));
   }
 }

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

@@ -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, OnDestroy, OnInit, inject, signal} from '@angular/core';
+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';

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

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

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

@@ -2,9 +2,7 @@ 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 {Observable} 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";
 
@@ -18,6 +16,9 @@ import {toSignal} from "@angular/core/rxjs-interop";
 export class SearchPublicationsComponent {
   private searchPublicationsService = inject(SearchPublicationsService);
   private activatedRoute = inject(ActivatedRoute);
+  publications = this.searchPublicationsService.publications;
+  isLoading = this.searchPublicationsService.isLoading;
+  isLoaded = this.searchPublicationsService.isLoaded;
 
   constructor() {
     const queryParams = toSignal(this.activatedRoute.queryParamMap);
@@ -35,16 +36,4 @@ export class SearchPublicationsComponent {
       }
     });
   }
-
-    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,48 +1,47 @@
-import { inject, Injectable } from "@angular/core";
+import {inject, Injectable, Signal, signal} 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 {
-    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 publications(): Signal<Publication[]> {
+    return this.#publications.asReadonly();
   }
 
-    get isLoading$(): Observable<boolean> {
-        return this.isLoadingSubject.asObservable();
+  get isLoading(): Signal<boolean> {
+    return this.#isLoading.asReadonly();
   }
 
-    get isLoaded$(): Observable<boolean> {
-        return this.isLoadedSubject.asObservable();
+  get isLoaded(): Signal<boolean> {
+    return this.#isLoaded.asReadonly();
   }
 
   loadPublications(searchCriteria: string): void {
-         this.isLoadingSubject.next(true);
-         this.isLoadedSubject.next(false);
-         this.publicationsSubject.next([]);
+    this.#isLoading.set(true);
+    this.#isLoaded.set(false);
+    this.#publications.set([]);
 
-         this.publicationRestService.search(searchCriteria)
+    this.#publicationRestService.search(searchCriteria)
       .then(publications => {
-                this.publicationsSubject.next(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 });
+          this.#snackBar.open(errorMessage, $localize`Close`, {duration: 5000});
         }
       })
       .finally(() => {
-                this.isLoadingSubject.next(false);
-                this.isLoadedSubject.next(true);
+        this.#isLoading.set(false);
+        this.#isLoaded.set(true);
       });
   }
 }

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

@@ -1,8 +1,8 @@
-import { Component, OnDestroy, OnInit, inject } from '@angular/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 { Subscription, debounceTime, distinctUntilChanged, map } from 'rxjs';
+import {debounceTime, distinctUntilChanged, map, Subscription} 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 { Injectable, inject } from '@angular/core';
+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';

frontend/src/styles.scss

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