Fix left side menu. (#13)

Co-authored-by: Florian THIERRY <florian.thierry@actian.com>
Reviewed-on: #12

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

@@ -0,0 +1,75 @@
+name: Build and Deploy Java Gradle Application
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: 📄 Checkout code
+        uses: actions/checkout@v4
+
+      - name: 📄 Checkout configuration
+        env:
+          SSH_PRIVATE_KEY: ${{ secrets.PROD_PROPERTIES_SSH_KEY }}
+        run: |
+          mkdir -p ~/.ssh
+          echo "$SSH_PRIVATE_KEY" > ~/.ssh/id_rsa
+          chmod 600 ~/.ssh/id_rsa
+          git clone -b hexagonal-reforged ssh://gitea@gitea.takiguchi.ovh:12960/Codiki/codiki-properties.git --config core.sshCommand='ssh -o StrictHostKeyChecking=no'
+
+      - name: 📄 Edit configuration
+        run: |
+          sed -i "s/<POSTGRES_PASSWORD>/$(cat ./codiki-properties/passwords/postgresql/codiki_user)/g" ./codiki-properties/application-prod.yml
+          cp ./codiki-properties/application-prod.yml ./backend/codiki-launcher/src/main/resources/application.yml
+          sed -i "s/<POSTGRES_ADMIN_PASSWORD>/$(cat ./codiki-properties/passwords/postgresql/codiki_admin)/g" ./docker-compose.yml
+      
+      - name: 🔨 Build backend docker image
+        run: |
+          sudo /usr/bin/docker build -t codiki-backend -f ./Dockerfile-backend . --no-cache
+          
+      - name: 📦 Extract backend docker image into archive
+        run: |
+          sudo /usr/bin/docker save codiki-backend:latest -o ./codiki-backend.tar
+
+      - name: 🔨 Build frontend docker image
+        run: |
+          sudo /usr/bin/docker build -t codiki-frontend -f ./Dockerfile-frontend . --no-cache
+
+      - name: 📦 Extract frontend docker image into archive
+        run: |
+          sudo /usr/bin/docker save codiki-frontend:latest -o ./codiki-frontend.tar
+      
+      - name: 📤 Transfer artifacts to remote server
+        env:
+          SSH_PRIVATE_KEY: ${{ secrets.PROD_SSH_PRIVATE_KEY }}
+          REMOTE_USER: ${{ secrets.PROD_REMOTE_USER }}
+          REMOTE_HOST: ${{ secrets.PROD_REMOTE_HOST }}
+          REMOTE_PORT: ${{ secrets.PROD_REMOTE_PORT }}
+          REMOTE_PATH: ${{ secrets.PROD_REMOTE_PATH }}
+        run: |
+          mkdir -p ~/.ssh
+          echo "$SSH_PRIVATE_KEY" > ~/.ssh/id_rsa
+          chmod 600 ~/.ssh/id_rsa
+          scp -o StrictHostKeyChecking=no -P $REMOTE_PORT ./codiki-backend.tar $REMOTE_USER@$REMOTE_HOST:$REMOTE_PATH
+          scp -o StrictHostKeyChecking=no -P $REMOTE_PORT ./codiki-frontend.tar $REMOTE_USER@$REMOTE_HOST:$REMOTE_PATH
+          scp -o StrictHostKeyChecking=no -P $REMOTE_PORT ./docker-compose.yml $REMOTE_USER@$REMOTE_HOST:$REMOTE_PATH
+
+      - name: 🚀 Launch application onto remote server
+        env:
+          SSH_PRIVATE_KEY: ${{ secrets.PROD_SSH_PRIVATE_KEY }}
+          REMOTE_USER: ${{ secrets.PROD_REMOTE_USER }}
+          REMOTE_HOST: ${{ secrets.PROD_REMOTE_HOST }}
+          REMOTE_PORT: ${{ secrets.PROD_REMOTE_PORT }}
+          REMOTE_PATH: ${{ secrets.PROD_REMOTE_PATH }}
+        run: |
+          ssh -o StrictHostKeyChecking=no $REMOTE_HOST -l $REMOTE_USER -p $REMOTE_PORT << EOC
+            cd $REMOTE_PATH
+            sudo /usr/bin/docker load < $REMOTE_PATH/codiki-backend.tar
+            sudo /usr/bin/docker load < $REMOTE_PATH/codiki-frontend.tar
+            sudo /usr/bin/docker compose down
+            sudo /usr/bin/docker compose up --detach
+          EOC

Dockerfile-backend

@@ -1,4 +1,4 @@
-FROM maven:3.9.9-eclipse-temurin-21 AS builder
+FROM maven:3.9.11-eclipse-temurin-21 AS builder
 WORKDIR /app
 COPY backend/pom.xml /app/
 COPY backend/codiki-application /app/codiki-application

Dockerfile-frontend

@@ -1,11 +1,11 @@
-FROM node:22-alpine AS builder
+FROM node:25-alpine AS builder
 WORKDIR /app
 COPY frontend /app
 RUN npm install
 RUN npm run build-prod-en
 RUN npm run build-prod-fr
 
-FROM nginx:1.27-alpine AS final
+FROM nginx:1.29-alpine AS final
 WORKDIR /app
 COPY --from=builder /app/dist/codiki/en/browser /usr/share/nginx/html/en/
 COPY --from=builder /app/dist/codiki/fr/browser/fr /usr/share/nginx/html/fr/

backend/codiki-exposition/pom.xml

@@ -33,28 +33,5 @@
             <groupId>org.apache.tika</groupId>
             <artifactId>tika-core</artifactId>
         </dependency>
-<!--        <dependency>-->
-<!--            <groupId>org.springframework.boot</groupId>-->
-<!--            <artifactId>spring-boot-starter-data-jpa</artifactId>-->
-<!--        </dependency>-->
-<!--        <dependency>-->
-<!--            <groupId>org.springframework.boot</groupId>-->
-<!--            <artifactId>spring-boot-starter-security</artifactId>-->
-<!--        </dependency>-->
-<!--        <dependency>-->
-<!--            <groupId>org.postgresql</groupId>-->
-<!--            <artifactId>postgresql</artifactId>-->
-<!--            <scope>runtime</scope>-->
-<!--        </dependency>-->
-<!--        <dependency>-->
-<!--            <groupId>org.springframework.boot</groupId>-->
-<!--            <artifactId>spring-boot-starter-test</artifactId>-->
-<!--            <scope>test</scope>-->
-<!--        </dependency>-->
-<!--        <dependency>-->
-<!--            <groupId>org.springframework.security</groupId>-->
-<!--            <artifactId>spring-security-test</artifactId>-->
-<!--            <scope>test</scope>-->
-<!--        </dependency>-->
     </dependencies>
 </project>

backend/codiki-exposition/src/main/java/org/codiki/exposition/configuration/security/SecurityConfiguration.java

@@ -29,7 +29,7 @@ public class SecurityConfiguration {
     public SecurityFilterChain securityFilterChain(
         HttpSecurity httpSecurity,
         JwtAuthenticationFilter jwtAuthenticationFilter
-    ) throws Exception {
+    ) {
         httpSecurity
             .csrf(AbstractHttpConfigurer::disable)
             .httpBasic(Customizer.withDefaults())

backend/codiki-infrastructure/src/main/java/org/codiki/infrastructure/configuration/JpaConfiguration.java

@@ -1,6 +1,6 @@
 package org.codiki.infrastructure.configuration;
 
-import org.springframework.boot.autoconfigure.domain.EntityScan;
+import org.springframework.boot.persistence.autoconfigure.EntityScan;
 import org.springframework.context.annotation.Configuration;
 import org.springframework.data.jpa.repository.config.EnableJpaRepositories;
 

backend/pom.xml

@@ -15,11 +15,11 @@
 		<java.version>21</java.version>
 		<maven.compiler.source>21</maven.compiler.source>
 		<maven.compiler.target>21</maven.compiler.target>
-		<jakarta.servlet-api.version>6.0.0</jakarta.servlet-api.version>
-		<java-jwt.version>4.4.0</java-jwt.version>
-		<postgresql.version>42.7.0</postgresql.version>
-		<tika-core.version>2.9.0</tika-core.version>
-		<commons-lang3.version>3.14.0</commons-lang3.version>
+		<jakarta.servlet-api.version>6.1.0</jakarta.servlet-api.version>
+		<java-jwt.version>4.5.0</java-jwt.version>
+		<postgresql.version>42.7.8</postgresql.version>
+		<tika-core.version>3.2.3</tika-core.version>
+		<commons-lang3.version>3.20.0</commons-lang3.version>
 	</properties>
 
 	<modules>
@@ -35,7 +35,7 @@
 			<dependency>
 				<groupId>org.springframework.boot</groupId>
 				<artifactId>spring-boot-dependencies</artifactId>
-				<version>3.2.0</version>
+				<version>4.0.1</version>
 				<type>pom</type>
 				<scope>import</scope>
 			</dependency>
@@ -84,8 +84,6 @@
 				<artifactId>commons-lang3</artifactId>
 				<version>${commons-lang3.version}</version>
 			</dependency>
-
-
 		</dependencies>
 	</dependencyManagement>
 

frontend/angular.json

@@ -24,13 +24,13 @@
       },
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:application",
+          "builder": "@angular/build:application",
           "options": {
             "outputPath": "dist/codiki",
             "index": "src/index.html",
             "browser": "src/main.ts",
             "polyfills": [
-              "zone.js"
+              "@angular/localize/init"
             ],
             "tsConfig": "tsconfig.app.json",
             "inlineStyleLanguage": "scss",
@@ -102,7 +102,7 @@
           "defaultConfiguration": ""
         },
         "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
+          "builder": "@angular/build:dev-server",
           "configurations": {
             "production-en": {
               "buildTarget": "codiki:build:production-en"
@@ -123,17 +123,15 @@
           "defaultConfiguration": "development"
         },
         "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "builder": "@angular/build:extract-i18n",
           "options": {
             "buildTarget": "codiki:build"
           }
         },
         "test": {
-          "builder": "@angular-devkit/build-angular:karma",
+          "builder": "@angular/build:karma",
           "options": {
             "polyfills": [
-              "zone.js",
-              "zone.js/testing"
             ],
             "tsConfig": "tsconfig.spec.json",
             "inlineStyleLanguage": "scss",
@@ -153,5 +151,31 @@
   },
   "cli": {
     "analytics": false
+  },
+  "schematics": {
+    "@schematics/angular:component": {
+      "type": "component"
+    },
+    "@schematics/angular:directive": {
+      "type": "directive"
+    },
+    "@schematics/angular:service": {
+      "type": "service"
+    },
+    "@schematics/angular:guard": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:interceptor": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:module": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:pipe": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:resolver": {
+      "typeSeparator": "."
+    }
   }
 }

frontend/conf/nginx.conf

@@ -44,7 +44,7 @@ http {
         }
 
         location ~ ^/api {
-            proxy_pass http://192.168.0.153:50011;
+            proxy_pass http://192.168.1.153:50011;
             proxy_set_header Host $host:$server_port;
             proxy_set_header X-Forwarded-Host $server_name;
             proxy_set_header X-Real-IP $remote_addr;

frontend/package.json

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

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

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

frontend/src/app/app.component.ts

@@ -1,14 +1,11 @@
-import { CommonModule } from '@angular/common';
-import { Component } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
-import { HeaderComponent } from './components/header/header.component';
-import { FooterComponent } from './components/footer/footer.component';
+import {Component} from '@angular/core';
+import {RouterOutlet} from '@angular/router';
+import {HeaderComponent} from './components/header/header.component';
+import {FooterComponent} from './components/footer/footer.component';
 
 @Component({
   selector: 'app-root',
-  standalone: true,
   imports: [
-    CommonModule,
     RouterOutlet,
     HeaderComponent,
     FooterComponent

frontend/src/app/app.config.ts

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

frontend/src/app/app.routes.ts

@@ -1,13 +1,16 @@
-import { Routes } from '@angular/router';
+import {Routes} from '@angular/router';
+import {alreadyAuthenticatedGuard} from './core/guard/already-authenticated.guard';
 
 export const routes: Routes = [
   {
     path: 'login',
-        loadComponent: () => import('./pages/login/login.component').then(module => module.LoginComponent)
+    loadComponent: () => import('./pages/login/login.component').then(module => module.LoginComponent),
+    canActivate: [alreadyAuthenticatedGuard]
   },
   {
     path: 'signin',
-        loadComponent: () => import('./pages/signin/signin.component').then(module => module.SigninComponent)
+    loadComponent: () => import('./pages/signin/signin.component').then(module => module.SigninComponent),
+    canActivate: [alreadyAuthenticatedGuard]
   },
   {
     path: 'disconnect',

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

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

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

@@ -8,32 +8,5 @@
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-
-        button {
-            padding: .8em 1.2em;
-            border-radius: 10em;
-            border: none;
-            background-color: #3f51b5;
-            color: white;
-            transition: background-color .2s ease-in-out;
-            cursor: pointer;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-        
-            &:hover {
-                background-color: #5b6ed8;
-            }
-        
-            &.secondary {
-                color: #3f51b5;
-                background-color: white;
-        
-                &:hover {
-                    background-color: #f2f4ff;
-                    cursor: pointer;
-                }
-            }
-        }
   }
 }

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

@@ -1,5 +1,6 @@
-import { Component, inject, Input } from "@angular/core";
-import { MAT_DIALOG_DATA, MatDialogRef } from "@angular/material/dialog";
+import {Component, inject} from "@angular/core";
+import {MatRippleModule} from "@angular/material/core";
+import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
 
 export interface ConfirmationDialogData {
   title: string;
@@ -8,10 +9,9 @@ export interface ConfirmationDialogData {
 
 @Component({
   selector: 'app-confirmation-dialog',
-    standalone: true,
   templateUrl: './confirmation-dialog.component.html',
   styleUrl: './confirmation-dialog.component.scss',
-    imports: []
+  imports: [MatRippleModule]
 })
 export class ConfirmationDialog {
   private readonly dialogRef = inject(MatDialogRef<ConfirmationDialog>);

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

@@ -1,8 +1,8 @@
 <div i18n>
   <span class="copy-left">&copy;</span>
-    2016 - 2024 All rights reserved
+  2016 - 2026 All rights reserved
   -
-    2.0-alpha
+  2.2
   <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

@@ -1,6 +1,6 @@
 :host {
   background-color: #3f51b5;
-    color: rgba(255,255,255,.6);
+  color: rgba(255, 255, 255, .6);
   display: flex;
   flex-direction: row;
   justify-content: space-around;
@@ -12,13 +12,15 @@
     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);
+      color: rgba(255, 255, 255, .6);
     }
 
     mat-icon {

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

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

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

@@ -1,5 +1,10 @@
 <div class="left">
-    <button type="button" (click)="sideMenu.open()" matTooltip="Click to show side menu" i18n-matTooltip>
+  <button type="button"
+          (click)="sideMenu.open()"
+          class="cod-button icon"
+          matTooltip="Click to show side menu"
+          matRipple
+          i18n-matTooltip>
     <mat-icon>menu</mat-icon>
   </button>
   <a [routerLink]="['/home']">
@@ -14,7 +19,10 @@
 
 <div class="right">
   @if (isAuthenticated) {
-        <button mat-button class="button" [matMenuTriggerFor]="authenticatedUserMenu">
+    <button type="button"
+            class="cod-button icon"
+            [matMenuTriggerFor]="authenticatedUserMenu"
+            matRipple>
       <mat-icon>more_vert</mat-icon>
     </button>
     <mat-menu #authenticatedUserMenu="matMenu">
@@ -30,7 +38,7 @@
       </div>
     </mat-menu>
   } @else {
-        <a [routerLink]="['/login']" class="button" matRipple i18n>Login</a>
+    <a [routerLink]="['/login']" class="cod-button" matRipple i18n>Login</a>
   }
 </div>
 <app-side-menu #sideMenu></app-side-menu>

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

@@ -8,7 +8,7 @@ $headerHeight: 3.5em;
   color: white;
   position: relative;
   height: $headerHeight;
-    box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
+  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
 
   div {
     display: flex;
@@ -26,25 +26,6 @@ $headerHeight: 3.5em;
       padding: 0 1em;
       z-index: 2;
 
-            button {
-                background-color: #3f51b5;
-                color: white;
-                border: none;
-                border-radius: 10em;
-                transition: background-color .2s ease-in-out;
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                $buttonSize: 2.5em;
-                width: $buttonSize;
-                height: $buttonSize;
-
-                &:hover {
-                    cursor: pointer;
-                    background-color: #5c6bc0;
-                }
-            }
-
       a {
         display: flex;
         flex-direction: row;
@@ -120,45 +101,10 @@ $headerHeight: 3.5em;
       top: 0;
       right: 0;
       z-index: 2;
+      margin-right: .5em;
 
-            a {
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                min-width: 5em;
-                color: white;
-                margin: 0.5em 0.5em;
-                border-radius: 10em;
-                text-decoration: none;
-                padding: 0 .8em;
-                background-color: #3f51b5;
-                transition: background-color .2s ease-in-out;
-
-                &:hover {
-                    background-color: #5c6bc0;
-                }
-            }
-
-             button {
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                min-width: 2.5em;
-                color: white;
-                margin: 0.5em 0.5em;
-                border-radius: 10em;
-                text-decoration: none;
-                padding: 0;
-                background-color: #3f51b5;
-                transition: background-color .2s ease-in-out;
-
-                &:hover {
-                    background-color: #5c6bc0;
-                }
-
-                mat-icon {
-                    margin: 0;
-                }
+      a, button {
+        margin: .5em;
       }
     }
   }

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

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

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

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

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

@@ -6,20 +6,6 @@
   position: relative;
   max-height: 90vh;
 
-    .close {
-        position: absolute;
-        top: 1em;
-        right: 1em;
-        width: 2.5em;
-        height: 2.5em;
-        border-radius: 10em;
-        border: none;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        cursor: pointer;
-    }
-
   header {
     flex: 1;
     display: flex;
@@ -39,40 +25,6 @@
           }
         }
       }
-
-            &.actions {
-                display: flex;
-                flex-direction: row-reverse;
-                justify-content: space-between;
-                align-items: center;
-
-                button {
-                    padding: .8em 1.2em;
-                    border-radius: 10em;
-                    border: none;
-                    background-color: #3f51b5;
-                    color: white;
-                    transition: background-color .2s ease-in-out;
-                    cursor: pointer;
-                    display: flex;
-                    justify-content: center;
-                    align-items: center;
-                
-                    &:hover {
-                        background-color: #5b6ed8;
-                    }
-                
-                    &.secondary {
-                        color: #3f51b5;
-                        background-color: white;
-                
-                        &:hover {
-                            background-color: #f2f4ff;
-                            cursor: pointer;
-                        }
-                    }
-                }
-            }
     }
   }
 }

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

@@ -1,10 +1,12 @@
-import { Component, inject } from "@angular/core";
-import { FormBuilder, FormControl, ReactiveFormsModule, Validators } from "@angular/forms";
-import { MatDialogRef } from "@angular/material/dialog";
-import { MatFormFieldModule } from "@angular/material/form-field";
-import { MatIcon } from "@angular/material/icon";
-import { MatInputModule } from "@angular/material/input";
-import { MatSelectModule } from '@angular/material/select';
+import {Component, inject} from "@angular/core";
+import {FormBuilder, FormControl, ReactiveFormsModule, Validators} from "@angular/forms";
+import {MatRippleModule} from "@angular/material/core";
+import {MatDialogRef} from "@angular/material/dialog";
+import {MatFormFieldModule} from "@angular/material/form-field";
+import {MatIcon} from "@angular/material/icon";
+import {MatInputModule} from "@angular/material/input";
+import {MatSelectModule} from '@angular/material/select';
+import {MatTooltip} from "@angular/material/tooltip";
 
 export interface ProgramingLanguage {
   code: string;
@@ -84,14 +86,15 @@ export const PROGRAMMING_LANGUAGES: ProgramingLanguage[] = [
 
 @Component({
   selector: 'app-code-block-dialog',
-    standalone: true,
   templateUrl: './code-block-dialog.component.html',
   styleUrl: './code-block-dialog.component.scss',
   imports: [
     MatFormFieldModule,
     MatIcon,
     MatInputModule,
+    MatRippleModule,
     MatSelectModule,
+    MatTooltip,
     ReactiveFormsModule,
   ]
 })

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

@@ -1,17 +1,23 @@
-<button type="button" class="close" (click)="closeDialog()">
+<button type="button"
+        (click)="closeDialog()"
+        class="cod-button icon secondary close"
+        matTooltip="Close"
+        matRipple
+        i18n-matTooltip>
   <mat-icon>close</mat-icon>
 </button>
 <header>
   <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" i18n-matTooltip/>
+      @for (picture of pictures; track picture) {
+        <img src="/api/pictures/{{picture.id}}" (click)="selectPicture(picture)" matTooltip="Choose this illustration"
+             i18n-matTooltip/>
       }
     } @else {
       <h2 i18n>There is no any picture.</h2>
@@ -19,10 +25,18 @@
   }
 </div>
 <footer>
-    <button type="button" class="secondary" matRipple (click)="closeDialog()" i18n>
+  <button type="button"
+          (click)="closeDialog()"
+          class="cod-button secondary"
+          matRipple
+          i18n>
     Cancel
   </button>
-    <button type="button" (click)="fileUpload.click()" matRipple i18n>
+  <button type="button"
+          (click)="fileUpload.click()"
+          class="cod-button"
+          matRipple
+          i18n>
     <mat-icon>upload_file</mat-icon>
     Add new picture
   </button>

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

@@ -6,20 +6,6 @@
   position: relative;
   max-height: 90vh;
 
-    .close {
-        position: absolute;
-        top: 1em;
-        right: 1em;
-        width: 2.5em;
-        height: 2.5em;
-        border-radius: 10em;
-        border: none;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        cursor: pointer;
-    }
-
   header {
     flex: 1;
     display: flex;
@@ -46,13 +32,13 @@
       object-fit: cover;
       border-radius: 1em;
       opacity: .9;
-            box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
+      box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
       transition: opacity .2s ease-in-out, box-shadow .2s ease-in-out;
 
       &:hover {
         cursor: pointer;
         opacity: 1;
-                box-shadow: 0 2px 5px 0 rgba(0,0,0,.32),0 2px 10px 0 rgba(0,0,0,.24);
+        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .32), 0 2px 10px 0 rgba(0, 0, 0, .24);
       }
     }
   }

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

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

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

@@ -1,8 +1,8 @@
-import { inject, Injectable } from "@angular/core";
-import { PictureRestService } from "../../../core/rest-services/picture/picture.rest-service";
-import { MatSnackBar } from "@angular/material/snack-bar";
-import { MatDialogRef } from "@angular/material/dialog";
-import { PictureSelectionDialog } from "./picture-selection-dialog.component";
+import {inject, Injectable} from "@angular/core";
+import {PictureRestService} from "../../../core/rest-services/picture/picture.rest-service";
+import {MatSnackBar} from "@angular/material/snack-bar";
+import {MatDialogRef} from "@angular/material/dialog";
+import {PictureSelectionDialog} from "./picture-selection-dialog.component";
 
 @Injectable()
 export class PictureSelectionDialogService {
@@ -18,7 +18,7 @@ export class PictureSelectionDialogService {
       .catch(error => {
         const errorMessage = $localize`An error occured while uploading a picture...`;
         console.error(errorMessage, error);
-                this.snackBar.open(errorMessage, $localize`Close`, { duration: 5000 });
+        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)">
@@ -10,11 +10,11 @@
           <div>
             <mat-form-field>
               <mat-label i18n>Title</mat-label>
-                            <input matInput type="text" formControlName="title" />
+              <input matInput type="text" formControlName="title"/>
             </mat-form-field>
             <mat-form-field>
               <mat-label i18n>Description</mat-label>
-                            <input matInput type="text" formControlName="description" />
+              <input matInput type="text" formControlName="description"/>
             </mat-form-field>
             <mat-form-field>
               <mat-label i18n>Category</mat-label>
@@ -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/>
@@ -37,25 +38,53 @@
         </div>
 
         <div class="actions">
-                    <button type="button" matTooltip="Click to insert a title 1 section" (click)="insertTitle(1)" i18n-matTooltip>
+          <button type="button"
+                  (click)="insertTitle(1)"
+                  matTooltip="Click to insert a title 1 section"
+                  matRipple
+                  i18n-matTooltip>
             H1
           </button>
-                    <button type="button" matTooltip="Click to insert a title 2 section" (click)="insertTitle(2)" i18n-matTooltip>
+          <button type="button"
+                  (click)="insertTitle(2)"
+                  matTooltip="Click to insert a title 2 section"
+                  matRipple
+                  i18n-matTooltip>
             H2
           </button>
-                    <button type="button" matTooltip="Click to insert a title 3 section" (click)="insertTitle(3)" i18n-matTooltip>
+          <button type="button"
+                  (click)="insertTitle(3)"
+                  matTooltip="Click to insert a title 3 section"
+                  matRipple
+                  i18n-matTooltip>
             H3
           </button>
-                    <button type="button" matTooltip="Click to insert a picture" (click)="selectAPicture()" i18n-matTooltip>
-                        <mat-icon>image</mat-icon>
-                    </button>
-                    <button type="button" matTooltip="Click to insert a link" (click)="insertLink()" i18n-matTooltip>
+          <button type="button"
+                  (click)="insertLink()"
+                  matTooltip="Click to insert a link"
+                  matRipple
+                  i18n-matTooltip>
             <mat-icon>link</mat-icon>
           </button>
-                    <button type="button" matTooltip="Click to insert a code block" (click)="displayCodeBlockDialog()" i18n-matTooltip>
+          <button type="button"
+                  (click)="selectAPicture()"
+                  matTooltip="Click to insert a picture"
+                  matRipple
+                  i18n-matTooltip>
+            <mat-icon>image</mat-icon>
+          </button>
+          <button type="button"
+                  (click)="displayCodeBlockDialog()"
+                  matTooltip="Click to insert a code block"
+                  matRipple
+                  i18n-matTooltip>
             <mat-icon>code</mat-icon>
           </button>
-                    <button type="button" disabled matTooltip="Click to display editor help" i18n-matTooltip>
+          <button type="button"
+                  matTooltip="Click to display editor help"
+                  disabled
+                  matRipple
+                  i18n-matTooltip>
             <mat-icon>help</mat-icon>
           </button>
         </div>
@@ -75,25 +104,29 @@
 
     <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 label="Save" [requestPending]="!!(isSaving$ | async)" i18n-label></app-submit-button>
-        <button type="button" class="secondary" (click)="goPreviousLocation()" i18n>
+    <app-submit-button [requestPending]="isSaving()" i18n>Save</app-submit-button>
+    <button type="button"
+            class="cod-button secondary"
+            (click)="goPreviousLocation()"
+            matRipple
+            i18n>
       Cancel
     </button>
   </footer>

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

@@ -9,7 +9,7 @@
     max-width: 80em;
     width: 90%;
     border-radius: .5em;
-        box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
+    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
 
     & > header {
       padding: 2em;
@@ -82,13 +82,13 @@
           cursor: pointer;
           border-radius: 1em;
           opacity: .9;
-                    box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
+          box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
           transition: opacity .2s ease-in-out, box-shadow .2s ease-in-out;
 
           &:hover {
             cursor: pointer;
             opacity: 1;
-                        box-shadow: 0 2px 5px 0 rgba(0,0,0,.32),0 2px 10px 0 rgba(0,0,0,.24);
+            box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .32), 0 2px 10px 0 rgba(0, 0, 0, .24);
           }
         }
       }
@@ -102,24 +102,18 @@
 
     button {
       padding: 0;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            width: 3em;
-            height: 3em;
-            box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
-            font-weight: bold;
-        }
-    }
-}
-
-button, a.button {
-    padding: .8em 1.2em;
       border-radius: 10em;
       border: none;
       background-color: #3f51b5;
       color: white;
       transition: background-color .2s ease-in-out;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 3em;
+      height: 3em;
+      box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
+      font-weight: bold;
 
       &:hover {
         background-color: #5b6ed8;
@@ -130,14 +124,6 @@ button, a.button {
         background-color: #5f6aa6;
         cursor: not-allowed;
       }
-
-    &.secondary {
-        color: #3f51b5;
-        background-color: white;
-
-        &:hover {
-            background-color: #f2f4ff;
-            cursor: pointer;
     }
   }
 }

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

@@ -1,24 +1,23 @@
-import { CommonModule, Location } from "@angular/common";
-import { Component, EventEmitter, inject, Input, OnChanges, OnDestroy, Output } from "@angular/core";
-import { FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators } from "@angular/forms";
-import { MatDialogModule } from "@angular/material/dialog";
-import { MatIconModule } from "@angular/material/icon";
-import { MatInputModule } from "@angular/material/input";
-import { MatProgressSpinnerModule } from "@angular/material/progress-spinner";
-import { MatSelectModule } from "@angular/material/select";
-import { MatTabsModule } from "@angular/material/tabs";
-import { MatTooltipModule } from "@angular/material/tooltip";
-import { map, Observable, of, Subscription } from "rxjs";
-import { Category } from "../../core/rest-services/category/model/category";
-import { Publication } from "../../core/rest-services/publications/model/publication";
-import { CategoryService } from "../../core/service/category.service";
-import { SubmitButtonComponent } from "../submit-button/submit-button.component";
-import { PictureSelectionDialog } from "./picture-selection-dialog/picture-selection-dialog.component";
-import { PublicationEditionService } from "./publication-edition.service";
+import {CommonModule, Location} from "@angular/common";
+import {Component, effect, inject, input, output, signal} from "@angular/core";
+import {FormGroup, ReactiveFormsModule} from "@angular/forms";
+import {MatDialogModule} from "@angular/material/dialog";
+import {MatIconModule} from "@angular/material/icon";
+import {MatInputModule} from "@angular/material/input";
+import {MatProgressSpinnerModule} from "@angular/material/progress-spinner";
+import {MatSelectModule} from "@angular/material/select";
+import {MatTabsModule} from "@angular/material/tabs";
+import {MatTooltipModule} from "@angular/material/tooltip";
+import {map, Observable} from "rxjs";
+import {Category} from "../../core/rest-services/category/model/category";
+import {DEFAULT_PUBLICATION, Publication} from "../../core/rest-services/publications/model/publication";
+import {CategoryService} from "../../core/service/category.service";
+import {SubmitButtonComponent} from "../submit-button/submit-button.component";
+import {PublicationEditionService} from "./publication-edition.service";
+import {MatRippleModule} from "@angular/material/core";
 
 @Component({
   selector: 'app-publication-edition',
-    standalone: true,
   templateUrl: './publication-edition.component.html',
   styleUrl: './publication-edition.component.scss',
   imports: [
@@ -26,51 +25,47 @@ import { PublicationEditionService } from "./publication-edition.service";
     MatDialogModule,
     MatIconModule,
     MatInputModule,
+    MatRippleModule,
     MatProgressSpinnerModule,
     MatSelectModule,
     MatTabsModule,
     MatTooltipModule,
-        PictureSelectionDialog,
     ReactiveFormsModule,
     SubmitButtonComponent
   ],
   providers: [PublicationEditionService]
 })
-export class PublicationEditionComponent implements OnChanges, OnDestroy {
-    @Input()
-    publication!: Publication;
-    @Input()
-    title!: string;
-    @Input()
-    isSaving$: Observable<boolean> = of(false);
-    @Output()
-    publicationSave = new EventEmitter<Publication>();
+export class PublicationEditionComponent {
+  readonly #categoryService = inject(CategoryService);
+  readonly #location = inject(Location);
+  readonly #publicationEditionService = inject(PublicationEditionService);
 
-    publicationInEdition!: Publication;
-    private readonly categoryService = inject(CategoryService);
-    private readonly formBuilder = inject(FormBuilder);
-    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>();
 
-    publicationEditionForm: FormGroup = this.formBuilder.group({
-        title: new FormControl<string | undefined>('', [Validators.required]),
-        description: new FormControl<string | undefined>('', [Validators.required]),
-        text: new FormControl<string | undefined>('', [Validators.required]),
-        illustrationId: new FormControl<string | undefined>('', [Validators.required]),
-        categoryId: new FormControl<string | undefined>('', [Validators.required])
+  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 isLoading$(): Observable<boolean> {
-        return this.publicationEditionService.isLoading$;
   }
 
-    get isPreviewing$(): Observable<boolean> {
-        return this.publicationEditionService.isPreviewing$;
+  get publicationEditionForm(): FormGroup {
+    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)
@@ -93,83 +88,28 @@ export class PublicationEditionComponent implements OnChanges, OnDestroy {
     return 0;
   }
 
-    ngOnChanges(): void {
-        this.ngOnDestroy();
-
-        this.publicationInEdition = this.publication;
-        this.publicationEditionService.init(this.publicationInEdition);
-
-        ['title', 'description', 'text'].forEach(fieldName => {
-            const fieldSubscription = this.publicationEditionForm.controls[fieldName].valueChanges
-                .pipe(
-                    map(value => value?.length ? value as string : '')
-                )
-                .subscribe(fieldValue => {
-                    switch (fieldName) {
-                        case 'title':
-                            this.publicationEditionService.editTitle(fieldValue);
-                            break;
-                        case 'description':
-                            this.publicationEditionService.editDescription(fieldValue);
-                            break;
-                        case 'text':
-                            this.publicationEditionService.editText(fieldValue);
-                            break;
-                        default:
-                            break;
-                    }
-                });
-            this.subscriptions.push(fieldSubscription);
-        });
-
-        const categoryIdChangeSubscription = this.publicationEditionForm.controls['categoryId'].valueChanges
-            .subscribe(newCategoryId => {
-                this.publicationEditionService.editCategoryId(newCategoryId);
-            });
-        this.subscriptions.push(categoryIdChangeSubscription);
-
-        const publicationSubscription = this.publicationEditionService.state$.subscribe(state => {
-            console.log(state.publication.parsedText.substring(0, 15));
-            this.publicationInEdition = state.publication;
-            this.publicationEditionForm.controls['title'].setValue(this.publicationInEdition.title, { emitEvent: false });
-            this.publicationEditionForm.controls['description'].setValue(this.publicationInEdition.description, { emitEvent: false });
-            this.publicationEditionForm.controls['text'].setValue(this.publicationInEdition.text, { emitEvent: false });
-            this.publicationEditionForm.controls['illustrationId'].setValue(this.publicationInEdition.illustrationId, { emitEvent: false });
-            this.publicationEditionForm.controls['categoryId'].setValue(this.publicationInEdition.categoryId, { emitEvent: false });
-        });
-        this.subscriptions.push(publicationSubscription);
-    }
-
-    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();
-    }
-
-    save(): void {
-        this.publicationSave.emit(this.publicationInEdition);
+    this.#publicationEditionService.displayCodeBlockDialog();
   }
 
   displayPictureSectionDialog(): void {
-        this.publicationEditionService.displayPictureSectionDialog();
+    this.#publicationEditionService.displayPictureSectionDialog();
   }
 
   updateCursorPosition(event: KeyboardEvent | MouseEvent): void {
@@ -179,13 +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);
+  }
+
   onTabChange(tabSelectedIndex: number): void {
     if (tabSelectedIndex === 1) {
-            this.publicationEditionService.loadPreview();
+      this.#publicationEditionService.loadPreview();
     }
   }
 }

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

@@ -1,15 +1,16 @@
-import { Location } from "@angular/common";
-import { inject, Injectable, OnDestroy } from "@angular/core";
-import { MatDialog } from "@angular/material/dialog";
-import { MatSnackBar } from "@angular/material/snack-bar";
-import { ActivatedRoute } from "@angular/router";
-import { BehaviorSubject, Observable, Subscription } from "rxjs";
-import { Publication } from "../../core/rest-services/publications/model/publication";
-import { PublicationRestService } from "../../core/rest-services/publications/publication.rest-service";
-import { copy } from "../../core/utils/ObjectUtils";
-import { CodeBlockDialog } from "./code-block-dialog/code-block-dialog.component";
-import { PictureSelectionDialog } from "./picture-selection-dialog/picture-selection-dialog.component";
-import { PreviewContentRequest } from "../../core/rest-services/publications/model/preview";
+import {Location} from "@angular/common";
+import {inject, Injectable, OnDestroy, Signal, signal} from "@angular/core";
+import {MatDialog} from "@angular/material/dialog";
+import {MatSnackBar} from "@angular/material/snack-bar";
+import {ActivatedRoute} from "@angular/router";
+import {debounceTime, distinctUntilChanged, Subscription} from "rxjs";
+import {DEFAULT_PUBLICATION, Publication} from "../../core/rest-services/publications/model/publication";
+import {PublicationRestService} from "../../core/rest-services/publications/publication.rest-service";
+import {copy} from "../../core/utils/ObjectUtils";
+import {CodeBlockDialog} from "./code-block-dialog/code-block-dialog.component";
+import {PictureSelectionDialog} from "./picture-selection-dialog/picture-selection-dialog.component";
+import {PreviewContentRequest} from "../../core/rest-services/publications/model/preview";
+import {FormBuilder, FormControl, FormGroup, Validators} from "@angular/forms";
 
 declare let Prism: any;
 
@@ -30,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 = {
@@ -56,109 +40,120 @@ const DEFAULT_STATE: PublicationEditionState = {
 
 @Injectable()
 export class PublicationEditionService implements OnDestroy {
-    private readonly activatedRoute = inject(ActivatedRoute);
-    private readonly publicationRestService = inject(PublicationRestService);
-    private readonly location = inject(Location);
-    private readonly snackBar = inject(MatSnackBar);
-    private readonly dialog = inject(MatDialog);
+  readonly #activatedRoute = inject(ActivatedRoute);
+  readonly #dialog = inject(MatDialog);
+  readonly #formBuilder = inject(FormBuilder);
+  readonly #location = inject(Location);
+  readonly #publicationRestService = inject(PublicationRestService);
+  readonly #snackBar = inject(MatSnackBar);
 
-    private isLoadingSubject = new BehaviorSubject<boolean>(false);
-    private stateSubject = new BehaviorSubject<PublicationEditionState>(copy(DEFAULT_STATE));
-    private subscriptions: Subscription[] = [];
-    private isSavingSubject = new BehaviorSubject<boolean>(false);
-    private isPreviewingSubject = new BehaviorSubject<boolean>(false);
+  #isLoading = signal(false);
+  #state = signal<PublicationEditionState>(copy(DEFAULT_STATE));
+  #isSaving = signal<boolean>(false);
+  #isPreviewing = signal<boolean>(false);
+  #subscriptions: Subscription[] = [];
+
+  publicationEditionForm: FormGroup = this.#formBuilder.group({
+    title: new FormControl<string | undefined>('', [Validators.required]),
+    description: new FormControl<string | undefined>('', [Validators.required]),
+    text: new FormControl<string | undefined>('', [Validators.required]),
+    illustrationId: new FormControl<string | undefined>('', [Validators.required]),
+    categoryId: new FormControl<string | undefined>('', [Validators.required])
+  });
 
   ngOnDestroy(): void {
-        this.subscriptions.forEach(subscription => subscription.unsubscribe());
+    this.#subscriptions.forEach(subscription => subscription.unsubscribe());
   }
 
-    private get _state(): PublicationEditionState {
-        return this.stateSubject.value;
+  #updateForm(): void {
+    const state = this.#state();
+    const publication = state.publication;
+
+    this.publicationEditionForm.controls['title'].setValue(publication.title);
+    this.publicationEditionForm.controls['description'].setValue(publication.description);
+    this.publicationEditionForm.controls['text'].setValue(publication.text);
+    this.publicationEditionForm.controls['illustrationId'].setValue(publication.illustrationId);
+    this.publicationEditionForm.controls['categoryId'].setValue(publication.categoryId);
   }
 
-    private _save(state: PublicationEditionState): void {
-        this.stateSubject.next(state);
+  get isLoading(): Signal<boolean> {
+    return this.#isLoading.asReadonly();
   }
 
-    get isLoading$(): Observable<boolean> {
-        return this.isLoadingSubject.asObservable();
+  get isSaving(): Signal<boolean> {
+    return this.#isSaving.asReadonly();
   }
 
-    get isSaving$(): Observable<boolean> {
-        return this.isSavingSubject.asObservable();
+  get isPreviewing(): Signal<boolean> {
+    return this.#isPreviewing.asReadonly();
   }
 
-    get isPreviewing$(): Observable<boolean> {
-        return this.isPreviewingSubject.asObservable();
+  get state(): Signal<PublicationEditionState> {
+    return this.#state.asReadonly();
   }
 
-    get state$(): Observable<PublicationEditionState> {
-        return this.stateSubject.asObservable();
+  get editedPublication(): 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.#state.set(state);
+    this.#updateForm();
+
+    const formValueChangesSubscription = this.publicationEditionForm.valueChanges
+      .pipe(
+        debounceTime(200),
+        distinctUntilChanged()
+      )
+      .subscribe(formValue => {
+        const state = this.#state();
+        const publication = state.publication;
+
+        publication.title = formValue.title;
+        publication.description = formValue.description;
+        publication.categoryId = formValue.categoryId;
+        publication.text = formValue.text;
+
+        this.#state.set(state);
+      });
+    this.#subscriptions.push(formValueChangesSubscription);
   }
 
-    editTitle(title: string): void {
-        const state = this._state;
-        state.publication.title = title;
-        this._save(state);
-    }
-
-    editDescription(description: string): void {
-        const state = this._state;
-        state.publication.description = description;
-        this._save(state);
-    }
-
-    editCategoryId(categoryId: string): void {
-        const state = this._state;
-        state.publication.categoryId = categoryId;
-        this._save(state);
-    }
-
-    editText(text: string): void {
-        const state = this._state;
-        state.publication.text = text;
-        this._save(state);
-    }
-
-    editIllustrationId(pictureId: string): void {
-        const state = this._state;
+  private editIllustrationId(pictureId: string): void {
+    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 => {
@@ -166,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 => {
@@ -178,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;
 
@@ -203,14 +198,15 @@ export class PublicationEditionService implements OnDestroy {
 
       publication.text = textWithTags;
 
-            this._save(state);
+      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 => {
@@ -218,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;
 
@@ -232,11 +228,12 @@ export class PublicationEditionService implements OnDestroy {
 
     publication.text = textWithTags;
 
-        this._save(state);
+    this.#state.set(state);
+    this.#updateForm();
   }
 
   insertLink(): void {
-        const state = this._state;
+    const state = this.#state();
 
     const publication = state.publication;
 
@@ -247,11 +244,12 @@ export class PublicationEditionService implements OnDestroy {
 
     publication.text = textWithTags;
 
-        this._save(state);
+    this.#state.set(state);
+    this.#updateForm();
   }
 
-    insertCodeBlock(programmingLanguage: string, codeBlock: string): void {
-        const state = this._state;
+  private insertCodeBlock(programmingLanguage: string, codeBlock: string): void {
+    const state = this.#state();
 
     const publication = state.publication;
 
@@ -262,27 +260,28 @@ export class PublicationEditionService implements OnDestroy {
 
     publication.text = textWithTags;
 
-        this._save(state);
+    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.html

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

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

@@ -12,14 +12,14 @@ $cardBorderRadius: .5em;
     display: flex;
     flex-direction: column;
     border-radius: $cardBorderRadius;
-        box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
+    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
     transition: box-shadow .2s ease-in-out;
     text-decoration: none;
     color: black;
     background-color: #ffffff;
 
     &:hover {
-            box-shadow: 0 4px 8px 0 rgba(0,0,0,.24),0 4px 14px 0 rgba(0,0,0,.16);
+      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .24), 0 4px 14px 0 rgba(0, 0, 0, .16);
     }
 
     img {

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

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

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

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

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

@@ -24,9 +24,10 @@
       border-radius: $borderRadiusValue;
       background-color: white;
       border: none;
-            top: .4em;
+      top: 0;
       right: 0;
       color: #aaaaaa;
+      padding: .3em;
 
       &:hover {
         background-color: #eee;

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

@@ -1,18 +1,18 @@
-import { HttpParams } from "@angular/common/http";
-import { Component, inject } from "@angular/core";
-import { FormBuilder, FormControl, ReactiveFormsModule, Validators } from "@angular/forms";
-import { MatIconModule } from "@angular/material/icon";
-import { Router } from "@angular/router";
+import {Component, inject} from "@angular/core";
+import {FormBuilder, FormControl, ReactiveFormsModule, Validators} from "@angular/forms";
+import {MatRippleModule} from "@angular/material/core";
+import {MatIconModule} from "@angular/material/icon";
+import {Router} from "@angular/router";
 
 
 @Component({
   selector: 'app-publications-search-bar',
   templateUrl: './publications-search-bar.component.html',
   styleUrl: './publications-search-bar.component.scss',
-    standalone: true,
   imports: [
-        ReactiveFormsModule,
-        MatIconModule
+    MatIconModule,
+    MatRippleModule,
+    ReactiveFormsModule
   ],
   providers: []
 })
@@ -27,8 +27,8 @@ export class PublicationsSearchBarComponent {
     const query = this.formGroup.controls.criteria.value
 
     if (query?.trim()) {
-            const queryParams = { 'query' : this.formGroup.controls.criteria.value ?? '' }
-            this.router.navigate(['/publications'], { queryParams });
+      const queryParams = {'query': this.formGroup.controls.criteria.value ?? ''}
+      this.router.navigate(['/publications'], {queryParams});
     } else {
       this.router.navigate(['/home']);
     }

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

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

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

@@ -1,62 +1,58 @@
-import { CommonModule } from "@angular/common";
-import { Component, EventEmitter, inject, OnDestroy, OnInit, Output, signal } from "@angular/core";
-import { MatIconModule } from "@angular/material/icon";
-import { DisplayableCategory, SideMenuService } from "../side-menu.service";
-import { Observable, Subscription } from "rxjs";
-import { RouterModule } from "@angular/router";
-import { Category } from "../../../core/rest-services/category/model/category";
+import {CommonModule} from "@angular/common";
+import {Component, inject, OnInit, output, Signal} from "@angular/core";
+import {MatIconModule} from "@angular/material/icon";
+import {DisplayableCategory, SideMenuService} from "../side-menu.service";
+import {RouterModule} from "@angular/router";
 
 @Component({
   selector: 'app-categories-menu',
-  standalone: true,
-  imports: [CommonModule, RouterModule, MatIconModule],
   templateUrl: './categories-menu.component.html',
+  imports: [
+    CommonModule,
+    RouterModule,
+    MatIconModule
+  ],
   styleUrl: './categories-menu.component.scss'
 })
-export class CategoriesMenuComponent implements OnInit, OnDestroy {
-  @Output()
-  categoryClicked = new EventEmitter<void>();
-  private sideMenuService = inject(SideMenuService);
-  private categoriesSubscription?: Subscription;
-  categories = signal<DisplayableCategory[]>([]);
+export class CategoriesMenuComponent implements OnInit {
+  readonly #sideMenuService = inject(SideMenuService);
+  categoryClicked = output<void>();
 
   ngOnInit(): void {
-    this.categoriesSubscription = this.sideMenuService.categories$
-      .subscribe(categories => this.categories.set(categories));
-    this.sideMenuService.loadCategories();
+    this.#sideMenuService.loadCategories();
   }
 
-  ngOnDestroy(): void {
-    this.categoriesSubscription?.unsubscribe();
+  get categories(): Signal<DisplayableCategory[]> {
+    return this.#sideMenuService.categories;
   }
 
-  setOpenned(category: DisplayableCategory): void {
+  setOpened(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.setOpenned(category);
+    this.#sideMenuService.setOpened(category);
   }
 
-  private closeAccordion(categoryDiv: HTMLElement): void {
+  #closeAccordion(categoryDiv: HTMLElement): void {
     const divContent = categoryDiv?.nextElementSibling as HTMLElement;
     divContent.style.maxHeight = '0';
   }
 
-  private openAccordion(categoryDiv: HTMLElement): void {
+  #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,14 +1,19 @@
-<div class="menu {{ isOpenned() ? 'displayed' : '' }}">
+<div class="menu {{ isOpened() ? 'displayed' : '' }}">
   <h1>
     <a [routerLink]="['/home']">
       <img src="assets/images/codiki.png" alt="logo"/>
       Codiki
     </a>
-        <button type="button" (click)="close()" matTooltip="Close the menu" i18n-matTooltip>
+    <button type="button"
+            (click)="close()"
+            class="cod-button icon"
+            matTooltip="Close the menu"
+            matRipple
+            i18n-matTooltip>
       <mat-icon>close</mat-icon>
     </button>
   </h1>
   <h2 i18n>Categories</h2>
-    <app-categories-menu (categoryClicked)="close()"></app-categories-menu>
+  <app-categories-menu (categoryClicked)="close()"/>
 </div>
-<div class="overlay {{ isOpenned() ? 'displayed' : ''}}" (click)="close()"></div>
+<div class="overlay {{ isOpened() ? 'displayed' : ''}}" (click)="close()"></div>

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

@@ -41,24 +41,6 @@
           height: $imageSize;
         }
       }
-
-            button {
-                border-radius: 10em;
-                border: none;
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                width: 2.5em;
-                height: 2.5em;
-                color: white;
-                background-color: #3f51b5;
-                transition: background-color .2s ease-in-out;
-
-                &:hover {
-                    cursor: pointer;
-                    background-color: #5c6bc0;
-                }
-            }
     }
 
     h2 {

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,11 +1,10 @@
-import { HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
-import { inject, Injectable } from '@angular/core';
-import { catchError, filter, Observable, Subject, switchMap, take, throwError } from 'rxjs';
-import { RefreshTokenRequest } from '../rest-services/user/model/refresh-token.model';
-import { UserRestService } from '../rest-services/user/user.rest-service';
-import { AuthenticationService } from '../service/authentication.service';
-import { Router } from '@angular/router';
-import { MatSnackBar } from '@angular/material/snack-bar';
+import {HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest} from '@angular/common/http';
+import {inject, Injectable} from '@angular/core';
+import {catchError, filter, Observable, Subject, switchMap, take, throwError} from 'rxjs';
+import {UserRestService} from '../rest-services/user/user.rest-service';
+import {AuthenticationService} from '../service/authentication.service';
+import {Router} from '@angular/router';
+import {MatSnackBar} from '@angular/material/snack-bar';
 
 @Injectable()
 export class JwtInterceptor implements HttpInterceptor {
@@ -41,23 +40,12 @@ export class JwtInterceptor implements HttpInterceptor {
       this.isRefreshingToken = true;
       this.refreshTokenSubject.next(undefined);
 
-            const refreshToken = this.authenticationService.getRefreshToken();
-            if (refreshToken) {
-                const refreshTokenRequest: RefreshTokenRequest = {
-                    refreshTokenValue: refreshToken
-                };
-                this.userRestService.refreshToken(refreshTokenRequest)
+      this.authenticationService.refreshToken()
         .then(refreshTokenResponse => {
-                        this.authenticationService.authenticate(refreshTokenResponse.accessToken, refreshTokenResponse.refreshToken);
           this.refreshTokenSubject.next(refreshTokenResponse.accessToken);
         })
-                    .catch(() => {
-                        return this.handleNoRefreshToken(initialError);
-                    })
+        .catch(() => this.handleNoRefreshToken(initialError))
         .finally(() => this.isRefreshingToken = false);
-            } else {
-                return this.handleNoRefreshToken(initialError);
-            }
     }
 
     return this.refreshTokenSubject.pipe(
@@ -83,7 +71,7 @@ export class JwtInterceptor implements HttpInterceptor {
     this.router.navigate(['/login']);
     this.refreshTokenSubject.next(undefined);
     this.authenticationService.unauthenticate();
-        this.snackBar.open($localize`You are unauthenticated. Please, re-authenticate before retrying your action.`, $localize`Close`, { duration: 5000 });
+    this.snackBar.open($localize`You are unauthenticated. Please, re-authenticate before retrying your action.`, $localize`Close`, {duration: 5000});
     return throwError(() => initialError);
   }
 }

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

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

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

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

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

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

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

@@ -1,9 +1,9 @@
-import { HttpClient } from "@angular/common/http";
-import { Injectable, inject } from "@angular/core";
-import { LoginRequest, LoginResponse } from "./model/login.model";
-import { lastValueFrom } from "rxjs";
-import { SigninRequest } from "./model/signin.model";
-import { RefreshTokenRequest } from "./model/refresh-token.model";
+import {HttpClient} from "@angular/common/http";
+import {inject, Injectable} from "@angular/core";
+import {LoginRequest, LoginResponse} from "./model/login.model";
+import {lastValueFrom} from "rxjs";
+import {SigninRequest} from "./model/signin.model";
+import {RefreshTokenRequest} from "./model/refresh-token.model";
 
 @Injectable({
   providedIn: 'root'

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

@@ -1,7 +1,9 @@
-import { inject, Injectable } from "@angular/core";
-import { User } from "../model/User";
-import { UserRestService } from "../rest-services/user/user.rest-service";
-import { RefreshTokenRequest } from "../rest-services/user/model/refresh-token.model";
+import {inject, Injectable} from "@angular/core";
+import {BehaviorSubject, interval} from "rxjs";
+import {User} from "../model/User";
+import {UserRestService} from "../rest-services/user/user.rest-service";
+import {RefreshTokenRequest} from "../rest-services/user/model/refresh-token.model";
+import {LoginResponse} from "../rest-services/user/model/login.model";
 
 const JWT_PARAM = 'jwt';
 const REFRESH_TOKEN_PARAM = 'refresh-token';
@@ -18,18 +20,30 @@ interface UserDetails {
   providedIn: 'root'
 })
 export class AuthenticationService {
+  private readonly AUTHENTICATION_CHECKING_PERIOD = 5 * 60 * 1000;
+  private isAuthenticatedSubject = new BehaviorSubject<boolean>(false);
+  private readonly userRestService = inject(UserRestService);
+
+  startAuthenticationCheckingProcess(): void {
+    this.checkIsAuthenticated();
+    interval(this.AUTHENTICATION_CHECKING_PERIOD)
+      .subscribe(() => this.checkIsAuthenticated());
+  }
 
   authenticate(token: string, refreshToken: string): void {
     localStorage.setItem(JWT_PARAM, token);
     localStorage.setItem(REFRESH_TOKEN_PARAM, refreshToken);
+    this.isAuthenticatedSubject.next(true);
   }
 
   unauthenticate(): void {
     localStorage.removeItem(JWT_PARAM);
+    localStorage.removeItem(REFRESH_TOKEN_PARAM);
+    this.isAuthenticatedSubject.next(false);
   }
 
   isAuthenticated(): boolean {
-        return !!localStorage.getItem(JWT_PARAM);
+    return this.isAuthenticatedSubject.value;
   }
 
   getAuthenticatedUser(): User | undefined {
@@ -45,7 +59,7 @@ export class AuthenticationService {
   }
 
   isTokenExpired(): boolean {
-        let result = false;
+    let result = true;
 
     const userDetails = this.extractUserDetails();
 
@@ -59,8 +73,43 @@ export class AuthenticationService {
     return result;
   }
 
+  refreshToken(): Promise<LoginResponse> {
+    const refreshToken = this.getRefreshToken();
+    if (refreshToken) {
+      const refreshTokenRequest: RefreshTokenRequest = {
+        refreshTokenValue: refreshToken
+      };
+      return this.userRestService.refreshToken(refreshTokenRequest)
+        .then(refreshTokenResponse => {
+          this.authenticate(refreshTokenResponse.accessToken, refreshTokenResponse.refreshToken);
+          return refreshTokenResponse;
+        });
+    }
+
+    return Promise.reject('No any refresh token found.');
+  }
+
+  checkIsAuthenticated(): Promise<void> {
+    return new Promise((resolve, reject) => {
+      const isTokenExpired = this.isTokenExpired();
+      if (isTokenExpired) {
+        if (this.getRefreshToken()) {
+          this.refreshToken()
+            .then(() => resolve())
+            .catch(() => reject());
+        } else {
+          this.isAuthenticatedSubject.next(false);
+        }
+      } else {
+        this.isAuthenticatedSubject.next(true);
+      }
+      resolve();
+    });
+
+  }
+
   private extractUserFromLocalStorage(): User | undefined {
-        let result: User | undefined = undefined;
+    let result: User | undefined;
 
     const userDetails = this.extractUserDetails();
     if (userDetails) {

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

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

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

@@ -1,11 +1,10 @@
-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';
+import {AuthenticationService} from '../../core/service/authentication.service';
+import {Router} from '@angular/router';
 
 @Component({
   selector: 'app-disconnection',
-  standalone: true,
   imports: [MatProgressSpinnerModule],
   templateUrl: './disconnection.component.html',
   styleUrl: './disconnection.component.scss'

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

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

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

@@ -1,14 +1,11 @@
-import { Component, OnDestroy, OnInit, inject, signal } from '@angular/core';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import { Observable, Subscription } from 'rxjs';
-import { PublicationListComponent } from '../../components/publication-list/publication-list.component';
-import { Publication } from '../../core/rest-services/publications/model/publication';
-import { HomeService } from './home.service';
-import { CommonModule } from '@angular/common';
+import {Component, inject, OnInit} from '@angular/core';
+import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
+import {PublicationListComponent} from '../../components/publication-list/publication-list.component';
+import {HomeService} from './home.service';
+import {CommonModule} from '@angular/common';
 
 @Component({
   selector: 'app-home',
-  standalone: true,
   imports: [
     CommonModule,
     MatProgressSpinnerModule,
@@ -18,27 +15,12 @@ import { CommonModule } from '@angular/common';
   styleUrl: './home.component.scss',
   providers: [HomeService]
 })
-export class HomeComponent implements OnInit, OnDestroy {
-  private homeService = inject(HomeService);
-  private isLoadingSubscription?: Subscription;
-  private publicationsSubscription?: Subscription;
-  isLoading = signal(false);
-  publicationsIsEmpty = signal(true);
-
-  get publications$(): Observable<Publication[]> {
-    return this.homeService.publications$;
-  }
+export class HomeComponent implements OnInit {
+  readonly #homeService = inject(HomeService);
+  isLoading = this.#homeService.isLoading;
+  publications = this.#homeService.publications;
 
   ngOnInit(): void {
-    this.isLoadingSubscription = this.homeService.isLoading$
-      .subscribe(isLoading => this.isLoading.set(isLoading));
-    this.publicationsSubscription = this.homeService.publications$
-      .subscribe(publications => this.publicationsIsEmpty.set(publications.length > 0));
-    this.homeService.startLatestPublicationsRetrieving();
-  }
-
-  ngOnDestroy(): void {
-    this.isLoadingSubscription?.unsubscribe();
-    this.publicationsSubscription?.unsubscribe();
+    this.#homeService.startLatestPublicationsRetrieving();
   }
 }

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

@@ -1,35 +1,34 @@
-import { Injectable, inject } from "@angular/core";
-import { PublicationRestService } from "../../core/rest-services/publications/publication.rest-service";
-import { BehaviorSubject, Observable } from "rxjs";
-import { MatSnackBar } from "@angular/material/snack-bar"
-import { Publication } from "../../core/rest-services/publications/model/publication";
+import {inject, Injectable, Signal, signal} from "@angular/core";
+import {PublicationRestService} from "../../core/rest-services/publications/publication.rest-service";
+import {MatSnackBar} from "@angular/material/snack-bar"
+import {Publication} from "../../core/rest-services/publications/model/publication";
 
 @Injectable()
 export class HomeService {
   private publicationRestService = inject(PublicationRestService);
   private snackBar = inject(MatSnackBar);
 
-    private 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 });
+        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.html

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

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

@@ -4,79 +4,4 @@
   justify-content: center;
   align-items: center;
   padding: 1em;
-
-    form {
-        width: 80%;
-        max-width: 20em;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        gap: 1em;
-        box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
-        border-radius: .5em;
-        padding: 1em 1.5em;
-        background-color: #ffffff;
-
-        h1 {
-            margin: 0;
-        }
-
-        div {
-            display: flex;
-            flex-direction: column;
-            position: relative;
-            gap: .1em;
-
-            mat-icon {
-                position: absolute;
-                top: 1.3em;
-                left: .5em;
-                color: #777;
-            }
-
-            &.actions {
-                flex-direction: row-reverse;
-                justify-content: space-between;
-                align-items: center;
-
-                a {
-                    color: #3f51b5;
-                    text-decoration: none;
-                }
-
-                button, a.button {
-                    padding: .8em 1.2em;
-                    border-radius: 10em;
-                    border: none;
-                    background-color: #3f51b5;
-                    color: white;
-                    transition: background-color .2s ease-in-out;
-                
-                    &:hover {
-                        background-color: #5b6ed8;
-                        cursor: pointer;
-                    }
-                }
-            }
-
-            label {
-                flex: 1;
-                font-style: italic;
-                padding-left: 1em;
-                color: #777;
-
-                .required {
-                    color: red;
-                }
-            }
-
-            input {
-                flex: 1;
-                background-color: #eeeeee;
-                border: none;
-                border-radius: 10em;
-                padding: 1em 1em 1em 3em;
-            }
-        }
-    }
 }

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

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

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

@@ -1,12 +1,12 @@
-import { Injectable, inject } from '@angular/core';
-import { BehaviorSubject, Observable } from 'rxjs';
-import { copy } from '../../core/utils/ObjectUtils';
-import { FormError } from '../../core/model/FormError';
-import { UserRestService } from '../../core/rest-services/user/user.rest-service';
-import { LoginRequest } from '../../core/rest-services/user/model/login.model';
-import { AuthenticationService } from '../../core/service/authentication.service';
-import { MatSnackBar } from '@angular/material/snack-bar';
-import { Router } from '@angular/router';
+import {inject, Injectable} from '@angular/core';
+import {BehaviorSubject, Observable} from 'rxjs';
+import {copy} from '../../core/utils/ObjectUtils';
+import {FormError} from '../../core/model/FormError';
+import {UserRestService} from '../../core/rest-services/user/user.rest-service';
+import {LoginRequest} from '../../core/rest-services/user/model/login.model';
+import {AuthenticationService} from '../../core/service/authentication.service';
+import {MatSnackBar} from '@angular/material/snack-bar';
+import {Router} from '@angular/router';
 
 export interface LoginState {
   request: LoginRequest;
@@ -60,18 +60,24 @@ export class LoginService {
   performLogin(): void {
     const state = this.state;
 
-    // Check state is valid
-
+    if (this.isStateValid(state)) {
       this.userRestService
         .login(state.request)
         .then((response) => {
           this.authenticationService.authenticate(response.accessToken, response.refreshToken);
-        this.snackBar.open($localize`Authentication succeeded!`, $localize`Close`, { duration: 5000 });
+          this.snackBar.open($localize`Authentication succeeded!`, $localize`Close`, {duration: 5000});
           this.router.navigate(['/home']);
         })
         .catch((error) => {
           console.error(error);
-        this.snackBar.open($localize`Authentication failed.`, $localize`Close`, { duration: 5000 });
+          this.snackBar.open($localize`Authentication failed.`, $localize`Close`, {duration: 5000});
         });
+    } else {
+      this.snackBar.open($localize`Please, fill the inputs before send.`, $localize`Close`, {duration: 5000});
+    }
+  }
+
+  isStateValid(state: LoginState): boolean {
+    return !!state.request.email?.trim().length && !!state.request.password?.length;
   }
 }

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

@@ -4,6 +4,7 @@
    class="new-publication"
    matTooltip="Add a new publication"
    matTooltipPosition="left"
+   matRipple
    i18n-matTooltip>
   +
 </a>
@@ -13,7 +14,7 @@
   <mat-spinner></mat-spinner>
 } @else {
   @if (isLoaded()) {
-        <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.scss

@@ -18,7 +18,7 @@ $newPublicationButtonSize: 1.7em;
     width: $newPublicationButtonSize;
     height: $newPublicationButtonSize;
     text-decoration: none;
-        box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
+    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
     transition: background-color .2s ease-in-out;
     font-size: 2.2em;
 

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

@@ -1,49 +1,35 @@
-import { Component, inject, OnDestroy, OnInit, signal } from "@angular/core";
-import { MatProgressSpinnerModule } from "@angular/material/progress-spinner";
-import { MyPublicationsService } from "./my-publications.service";
-import { Observable, Subscription } 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 {Component, inject, OnInit} from "@angular/core";
+import {MatProgressSpinnerModule} from "@angular/material/progress-spinner";
+import {MyPublicationsService} from "./my-publications.service";
+import {PublicationListComponent} from "../../components/publication-list/publication-list.component";
+import {CommonModule} from "@angular/common";
+import {RouterModule} from "@angular/router";
+import {MatTooltipModule} from "@angular/material/tooltip";
+import {MatRippleModule} from "@angular/material/core";
+
 
 @Component({
   selector: 'app-my-component',
-    standalone: true,
   templateUrl: './my-publications.component.html',
   styleUrl: './my-publications.component.scss',
   imports: [
     CommonModule,
     MatProgressSpinnerModule,
-        PublicationListComponent,
+    MatRippleModule,
     MatTooltipModule,
+    PublicationListComponent,
     RouterModule
   ],
   providers: [MyPublicationsService]
 })
-export class MyPublicationsComponent implements OnInit, OnDestroy {
+export class MyPublicationsComponent implements OnInit {
   private readonly myPublicationsService = inject(MyPublicationsService);
-    private isLoadingSubscription?: Subscription;
-    private isLoadedSubscription?: Subscription;
 
-    isLoading = signal(false);
-    isLoaded = signal(false);
-
-    get publications$(): Observable<Publication[]> {
-        return this.myPublicationsService.publications$;
-    }
+  publications = this.myPublicationsService.publications;
+  isLoading = this.myPublicationsService.isLoading;
+  isLoaded = this.myPublicationsService.isLoaded;
 
   ngOnInit(): void {
-        this.isLoadingSubscription = this.myPublicationsService.isLoading$
-            .subscribe(isLoading => this.isLoading.set(isLoading));
-        this.isLoadedSubscription = this.myPublicationsService.isLoaded$
-            .subscribe(isLoaded => this.isLoaded.set(isLoaded));
     this.myPublicationsService.loadAuthenticatedUserPublications();
   }
-
-    ngOnDestroy(): void {
-        this.isLoadingSubscription?.unsubscribe();
-        this.isLoadedSubscription?.unsubscribe();
-    }
 }

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

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

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

@@ -1,57 +1,56 @@
-import { inject, Injectable } from "@angular/core";
-import { PublicationRestService } from "../../core/rest-services/publications/publication.rest-service";
-import { AuthenticationService } from "../../core/service/authentication.service";
-import { BehaviorSubject, Observable } from "rxjs";
-import { Publication } from "../../core/rest-services/publications/model/publication";
-import { Router } from "@angular/router";
-import { MatSnackBar } from "@angular/material/snack-bar";
+import {inject, Injectable, Signal, signal} from "@angular/core";
+import {PublicationRestService} from "../../core/rest-services/publications/publication.rest-service";
+import {AuthenticationService} from "../../core/service/authentication.service";
+import {Publication} from "../../core/rest-services/publications/model/publication";
+import {Router} from "@angular/router";
+import {MatSnackBar} from "@angular/material/snack-bar";
 
 @Injectable()
 export class MyPublicationsService {
-    private readonly authenticationService = inject(AuthenticationService);
-    private readonly publicationRestService = inject(PublicationRestService);
-    private readonly snackBar = inject(MatSnackBar);
-    private readonly router = inject(Router);
-    private publicationsSubject = new BehaviorSubject<Publication[]>([]);
-    private isLoadingSubject = new BehaviorSubject<boolean>(false);
-    private isLoadedSubject = new BehaviorSubject<boolean>(false);
+  readonly #authenticationService = inject(AuthenticationService);
+  readonly #publicationRestService = inject(PublicationRestService);
+  readonly #snackBar = inject(MatSnackBar);
+  readonly #router = inject(Router);
+  #publications = signal<Publication[]>([]);
+  #isLoading = signal(false);
+  #isLoaded = signal(false);
 
-    get publications$(): Observable<Publication[]> {
-        return this.publicationsSubject.asObservable();
+  get publications(): Signal<Publication[]> {
+    return this.#publications.asReadonly();
   }
 
-    get isLoading$(): 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,9 +1,7 @@
-@if (publicationIsNotNull()) {
-    <app-publication-edition
+<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,78 +1,53 @@
-import { Component, computed, 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 { MatSnackBar } from "@angular/material/snack-bar";
-import { BehaviorSubject, Observable, Subscription } from "rxjs";
-import { Publication } from "../../core/rest-services/publications/model/publication";
-import { AuthenticationService } from "../../core/service/authentication.service";
-import { Author } from "../../core/rest-services/publications/model/author";
-import { CommonModule } from "@angular/common";
+import {Component, inject, OnInit, signal} from "@angular/core";
+import {PublicationEditionComponent} from "../../components/publication-edition/publication-edition.component";
+import {PublicationRestService} from "../../core/rest-services/publications/publication.rest-service";
+import {Router} from "@angular/router";
+import {MatSnackBar} from "@angular/material/snack-bar";
+import {DEFAULT_PUBLICATION, Publication} from "../../core/rest-services/publications/model/publication";
+import {AuthenticationService} from "../../core/service/authentication.service";
+import {Author} from "../../core/rest-services/publications/model/author";
 
 @Component({
   selector: 'app-publication-creation',
-    standalone: true,
   templateUrl: './publication-creation.component.html',
   styleUrl: './publication-creation.component.scss',
   imports: [
-        CommonModule,
     PublicationEditionComponent
   ]
 })
 export class PublicationCreationComponent implements OnInit {
-    private readonly authenticationService = inject(AuthenticationService);
-    private readonly publicationRestService = inject(PublicationRestService);
-    private readonly router = inject(Router);
-    private readonly snackBar = inject(MatSnackBar);
-    private isSavingSubject = new BehaviorSubject<boolean>(false);
-    private subscriptions: Subscription[] = [];
-    publication = signal<Publication | undefined>(undefined);
-    publicationIsNotNull = computed(() => !!this.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 ?? ''
       };
-            const newPublication: 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-creation/publication-creation.routes.ts

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

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

@@ -1,18 +1,16 @@
 @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,24 +1,22 @@
-import { CommonModule, Location } from '@angular/common';
-import { Component, inject, OnDestroy, OnInit, signal } from '@angular/core';
-import { ReactiveFormsModule } from '@angular/forms';
-import { MatDialogModule } from '@angular/material/dialog';
-import { MatIconModule } from '@angular/material/icon';
-import { MatInputModule } from '@angular/material/input';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import { MatSnackBar } from '@angular/material/snack-bar';
-import { MatTabsModule } from '@angular/material/tabs';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { ActivatedRoute, Router } from '@angular/router';
-import { BehaviorSubject, Observable, Subscription } from 'rxjs';
-import { PublicationEditionComponent } from '../../components/publication-edition/publication-edition.component';
-import { SubmitButtonComponent } from '../../components/submit-button/submit-button.component';
-import { Publication } from '../../core/rest-services/publications/model/publication';
-import { PublicationRestService } from '../../core/rest-services/publications/publication.rest-service';
-import { PictureSelectionDialog } from '../../components/publication-edition/picture-selection-dialog/picture-selection-dialog.component';
+import {CommonModule, Location} from '@angular/common';
+import {Component, effect, inject, Signal, signal} from '@angular/core';
+import {ReactiveFormsModule} from '@angular/forms';
+import {MatDialogModule} from '@angular/material/dialog';
+import {MatIconModule} from '@angular/material/icon';
+import {MatInputModule} from '@angular/material/input';
+import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
+import {MatSnackBar} from '@angular/material/snack-bar';
+import {MatTabsModule} from '@angular/material/tabs';
+import {MatTooltipModule} from '@angular/material/tooltip';
+import {ActivatedRoute, Router} from '@angular/router';
+import {PublicationEditionComponent} from '../../components/publication-edition/publication-edition.component';
+import {Publication} from '../../core/rest-services/publications/model/publication';
+import {PublicationRestService} from '../../core/rest-services/publications/publication.rest-service';
+import {toSignal} from "@angular/core/rxjs-interop";
+import {map} from "rxjs";
 
 @Component({
   selector: 'app-publication-update',
-  standalone: true,
   imports: [
     CommonModule,
     MatDialogModule,
@@ -27,67 +25,69 @@ import { PictureSelectionDialog } from '../../components/publication-edition/pic
     MatProgressSpinnerModule,
     MatTabsModule,
     MatTooltipModule,
-    PictureSelectionDialog,
     ReactiveFormsModule,
-    SubmitButtonComponent,
     PublicationEditionComponent
   ],
   templateUrl: './publication-update.component.html',
-  styleUrl: './publication-update.component.scss',
+  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 isSavingSubject = new BehaviorSubject<boolean>(false);
-  private subscriptions: Subscription[] = [];
-  isLoading = signal(false);
-  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 isSaving$(): Observable<boolean> {
-    return this.isSavingSubject.asObservable();
+  #publicationId$ = this.#activatedRoute.params
+    .pipe(map(queryParams => queryParams['publicationId']));
+  #publicationId = toSignal(this.#publicationId$, {initialValue: undefined});
+
+  get isLoading(): Signal<boolean> {
+    return this.#isLoading.asReadonly();
   }
 
-  ngOnInit(): void {
-    this.isLoading.set(true);
-    this.activatedRoute.paramMap.subscribe(params => {
-        const publicationId = params.get('publicationId');
-        if (publicationId == undefined) {
-            this.snackBar.open($localize`A technical error occurred while loading publication data.`, $localize`Close`, { duration: 5000 });
-            this.location.back();
-        } else {
-            this.publicationRestService.getById(publicationId)
+  get isSaving(): Signal<boolean> {
+    return this.#isSavingSubject.asReadonly();
+  }
+
+  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.isLoading.set(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();
       }
     });
   }
 
-  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-update/publication-update.routes.ts

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

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

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

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

@@ -2,8 +2,7 @@ $cardBorderRadius: .5em;
 
 :host {
   display: flex;
-    flex-direction: column;
-    align-items: center;
+  justify-content: center;
 
   .card {
     display: flex;
@@ -12,7 +11,7 @@ $cardBorderRadius: .5em;
     max-width: 80em;
     width: 90%;
     border-radius: .5em;
-        box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
+    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
 
     img {
       height: 12em;

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

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

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

@@ -1,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

@@ -1,28 +1,30 @@
-import { CommonModule } from "@angular/common";
-import { Component, inject, OnDestroy, OnInit } from "@angular/core";
-import { MatProgressSpinner } from "@angular/material/progress-spinner";
-import { ActivatedRoute } from "@angular/router";
-import { Observable, Subscription } from "rxjs";
-import { PublicationListComponent } from "../../components/publication-list/publication-list.component";
-import { Publication } from "../../core/rest-services/publications/model/publication";
-import { SearchPublicationsService } from "./search-publications.service";
+import {CommonModule} from "@angular/common";
+import {Component, effect, inject} from "@angular/core";
+import {MatProgressSpinner} from "@angular/material/progress-spinner";
+import {ActivatedRoute} from "@angular/router";
+import {PublicationListComponent} from "../../components/publication-list/publication-list.component";
+import {SearchPublicationsService} from "./search-publications.service";
+import {toSignal} from "@angular/core/rxjs-interop";
 
 @Component({
   selector: 'app-search-publications',
   templateUrl: './search-publications.component.html',
   styleUrl: './search-publications.component.scss',
-    standalone: true,
   imports: [CommonModule, MatProgressSpinner, PublicationListComponent],
   providers: [SearchPublicationsService]
 })
-export class SearchPublicationsComponent implements OnInit, OnDestroy {
+export class SearchPublicationsComponent {
   private searchPublicationsService = inject(SearchPublicationsService);
   private activatedRoute = inject(ActivatedRoute);
-    private queryParamsSubscription?: Subscription;
+  publications = this.searchPublicationsService.publications;
+  isLoading = this.searchPublicationsService.isLoading;
+  isLoaded = this.searchPublicationsService.isLoaded;
 
-    ngOnInit(): void {
-        this.queryParamsSubscription = this.activatedRoute.queryParamMap
-            .subscribe(params => {  
+  constructor() {
+    const queryParams = toSignal(this.activatedRoute.queryParamMap);
+    effect(() => {
+      let params = queryParams();
+      if (params) {
         const categoryId = params.get('category-id');
         if (categoryId) {
           this.searchPublicationsService.loadPublications(`category_id=${categoryId}`);
@@ -31,22 +33,7 @@ export class SearchPublicationsComponent implements OnInit, OnDestroy {
         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,49 +1,47 @@
-import { inject, Injectable } from "@angular/core";
-import { PublicationRestService } from "../../core/rest-services/publications/publication.rest-service";
-import { BehaviorSubject, Observable } from "rxjs";
-import { Publication } from "../../core/rest-services/publications/model/publication";
-import { MatSnackBar } from "@angular/material/snack-bar";
-
+import {inject, Injectable, Signal, signal} from "@angular/core";
+import {PublicationRestService} from "../../core/rest-services/publications/publication.rest-service";
+import {Publication} from "../../core/rest-services/publications/model/publication";
+import {MatSnackBar} from "@angular/material/snack-bar";
 
 @Injectable()
 export class SearchPublicationsService {
-    private publicationRestService = inject(PublicationRestService);
-    private publicationsSubject = new BehaviorSubject<Publication[]>([]);
-    private isLoadingSubject = new BehaviorSubject<boolean>(false);
-    private isLoadedSubject = new BehaviorSubject<boolean>(false);
-    private snackBar = inject(MatSnackBar);
+  #snackBar = inject(MatSnackBar);
+  #publicationRestService = inject(PublicationRestService);
+  #publications = signal<Publication[]>([]);
+  #isLoading = signal(false);
+  #isLoaded = signal(false);
 
-    get publications$(): Observable<Publication[]> {
-        return this.publicationsSubject.asObservable();
+  get 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.html

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

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

@@ -4,79 +4,4 @@
   justify-content: center;
   align-items: center;
   padding: 1em;
-
-    form {
-        width: 80%;
-        max-width: 20em;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        gap: 1em;
-        box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
-        border-radius: .5em;
-        padding: 1em 1.5em;
-        background-color: #ffffff;
-
-        h1 {
-            margin: 0;
-        }
-
-        div {
-            display: flex;
-            flex-direction: column;
-            position: relative;
-            gap: .1em;
-
-            mat-icon {
-                position: absolute;
-                top: 1.3em;
-                left: .5em;
-                color: #777;
-            }
-
-            &.actions {
-                flex-direction: row-reverse;
-                justify-content: space-between;
-                align-items: center;
-
-                button {
-                    padding: .8em 1.2em;
-                    border-radius: 10em;
-                    border: none;
-                    background-color: #3f51b5;
-                    color: white;
-                    transition: background-color .2s ease-in-out;
-
-                    &:hover {
-                        background-color: #5b6ed8;
-                        cursor: pointer;
-                    }
-                }
-
-                a {
-                    color: #3f51b5;
-                    text-decoration: none;
-                }
-            }
-
-            label {
-                flex: 1;
-                font-style: italic;
-                padding-left: 1em;
-                color: #777;
-
-                .required {
-                    color: red;
-                }
-            }
-
-            input {
-                flex: 1;
-                background-color: #eeeeee;
-                border: none;
-                border-radius: 10em;
-                padding: 1em 1em 1em 3em;
-            }
-        }
-    }
 }

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

@@ -1,18 +1,25 @@
-import { Component, OnDestroy, OnInit, inject } from '@angular/core';
-import { FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
-import { MatIconModule } from '@angular/material/icon';
-import { RouterModule } from '@angular/router';
-import { Subscription, debounceTime, distinctUntilChanged, map } from 'rxjs';
-import { SigninService } from './signin.service';
-import { LoginService } from '../login/login.service';
-import { FormError } from '../../core/model/FormError';
+import {Component, inject, OnDestroy, OnInit} from '@angular/core';
+import {FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
+import {MatIconModule} from '@angular/material/icon';
+import {RouterModule} from '@angular/router';
+import {debounceTime, distinctUntilChanged, map, Subscription} from 'rxjs';
+import {SigninService} from './signin.service';
+import {LoginService} from '../login/login.service';
+import {FormError} from '../../core/model/FormError';
+import {SubmitButtonComponent} from "../../components/submit-button/submit-button.component";
+import {MatRippleModule} from '@angular/material/core';
 
 @Component({
   selector: 'app-signin',
-  standalone: true,
-  imports: [ReactiveFormsModule, MatIconModule, RouterModule],
   templateUrl: './signin.component.html',
   styleUrl: './signin.component.scss',
+  imports: [
+    MatIconModule,
+    MatRippleModule,
+    ReactiveFormsModule,
+    RouterModule,
+    SubmitButtonComponent
+  ],
   providers: [SigninService, LoginService]
 })
 export class SigninComponent implements OnInit, OnDestroy {
@@ -76,10 +83,10 @@ export class SigninComponent implements OnInit, OnDestroy {
 
     const stateSubscription = this.signinService.state$
       .subscribe(state => {
-          this.signinForm.controls['pseudo'].setValue(state.request.pseudo, { emitEvent: false });
-          this.signinForm.controls['email'].setValue(state.request.email, { emitEvent: false });
-          this.signinForm.controls['password'].setValue(state.request.password, { emitEvent: false });
-          this.signinForm.controls['confirmPassword'].setValue(state.confirmPassword, { emitEvent: false });
+        this.signinForm.controls['pseudo'].setValue(state.request.pseudo, {emitEvent: false});
+        this.signinForm.controls['email'].setValue(state.request.email, {emitEvent: false});
+        this.signinForm.controls['password'].setValue(state.request.password, {emitEvent: false});
+        this.signinForm.controls['confirmPassword'].setValue(state.confirmPassword, {emitEvent: false});
       });
     this.subscriptions.push(stateSubscription);
   }

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

@@ -1,12 +1,12 @@
-import { Injectable, inject } from '@angular/core';
-import { SigninRequest } from '../../core/rest-services/user/model/signin.model';
-import { FormError } from '../../core/model/FormError';
-import { BehaviorSubject, Observable } from 'rxjs';
-import { copy } from '../../core/utils/ObjectUtils';
-import { UserRestService } from '../../core/rest-services/user/user.rest-service';
-import { MatSnackBar } from '@angular/material/snack-bar';
-import { Router } from '@angular/router';
-import { LoginService } from '../login/login.service';
+import {inject, Injectable} from '@angular/core';
+import {SigninRequest} from '../../core/rest-services/user/model/signin.model';
+import {FormError} from '../../core/model/FormError';
+import {BehaviorSubject, Observable} from 'rxjs';
+import {copy} from '../../core/utils/ObjectUtils';
+import {UserRestService} from '../../core/rest-services/user/user.rest-service';
+import {MatSnackBar} from '@angular/material/snack-bar';
+import {Router} from '@angular/router';
+import {LoginService} from '../login/login.service';
 
 export interface SigninState {
   request: SigninRequest;

frontend/src/design_system/button.scss

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

frontend/src/design_system/form.scss

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

frontend/src/design_system/index.scss

@@ -0,0 +1,2 @@
+@use './button.scss';
+@use './form.scss';

frontend/src/index.html

@@ -8,11 +8,11 @@
   <link rel="icon" type="image/x-icon" href="assets/images/favicon.ico">
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-  <link href="./assets/css/prism.css" rel="stylesheet" />
+  <link href="./assets/css/prism.css" rel="stylesheet"/>
 </head>
 <body class="mat-typography">
-  <app-root></app-root>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.8/clipboard.min.js"></script>
-  <script type="text/javascript" src="./assets/js/prism.js"></script>
+<app-root></app-root>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.8/clipboard.min.js"></script>
+<script type="text/javascript" src="./assets/js/prism.js"></script>
 </body>
 </html>

frontend/src/locale/messages-fr.json

@@ -3,7 +3,7 @@
   "translations": {
     "3603720768157919481": "Non",
     "4861926948802653243": "Oui",
-    "5277292207846698726": "{$START_TAG_SPAN}©{$CLOSE_TAG_SPAN} 2016 - 2024 Tous droits réservés - 2.0-alpha {$START_LINK}{$START_TAG_MAT_ICON}favorite{$CLOSE_TAG_MAT_ICON}{$CLOSE_LINK}",
+    "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}",
     "9214089025589249203": "Les indicateurs de vie du site seront disponibles ultérieurement...",
     "1711651175531679766": "La documentation sera disponible ultérieurement...",
     "6299155290121808295": "Développements realisés par",
@@ -11,6 +11,7 @@
     "3394094310583807145": "{$START_TAG_MAT_ICON}description{$CLOSE_TAG_MAT_ICON} Mes publications",
     "5690703874094076840": "{$START_TAG_MAT_ICON}logout{$CLOSE_TAG_MAT_ICON} Déconnexion",
     "2454050363478003966": "Connexion",
+    "7819314041543176992": "Fermer",
     "6379828571327118783": "Ajouter un bloc de code",
     "933522671092765466": "Langage de programmation",
     "5953425146193292178": "Bloc de code",
@@ -21,9 +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",
-    "6852365376059142995": "Une erreur est survenue lors du chargements de vos images.",
-    "7819314041543176992": "Fermer",
-    "6198966268398913224": "Une erreur technique est survenue lors de l'ajout de votre image.",
+    "2175978098886350409": "Une erreur est survenue lors du chargements de vos images.",
+    "2334964899406832924": "Une erreur technique est survenue lors de l'ajout de votre image.",
     "3603937053948195893": "Édition",
     "5701618810648052610": "Titre",
     "4902817035128594900": "Description",
@@ -32,8 +32,8 @@
     "382530603854484923": "Cliquez pour ajouter une section titre de niveau 1",
     "7918008528690631661": "Cliquez pour ajouter une section titre de niveau 2",
     "200884310255063303": "Cliquez pour ajouter une section titre de niveau 3",
-    "327371240590280003": "Cliquez pour ajouter une image",
     "2615926469669796978": "Cliquez pour ajouter un lien",
+    "327371240590280003": "Cliquez pour ajouter une image",
     "4689637499823680515": "Cliquez pour ajouter un bloc de code",
     "1065684538660053227": "Cliquez pour afficher l'aide",
     "6205355627445317276": "Contenu",
@@ -46,6 +46,7 @@
     "9122763438636464100": "Fermer le menu",
     "1902100407096396858": "Catégories",
     "6940115735259407353": "Une erreur est survenue lors du chargement des catégories.",
+    "3516191632292372377": "Vous ne pouvez pas accéder à cette page car vous êtes déjà connecté.",
     "3450287383703155559": "Vous n'êtes pas connecté. Veuillez vous connecter avant de réessayer.",
     "5455465794443528807": "You n'êtes pas connecté. Veuillez vous connecter avant de réessayer votre opération.",
     "4011987306265136481": "Déconnexion...",
@@ -59,6 +60,7 @@
     "2308975396733519902": "Créer un compte",
     "1037765878727976611": "Connexion réussie",
     "6034686865111167926": "Une erreur est survenue lors de la connexion.",
+    "5304730975301536612": "Veuillez renseigner tous les champs avant de valider.",
     "1041423751558601074": "Vos publications",
     "5463894166935799864": "Rédiger une nouvelle publication",
     "1519054954638405159": "Chargement de la liste de vos publications...",

frontend/src/locale/messages.json

@@ -1,9 +1,9 @@
 {
-  "locale": "en-UK",
+  "locale": "en",
   "translations": {
     "3603720768157919481": " No ",
     "4861926948802653243": " Yes ",
-    "5277292207846698726": "{$START_TAG_SPAN}©{$CLOSE_TAG_SPAN} 2016 - 2024 All rights reserved - 2.0-alpha {$START_LINK}{$START_TAG_MAT_ICON}favorite{$CLOSE_TAG_MAT_ICON}{$CLOSE_LINK}",
+    "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}",
     "9214089025589249203": "Health checking will be available in future...",
     "1711651175531679766": "Documentation will be available in future...",
     "6299155290121808295": "Development realised by",
@@ -11,6 +11,7 @@
     "3394094310583807145": "{$START_TAG_MAT_ICON}description{$CLOSE_TAG_MAT_ICON} My publications ",
     "5690703874094076840": "{$START_TAG_MAT_ICON}logout{$CLOSE_TAG_MAT_ICON} Disconnect ",
     "2454050363478003966": "Login",
+    "7819314041543176992": "Close",
     "6379828571327118783": "Add a code block",
     "933522671092765466": "Programming language",
     "5953425146193292178": "Code block",
@@ -21,9 +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 ",
-    "6852365376059142995": "An error occured while loading pictures.",
-    "7819314041543176992": "Close",
-    "6198966268398913224": "A technical error occured while uploading your picture.",
+    "2175978098886350409": "An error occurred while loading pictures.",
+    "2334964899406832924": "A technical error occurred while uploading your picture.",
     "3603937053948195893": "Edition",
     "5701618810648052610": "Title",
     "4902817035128594900": "Description",
@@ -32,8 +32,8 @@
     "382530603854484923": "Click to insert a title 1 section",
     "7918008528690631661": "Click to insert a title 2 section",
     "200884310255063303": "Click to insert a title 3 section",
-    "327371240590280003": "Click to insert a picture",
     "2615926469669796978": "Click to insert a link",
+    "327371240590280003": "Click to insert a picture",
     "4689637499823680515": "Click to insert a code block",
     "1065684538660053227": "Click to display editor help",
     "6205355627445317276": "Content",
@@ -46,6 +46,7 @@
     "9122763438636464100": "Close the menu",
     "1902100407096396858": "Categories",
     "6940115735259407353": "An error occured while loading categories.",
+    "3516191632292372377": "You can't access to this page because you are already authenticated.",
     "3450287383703155559": "You are unauthenticated. Please, log-in first.",
     "5455465794443528807": "You are unauthenticated. Please, re-authenticate before retrying your action.",
     "4011987306265136481": "Disconnection...",
@@ -59,6 +60,7 @@
     "2308975396733519902": "Create an account",
     "1037765878727976611": "Authentication succeeded!",
     "6034686865111167926": "Authentication failed.",
+    "5304730975301536612": "Please, fill the inputs before send.",
     "1041423751558601074": "Your publications",
     "5463894166935799864": "Add a new publication",
     "1519054954638405159": "Publication loading...",

frontend/src/main.ts

@@ -1,8 +1,8 @@
 /// <reference types="@angular/localize" />
 
-import { bootstrapApplication } from '@angular/platform-browser';
-import { appConfig } from './app/app.config';
-import { AppComponent } from './app/app.component';
+import {bootstrapApplication} from '@angular/platform-browser';
+import {appConfig} from './app/app.config';
+import {AppComponent} from './app/app.component';
 
 bootstrapApplication(AppComponent, appConfig)
   .catch((err) => console.error(err));

frontend/src/styles.scss

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

frontend/tsconfig.json

@@ -13,15 +13,11 @@
     "sourceMap": true,
     "declaration": false,
     "experimentalDecorators": true,
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "importHelpers": true,
     "target": "ES2022",
     "module": "ES2022",
-    "useDefineForClassFields": false,
-    "lib": [
-      "ES2022",
-      "dom"
-    ]
+    "useDefineForClassFields": false
   },
   "angularCompilerOptions": {
     "enableI18nLegacyMessageIdFormat": false,