Add interceptor to inject correlation id in http requests.

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

@@ -1,75 +0,0 @@
-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.11-eclipse-temurin-21 AS builder
+FROM maven:3.9.9-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:25-alpine AS builder
+FROM node:22-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.29-alpine AS final
+FROM nginx:1.27-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-application/src/main/java/org/codiki/application/security/model/CustomUserDetails.java

@@ -25,6 +25,10 @@ public class CustomUserDetails implements UserDetails {
             .toList();
     }
 
+    public User getUser() {
+        return user;
+    }
+
     @Override
     public String getUsername() {
         return user.id().toString();

backend/codiki-application/src/main/java/org/codiki/application/traffic/TrafficTraceUseCases.java

@@ -0,0 +1,47 @@
+package org.codiki.application.traffic;
+
+import jakarta.annotation.Nullable;
+import org.codiki.domain.traffic.exception.TrafficTraceCreationException;
+import org.codiki.domain.traffic.model.TrafficEndpoint;
+import org.codiki.domain.traffic.model.TrafficTrace;
+import org.codiki.domain.traffic.port.TrafficTracePort;
+import org.springframework.scheduling.annotation.Async;
+import org.springframework.stereotype.Component;
+
+import java.time.Clock;
+import java.time.ZonedDateTime;
+import java.util.UUID;
+
+import static java.util.Objects.isNull;
+import static org.codiki.domain.traffic.model.TrafficTrace.aTrafficTrace;
+
+@Component
+public class TrafficTraceUseCases {
+    private final TrafficTracePort trafficTracePort;
+    private final Clock clock;
+
+    public TrafficTraceUseCases(TrafficTracePort trafficTracePort, Clock clock) {
+        this.trafficTracePort = trafficTracePort;
+        this.clock = clock;
+    }
+
+    @Async
+    public void saveNewTrace(
+            TrafficEndpoint trafficEndpoint,
+            @Nullable UUID userId,
+            @Nullable String correlationId
+    ) {
+        if (isNull(trafficEndpoint)) {
+            throw new TrafficTraceCreationException("Traffic endpoint should not be null.");
+        }
+
+        TrafficTrace newTrace = aTrafficTrace()
+                .withId(UUID.randomUUID())
+                .withDateTime(ZonedDateTime.now(clock))
+                .withEndpoint(trafficEndpoint)
+                .withUserId(userId)
+                .withCorrelationId(correlationId)
+                .build();
+        trafficTracePort.save(newTrace);
+    }
+}

backend/codiki-application/src/main/java/org/codiki/application/user/UserUseCases.java

@@ -87,9 +87,7 @@ public class UserUseCases {
             .map(Authentication::getPrincipal)
             .filter(CustomUserDetails.class::isInstance)
             .map(CustomUserDetails.class::cast)
-            .map(CustomUserDetails::getUsername)
-            .map(UUID::fromString)
-            .flatMap(userPort::findById);
+            .map(CustomUserDetails::getUser);
     }
 
     private UserAuthenticationData generateAuthenticationData(User user) {

backend/codiki-domain/src/main/java/org/codiki/domain/traffic/exception/TrafficTraceCreationException.java

@@ -0,0 +1,9 @@
+package org.codiki.domain.traffic.exception;
+
+import org.codiki.domain.exception.FunctionnalException;
+
+public class TrafficTraceCreationException extends FunctionnalException {
+    public TrafficTraceCreationException(String message) {
+        super(message);
+    }
+}

backend/codiki-domain/src/main/java/org/codiki/domain/traffic/model/HttpMethod.java

@@ -0,0 +1,14 @@
+package org.codiki.domain.traffic.model;
+
+import java.util.Arrays;
+import java.util.Optional;
+
+public enum HttpMethod {
+    GET, POST, PUT, DELETE;
+
+    public static Optional<HttpMethod> fromString(String methodAsString) {
+        return Arrays.stream(values())
+                .filter(method -> method.name().equals(methodAsString))
+                .findFirst();
+    }
+}

backend/codiki-domain/src/main/java/org/codiki/domain/traffic/model/TrafficEndpoint.java

@@ -0,0 +1,6 @@
+package org.codiki.domain.traffic.model;
+
+public record TrafficEndpoint(
+        HttpMethod method,
+        String path
+) {}

backend/codiki-domain/src/main/java/org/codiki/domain/traffic/model/TrafficTrace.java

@@ -0,0 +1,55 @@
+package org.codiki.domain.traffic.model;
+
+import java.time.ZonedDateTime;
+import java.util.UUID;
+
+public record TrafficTrace(
+        UUID id,
+        ZonedDateTime dateTime,
+        TrafficEndpoint endpoint,
+        UUID userId,
+        String correlationId
+) {
+    public static Builder aTrafficTrace() {
+        return new Builder();
+    }
+
+    public static class Builder {
+        private UUID id;
+        private ZonedDateTime dateTime;
+        private TrafficEndpoint endpoint;
+        private UUID userId;
+        private String correlationId;
+
+        private Builder() {}
+
+        public Builder withId(UUID id) {
+            this.id = id;
+            return this;
+        }
+
+        public Builder withDateTime(ZonedDateTime dateTime) {
+            this.dateTime = dateTime;
+            return this;
+        }
+
+        public Builder withEndpoint(TrafficEndpoint endpoint) {
+            this.endpoint = endpoint;
+            return this;
+        }
+
+        public Builder withUserId(UUID userId) {
+            this.userId = userId;
+            return this;
+        }
+
+        public Builder withCorrelationId(String correlationId) {
+            this.correlationId = correlationId;
+            return this;
+        }
+
+        public TrafficTrace build() {
+            return new TrafficTrace(id, dateTime, endpoint, userId, correlationId);
+        }
+    }
+}

backend/codiki-domain/src/main/java/org/codiki/domain/traffic/port/TrafficTracePort.java

@@ -0,0 +1,14 @@
+package org.codiki.domain.traffic.port;
+
+import org.codiki.domain.traffic.model.TrafficTrace;
+
+import java.time.ZonedDateTime;
+import java.util.List;
+
+public interface TrafficTracePort {
+    void save(TrafficTrace trace);
+    List<TrafficTrace> getAllInPeriod(ZonedDateTime startDate, ZonedDateTime endDate);
+    List<TrafficTrace> getAllByCorrelationId(String correlationId);
+    Integer countAllInPeriod(ZonedDateTime startDate, ZonedDateTime endDate);
+    Integer countByCorrelationId(String correlationId);
+}

backend/codiki-exposition/pom.xml

@@ -25,6 +25,10 @@
             <groupId>org.springframework.boot</groupId>
             <artifactId>spring-boot-starter-web</artifactId>
         </dependency>
+        <dependency>
+            <groupId>org.springframework.boot</groupId>
+            <artifactId>spring-boot-starter-aop</artifactId>
+        </dependency>
         <dependency>
             <groupId>org.projectlombok</groupId>
             <artifactId>lombok</artifactId>

backend/codiki-exposition/src/main/java/org/codiki/exposition/configuration/TrafficTraceConfiguration.java

@@ -0,0 +1,12 @@
+package org.codiki.exposition.configuration;
+
+import org.springframework.context.annotation.Configuration;
+import org.springframework.context.annotation.EnableAspectJAutoProxy;
+import org.springframework.scheduling.annotation.EnableAsync;
+
+@Configuration
+@EnableAspectJAutoProxy
+@EnableAsync
+public class TrafficTraceConfiguration {
+
+}

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

@@ -38,10 +38,6 @@ public class JwtAuthenticationFilter extends OncePerRequestFilter {
             .filter(authorizationHeader -> !isEmpty(authorizationHeader))
             .filter(authorizationHeader -> authorizationHeader.startsWith(BEARER_PREFIX))
             .map(authorizationHeader -> authorizationHeader.substring(BEARER_PREFIX.length()))
-            .filter(token -> {
-                String authorizationHeader = request.getHeader(AUTHORIZATION);
-                return !isEmpty(authorizationHeader) && authorizationHeader.startsWith(BEARER_PREFIX);
-            })
             .filter(jwtService::isValid)
             .flatMap(jwtService::extractUser)
             .map(CustomUserDetails::new)

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-exposition/src/main/java/org/codiki/exposition/traffic/ApiCallsLoggerAspect.java

@@ -0,0 +1,75 @@
+package org.codiki.exposition.traffic;
+
+import jakarta.servlet.http.HttpServletRequest;
+import org.aspectj.lang.JoinPoint;
+import org.aspectj.lang.annotation.Aspect;
+import org.aspectj.lang.annotation.Before;
+import org.codiki.application.traffic.TrafficTraceUseCases;
+import org.codiki.application.user.UserUseCases;
+import org.codiki.domain.traffic.model.HttpMethod;
+import org.codiki.domain.traffic.model.TrafficEndpoint;
+import org.codiki.domain.user.model.User;
+import org.springframework.stereotype.Component;
+import org.springframework.web.context.request.RequestContextHolder;
+import org.springframework.web.context.request.ServletRequestAttributes;
+
+import java.util.Optional;
+import java.util.UUID;
+
+@Component
+@Aspect
+public class ApiCallsLoggerAspect {
+    private static final String HTTP_HEADER_CORRELATION_ID = "x-correlation-id";
+
+    private final TrafficTraceUseCases trafficTraceUseCases;
+    private final UserUseCases userUseCases;
+
+    public ApiCallsLoggerAspect(
+            TrafficTraceUseCases trafficTraceUseCases,
+            UserUseCases userUseCases
+    ) {
+        this.trafficTraceUseCases = trafficTraceUseCases;
+        this.userUseCases = userUseCases;
+    }
+
+    @Before("@annotation(org.springframework.web.bind.annotation.GetMapping)")
+    public void logGetApiCall(JoinPoint joinPoint) {
+       logApiCall();
+    }
+
+    @Before("@annotation(org.springframework.web.bind.annotation.PostMapping)")
+    public void logPostApiCall(JoinPoint joinPoint) {
+       logApiCall();
+    }
+    @Before("@annotation(org.springframework.web.bind.annotation.PutMapping)")
+    public void logPutApiCall(JoinPoint joinPoint) {
+       logApiCall();
+    }
+    @Before("@annotation(org.springframework.web.bind.annotation.DeleteMapping)")
+    public void logDeleteApiCall(JoinPoint joinPoint) {
+       logApiCall();
+    }
+
+    private void logApiCall() {
+        getHttpServletRequest().ifPresent(request ->
+                Optional.of(request.getMethod())
+                        .flatMap(HttpMethod::fromString)
+                        .ifPresent(queryHttpMethod -> {
+                            String queryUriPath = request.getRequestURI();
+                            TrafficEndpoint endpoint = new TrafficEndpoint(queryHttpMethod, queryUriPath);
+                            UUID userId = userUseCases.getAuthenticatedUser()
+                                    .map(User::id)
+                                    .orElse(null);
+                            String correlationId = request.getHeader(HTTP_HEADER_CORRELATION_ID);
+                            trafficTraceUseCases.saveNewTrace(endpoint, userId, correlationId);
+                        })
+        );
+    }
+
+    private static Optional<HttpServletRequest> getHttpServletRequest() {
+        return Optional.ofNullable(RequestContextHolder.getRequestAttributes())
+                .filter(ServletRequestAttributes.class::isInstance)
+                .map(ServletRequestAttributes.class::cast)
+                .map(ServletRequestAttributes::getRequest);
+    }
+}

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.persistence.autoconfigure.EntityScan;
+import org.springframework.boot.autoconfigure.domain.EntityScan;
 import org.springframework.context.annotation.Configuration;
 import org.springframework.data.jpa.repository.config.EnableJpaRepositories;
 

backend/codiki-infrastructure/src/main/java/org/codiki/infrastructure/traffic/TrafficTraceJpaAdapter.java

@@ -0,0 +1,45 @@
+package org.codiki.infrastructure.traffic;
+
+import org.codiki.domain.traffic.model.TrafficTrace;
+import org.codiki.domain.traffic.port.TrafficTracePort;
+import org.codiki.infrastructure.traffic.model.TrafficTraceEntity;
+import org.codiki.infrastructure.traffic.repository.TrafficTraceEntityJpaRepository;
+import org.springframework.stereotype.Component;
+
+import java.time.ZonedDateTime;
+import java.util.List;
+
+@Component
+public class TrafficTraceJpaAdapter implements TrafficTracePort {
+    private final TrafficTraceEntityJpaRepository repository;
+
+    public TrafficTraceJpaAdapter(TrafficTraceEntityJpaRepository repository) {
+        this.repository = repository;
+    }
+
+    @Override
+    public void save(TrafficTrace trace) {
+        TrafficTraceEntity entity = new TrafficTraceEntity(trace);
+        repository.save(entity);
+    }
+
+    @Override
+    public List<TrafficTrace> getAllInPeriod(ZonedDateTime startDate, ZonedDateTime endDate) {
+        return List.of();
+    }
+
+    @Override
+    public List<TrafficTrace> getAllByCorrelationId(String correlationId) {
+        return List.of();
+    }
+
+    @Override
+    public Integer countAllInPeriod(ZonedDateTime startDate, ZonedDateTime endDate) {
+        return 0;
+    }
+
+    @Override
+    public Integer countByCorrelationId(String correlationId) {
+        return 0;
+    }
+}

backend/codiki-infrastructure/src/main/java/org/codiki/infrastructure/traffic/model/HttpMethodEntity.java

@@ -0,0 +1,25 @@
+package org.codiki.infrastructure.traffic.model;
+
+import org.codiki.domain.traffic.model.HttpMethod;
+
+public enum HttpMethodEntity {
+    GET, POST, PUT, DELETE;
+
+    public HttpMethod toDomain() {
+        return switch (this) {
+            case GET -> HttpMethod.GET;
+            case POST -> HttpMethod.POST;
+            case PUT -> HttpMethod.PUT;
+            case DELETE -> HttpMethod.DELETE;
+        };
+    }
+
+    public static HttpMethodEntity fromDomain(HttpMethod method) {
+        return switch (method) {
+            case HttpMethod.GET -> GET;
+            case HttpMethod.POST -> POST;
+            case HttpMethod.PUT -> PUT;
+            case HttpMethod.DELETE -> DELETE;
+        };
+    }
+}

backend/codiki-infrastructure/src/main/java/org/codiki/infrastructure/traffic/model/TrafficTraceEntity.java

@@ -0,0 +1,56 @@
+package org.codiki.infrastructure.traffic.model;
+
+import jakarta.persistence.*;
+import lombok.AllArgsConstructor;
+import lombok.Getter;
+import lombok.NoArgsConstructor;
+import lombok.Setter;
+import org.codiki.domain.traffic.model.TrafficEndpoint;
+import org.codiki.domain.traffic.model.TrafficTrace;
+
+import java.time.ZonedDateTime;
+import java.util.UUID;
+
+import static org.codiki.domain.traffic.model.TrafficTrace.aTrafficTrace;
+
+@NoArgsConstructor
+@AllArgsConstructor
+@Getter
+@Setter
+@Entity
+@Table(name = "traffic")
+public class TrafficTraceEntity {
+    @Id
+    private UUID id;
+    @Column(nullable = false)
+    private ZonedDateTime dateTime;
+    @Column(nullable = false)
+    @Enumerated
+    private HttpMethodEntity endpointMethod;
+    @Column(nullable = false)
+    private String endpointPath;
+    private UUID userId;
+    private String correlationId;
+
+    public TrafficTraceEntity(TrafficTrace trace) {
+        id = trace.id();
+        dateTime = trace.dateTime();
+        endpointMethod = HttpMethodEntity.fromDomain(trace.endpoint().method());
+        endpointPath = trace.endpoint().path();
+        userId = trace.userId();
+        correlationId = trace.correlationId();
+    }
+
+    public TrafficTrace toDomain() {
+        return aTrafficTrace()
+                .withId(id)
+                .withDateTime(dateTime)
+                .withEndpoint(new TrafficEndpoint(
+                        endpointMethod.toDomain(),
+                        endpointPath
+                ))
+                .withUserId(userId)
+                .withCorrelationId(correlationId)
+                .build();
+    }
+}

backend/codiki-infrastructure/src/main/java/org/codiki/infrastructure/traffic/repository/TrafficTraceEntityJpaRepository.java

@@ -0,0 +1,12 @@
+package org.codiki.infrastructure.traffic.repository;
+
+import org.codiki.infrastructure.traffic.model.TrafficTraceEntity;
+import org.springframework.data.jpa.repository.JpaRepository;
+import org.springframework.stereotype.Repository;
+
+import java.util.UUID;
+
+@Repository
+public interface TrafficTraceEntityJpaRepository extends JpaRepository<TrafficTraceEntity, UUID> {
+
+}

backend/codiki-infrastructure/src/main/resources/sql/002-traffic-trace-table.sql

@@ -0,0 +1,11 @@
+CREATE TABLE IF NOT EXISTS traffic (
+    id UUID NOT NULL,
+    date_time TIMESTAMP WITH TIME ZONE NOT NULL,
+    endpoint_method SMALLINT NOT NULL,
+    endpoint_path VARCHAR NOT NULL,
+    user_id UUID,
+    correlation_id VARCHAR,
+    CONSTRAINT traffic_pk PRIMARY KEY (id),
+    CONSTRAINT traffic_user_id_fk FOREIGN KEY (user_id) REFERENCES "user" (id)
+);
+CREATE INDEX traffic_user_id_idx ON traffic (user_id);

backend/pom.xml

@@ -16,10 +16,10 @@
 		<maven.compiler.source>21</maven.compiler.source>
 		<maven.compiler.target>21</maven.compiler.target>
 		<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>
+		<java-jwt.version>4.4.0</java-jwt.version>
+		<tika-core.version>2.9.0</tika-core.version>
+		<postgresql.version>42.7.4</postgresql.version>
+		<commons-lang3.version>3.17.0</commons-lang3.version>
 	</properties>
 
 	<modules>
@@ -35,7 +35,7 @@
 			<dependency>
 				<groupId>org.springframework.boot</groupId>
 				<artifactId>spring-boot-dependencies</artifactId>
-				<version>4.0.1</version>
+				<version>3.3.4</version>
 				<type>pom</type>
 				<scope>import</scope>
 			</dependency>

frontend/angular.json

@@ -19,18 +19,18 @@
           "fr": {
             "translation": "src/locale/messages-fr.json"
           }
-
+          
         }
       },
       "architect": {
         "build": {
-          "builder": "@angular/build:application",
+          "builder": "@angular-devkit/build-angular:application",
           "options": {
             "outputPath": "dist/codiki",
             "index": "src/index.html",
             "browser": "src/main.ts",
             "polyfills": [
-              "@angular/localize/init"
+              "zone.js"
             ],
             "tsConfig": "tsconfig.app.json",
             "inlineStyleLanguage": "scss",
@@ -102,7 +102,7 @@
           "defaultConfiguration": ""
         },
         "serve": {
-          "builder": "@angular/build:dev-server",
+          "builder": "@angular-devkit/build-angular:dev-server",
           "configurations": {
             "production-en": {
               "buildTarget": "codiki:build:production-en"
@@ -123,15 +123,17 @@
           "defaultConfiguration": "development"
         },
         "extract-i18n": {
-          "builder": "@angular/build:extract-i18n",
+          "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
             "buildTarget": "codiki:build"
           }
         },
         "test": {
-          "builder": "@angular/build:karma",
+          "builder": "@angular-devkit/build-angular:karma",
           "options": {
             "polyfills": [
+              "zone.js",
+              "zone.js/testing"
             ],
             "tsConfig": "tsconfig.spec.json",
             "inlineStyleLanguage": "scss",
@@ -151,31 +153,5 @@
   },
   "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.1.153:50011;
+            proxy_pass http://192.168.0.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,26 +17,34 @@
   },
   "private": true,
   "dependencies": {
-    "@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"
+    "@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",
+    "uuid": "^10.0.0",
+    "zone.js": "~0.14.10"
   },
   "devDependencies": {
-    "@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"
+    "@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",
+    "@types/uuid": "^10.0.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"
   }
 }

frontend/src/app/app.component.html

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

frontend/src/app/app.component.scss

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

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

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

frontend/src/app/app.component.ts

@@ -1,11 +1,14 @@
-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 { 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';
 
 @Component({
   selector: 'app-root',
+  standalone: true,
   imports: [
+    CommonModule,
     RouterOutlet,
     HeaderComponent,
     FooterComponent

frontend/src/app/app.config.ts

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

frontend/src/app/app.routes.ts

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

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

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

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

@@ -1,12 +1,39 @@
 :host {
-  display: flex;
-  flex-direction: column;
-  text-align: center;
-  padding: 1em;
-
-  footer {
     display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-  }
-}
+    flex-direction: column;
+    text-align: center;
+    padding: 1em;
+
+    footer {
+        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,35 +1,35 @@
-import {Component, inject} from "@angular/core";
-import {MatRippleModule} from "@angular/material/core";
-import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
+import { Component, inject, Input } from "@angular/core";
+import { MAT_DIALOG_DATA, MatDialogRef } from "@angular/material/dialog";
 
 export interface ConfirmationDialogData {
-  title: string;
-  description: string;
+    title: string;
+    description: string;
 }
 
 @Component({
-  selector: 'app-confirmation-dialog',
-  templateUrl: './confirmation-dialog.component.html',
-  styleUrl: './confirmation-dialog.component.scss',
-  imports: [MatRippleModule]
+    selector: 'app-confirmation-dialog',
+    standalone: true,
+    templateUrl: './confirmation-dialog.component.html',
+    styleUrl: './confirmation-dialog.component.scss',
+    imports: []
 })
 export class ConfirmationDialog {
-  private readonly dialogRef = inject(MatDialogRef<ConfirmationDialog>);
-  data: ConfirmationDialogData = inject(MAT_DIALOG_DATA);
+    private readonly dialogRef = inject(MatDialogRef<ConfirmationDialog>);
+    data: ConfirmationDialogData = inject(MAT_DIALOG_DATA);
 
-  get title(): string {
-    return this.data.title;
-  }
+    get title(): string {
+        return this.data.title;
+    }
 
-  get description(): string {
-    return this.data.description;
-  }
+    get description(): string {
+        return this.data.description;
+    }
 
-  closeAndValidate(): void {
-    this.dialogRef.close(true);
-  }
+    closeAndValidate(): void {
+        this.dialogRef.close(true);
+    }
 
-  closeDialog(): void {
-    this.dialogRef.close(false);
-  }
-}
+    closeDialog(): void {
+        this.dialogRef.close(false);
+    }
+}

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

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

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

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

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

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

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

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

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

@@ -1,18 +1,21 @@
-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 { 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';
 
 @Component({
   selector: 'app-header',
+  standalone: true,
   imports: [
+    CommonModule,
     MatButtonModule,
     MatIconModule,
     MatMenuModule,
@@ -21,10 +24,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,37 +1,32 @@
-<button type="button"
-        (click)="closeDialog()"
-        class="cod-button icon secondary close"
-        matTooltip="Close"
-        matRipple
-        i18n-matTooltip>
-  <mat-icon>close</mat-icon>
+<button type="button" class="close" (click)="closeDialog()">
+    <mat-icon>close</mat-icon>
 </button>
 <header>
-  <h1 i18n>Add a code block</h1>
+    <h1 i18n>Add a code block</h1>
 </header>
-<form [formGroup]="formGroup" (submit)="closeAndValidate()" class="cod-form" ngNativeValidate>
-  <div class="form-content">
-    <mat-form-field>
-      <mat-label i18n>Programming language</mat-label>
-      <mat-select #programmingLanguageSelect formControlName="programmingLanguage">
-        @for (programmingLanguage of programmingLanguages; track programmingLanguage) {
-          <mat-option [value]="programmingLanguage.code">
-            {{ programmingLanguage.label }}
-          </mat-option>
-        }
-      </mat-select>
-    </mat-form-field>
-    <mat-form-field>
-      <mat-label i18n>Code block</mat-label>
-      <textarea matInput formControlName="codeBlock"></textarea>
-    </mat-form-field>
-  </div>
-  <div class="actions reversed">
-    <button type="submit" class="cod-button" matRipple i18n>
-      Validate
-    </button>
-    <button type="button" (click)="closeDialog()" class="cod-button secondary" matRipple i18n>
-      Cancel
-    </button>
-  </div>
+<form [formGroup]="formGroup" (submit)="closeAndValidate()" ngNativeValidate>
+    <div class="form-content">
+        <mat-form-field>
+            <mat-label i18n>Programming language</mat-label>
+            <mat-select #programmingLanguageSelect formControlName="programmingLanguage">
+                @for(programmingLanguage of programmingLanguages; track programmingLanguage) {
+                    <mat-option [value]="programmingLanguage.code">
+                        {{programmingLanguage.label}}
+                    </mat-option>
+                }
+            </mat-select>
+        </mat-form-field>
+        <mat-form-field>
+            <mat-label i18n>Code block</mat-label>
+            <textarea matInput formControlName="codeBlock"></textarea>
+        </mat-form-field>
+    </div>
+    <div class="actions">
+        <button type="submit" i18n>
+            Validate
+        </button>
+        <button type="button" (click)="closeDialog()" class="secondary" i18n>
+            Cancel
+        </button>
+    </div>
 </form>

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

@@ -1,30 +1,78 @@
 :host {
-  display: flex;
-  flex-direction: column;
-  padding: 1em;
-  gap: 1em;
-  position: relative;
-  max-height: 90vh;
-
-  header {
-    flex: 1;
     display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-  }
+    flex-direction: column;
+    padding: 1em;
+    gap: 1em;
+    position: relative;
+    max-height: 90vh;
 
-  form {
-    div {
-      &.form-content {
-        mat-form-field {
-          width: 100%;
-
-          textarea {
-            height: 30vh;
-          }
-        }
-      }
+    .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;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+    }
+
+    form {
+        div {
+            &.form-content {
+                mat-form-field {
+                    width: 100%;
+
+                    textarea {
+                        height: 30vh;
+                    }
+                }
+            }
+
+            &.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,119 +1,116 @@
-import {Component, inject} from "@angular/core";
-import {FormBuilder, FormControl, ReactiveFormsModule, Validators} from "@angular/forms";
-import {MatRippleModule} from "@angular/material/core";
-import {MatDialogRef} from "@angular/material/dialog";
-import {MatFormFieldModule} from "@angular/material/form-field";
-import {MatIcon} from "@angular/material/icon";
-import {MatInputModule} from "@angular/material/input";
-import {MatSelectModule} from '@angular/material/select';
-import {MatTooltip} from "@angular/material/tooltip";
+import { Component, inject } from "@angular/core";
+import { FormBuilder, FormControl, ReactiveFormsModule, Validators } from "@angular/forms";
+import { 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';
 
 export interface ProgramingLanguage {
-  code: string;
-  label: string;
+    code: string;
+    label: string;
 }
 
 export const PROGRAMMING_LANGUAGES: ProgramingLanguage[] = [
-  {
-    code: 'bash',
-    label: 'Bash'
-  },
-  {
-    code: 'c',
-    label: 'C'
-  },
-  {
-    code: 'cpp',
-    label: 'C++'
-  },
-  {
-    code: 'cs',
-    label: 'C#'
-  },
-  {
-    code: 'lua',
-    label: 'Lua'
-  },
-  {
-    code: 'java',
-    label: 'Java'
-  },
-  {
-    code: 'json5',
-    label: 'JSON'
-  },
-  {
-    code: 'kt',
-    label: 'Kotlin'
-  },
-  {
-    code: 'markup',
-    label: 'html/xml'
-  },
-  {
-    code: 'php',
-    label: 'PHP'
-  },
-  {
-    code: 'plsql',
-    label: 'PL/SQL'
-  },
-  {
-    code: 'python',
-    label: 'Python'
-  },
-  {
-    code: 'powershell',
-    label: 'PowerShell'
-  },
-  {
-    code: 'rust',
-    label: 'Rust'
-  },
-  {
-    code: 'sql',
-    label: 'SQL'
-  },
-  {
-    code: 'ts',
-    label: 'Typescript'
-  },
-  {
-    code: 'yml',
-    label: 'YAML'
-  },
+    {
+        code: 'bash',
+        label: 'Bash'
+    },
+    {
+        code: 'c',
+        label: 'C'
+    },
+    {
+        code: 'cpp',
+        label: 'C++'
+    },
+    {
+        code: 'cs',
+        label: 'C#'
+    },
+    {
+        code: 'lua',
+        label: 'Lua'
+    },
+    {
+        code: 'java',
+        label: 'Java'
+    },
+    {
+        code: 'json5',
+        label: 'JSON'
+    },
+    {
+        code: 'kt',
+        label: 'Kotlin'
+    },
+    {
+        code: 'markup',
+        label: 'html/xml'
+    },
+    {
+        code: 'php',
+        label: 'PHP'
+    },
+    {
+        code: 'plsql',
+        label: 'PL/SQL'
+    },
+    {
+        code: 'python',
+        label: 'Python'
+    },
+    {
+        code: 'powershell',
+        label: 'PowerShell'
+    },
+    {
+        code: 'rust',
+        label: 'Rust'
+    },
+    {
+        code: 'sql',
+        label: 'SQL'
+    },
+    {
+        code: 'ts',
+        label: 'Typescript'
+    },
+    {
+        code: 'yml',
+        label: 'YAML'
+    },
 ];
 
 @Component({
-  selector: 'app-code-block-dialog',
-  templateUrl: './code-block-dialog.component.html',
-  styleUrl: './code-block-dialog.component.scss',
-  imports: [
-    MatFormFieldModule,
-    MatIcon,
-    MatInputModule,
-    MatRippleModule,
-    MatSelectModule,
-    MatTooltip,
-    ReactiveFormsModule,
-  ]
+    selector: 'app-code-block-dialog',
+    standalone: true,
+    templateUrl: './code-block-dialog.component.html',
+    styleUrl: './code-block-dialog.component.scss',
+    imports: [
+        MatFormFieldModule,
+        MatIcon,
+        MatInputModule,
+        MatSelectModule,
+        ReactiveFormsModule,
+    ]
 })
 export class CodeBlockDialog {
-  private readonly dialogRef = inject(MatDialogRef<CodeBlockDialog>);
-  private formBuilder = inject(FormBuilder);
-  programmingLanguages = PROGRAMMING_LANGUAGES;
-  formGroup = this.formBuilder.group({
-    programmingLanguage: new FormControl('', Validators.required),
-    codeBlock: new FormControl('', Validators.required)
-  });
+    private readonly dialogRef = inject(MatDialogRef<CodeBlockDialog>);
+    private formBuilder = inject(FormBuilder);
+    programmingLanguages = PROGRAMMING_LANGUAGES;
+    formGroup = this.formBuilder.group({
+        programmingLanguage: new FormControl('', Validators.required),
+        codeBlock: new FormControl('', Validators.required)
+    });
 
-  closeAndValidate(): void {
-    if (this.formGroup.valid) {
-      this.dialogRef.close(this.formGroup.value);
+    closeAndValidate(): void {
+        if (this.formGroup.valid) {
+            this.dialogRef.close(this.formGroup.value);
+        }
     }
-  }
 
-  closeDialog(): void {
-    this.dialogRef.close();
-  }
-}
+    closeDialog(): void {
+        this.dialogRef.close();
+    }
+}

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,135 +1,191 @@
-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";
+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";
 
 @Component({
-  selector: 'app-publication-edition',
-  templateUrl: './publication-edition.component.html',
-  styleUrl: './publication-edition.component.scss',
-  imports: [
-    CommonModule,
-    MatDialogModule,
-    MatIconModule,
-    MatInputModule,
-    MatRippleModule,
-    MatProgressSpinnerModule,
-    MatSelectModule,
-    MatTabsModule,
-    MatTooltipModule,
-    ReactiveFormsModule,
-    SubmitButtonComponent
-  ],
-  providers: [PublicationEditionService]
+    selector: 'app-publication-edition',
+    standalone: true,
+    templateUrl: './publication-edition.component.html',
+    styleUrl: './publication-edition.component.scss',
+    imports: [
+        CommonModule,
+        MatDialogModule,
+        MatIconModule,
+        MatInputModule,
+        MatProgressSpinnerModule,
+        MatSelectModule,
+        MatTabsModule,
+        MatTooltipModule,
+        PictureSelectionDialog,
+        ReactiveFormsModule,
+        SubmitButtonComponent
+    ],
+    providers: [PublicationEditionService]
 })
-export class PublicationEditionComponent {
-  readonly #categoryService = inject(CategoryService);
-  readonly #location = inject(Location);
-  readonly #publicationEditionService = inject(PublicationEditionService);
+export class PublicationEditionComponent implements OnChanges, OnDestroy {
+    @Input()
+    publication!: Publication;
+    @Input()
+    title!: string;
+    @Input()
+    isSaving$: Observable<boolean> = of(false);
+    @Output()
+    publicationSave = new EventEmitter<Publication>();
 
-  publication = input.required<Publication>();
-  title = input.required<string>();
-  isSaving = input.required<boolean>();
-  publicationSave = output<Publication>();
+    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[] = [];
 
-  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);
-      }
+    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])
     });
-  }
 
-  get publicationEditionForm(): FormGroup {
-    return this.#publicationEditionService.publicationEditionForm;
-  }
-
-  get categories$(): Observable<Category[]> {
-    return this.#categoryService.categories$
-      .pipe(
-        map(categories =>
-          categories.filter(category => category.subCategories.length == 0)
-            .sort(this.byNameAscComparator())
-        )
-      );
-  }
-
-  private byNameAscComparator(): (categoryA: Category, categoryB: Category) => number {
-    return (categoryA, categoryB) => this.compareStrings(categoryA.name, categoryB.name);
-  }
-
-  private compareStrings(stringA: string, stringB: string): number {
-    if (stringA < stringB) {
-      return -1;
+    get isLoading$(): Observable<boolean> {
+        return this.publicationEditionService.isLoading$;
     }
-    if (stringA > stringB) {
-      return 1;
+
+    get isPreviewing$(): Observable<boolean> {
+        return this.publicationEditionService.isPreviewing$;
     }
-    return 0;
-  }
 
-  goPreviousLocation(): void {
-    this.#location.back();
-  }
-
-  insertTitle(titleNumber: number): void {
-    this.#publicationEditionService.insertTitle(titleNumber);
-  }
-
-  selectAPicture(): void {
-    this.#publicationEditionService.selectAPicture();
-  }
-
-  insertLink(): void {
-    this.#publicationEditionService.insertLink();
-  }
-
-  displayCodeBlockDialog(): void {
-    this.#publicationEditionService.displayCodeBlockDialog();
-  }
-
-  displayPictureSectionDialog(): void {
-    this.#publicationEditionService.displayPictureSectionDialog();
-  }
-
-  updateCursorPosition(event: KeyboardEvent | MouseEvent): void {
-    if (event.target) {
-      const textarea = event.target as HTMLTextAreaElement;
-
-      const positionStart = textarea.selectionStart;
-      const positionEnd = textarea.selectionEnd;
-
-      this.#publicationEditionService.editCursorPosition(positionStart, positionEnd);
+    get categories$(): Observable<Category[]> {
+        return this.categoryService.categories$
+            .pipe(
+                map(categories =>
+                    categories.filter(category => category.subCategories.length == 0)
+                    .sort(this.byNameAscComparator())
+                )
+            );
     }
-  }
 
-  save(): void {
-    this.publicationSave.emit(this.#publicationEditionService.editedPublication);
-  }
-
-  onTabChange(tabSelectedIndex: number): void {
-    if (tabSelectedIndex === 1) {
-      this.#publicationEditionService.loadPreview();
+    private byNameAscComparator(): (categoryA: Category, categoryB: Category) => number {
+        return (categoryA, categoryB) => this.compareStrings(categoryA.name, categoryB.name);
     }
-  }
-}
+
+    private compareStrings(stringA: string, stringB: string): number {
+        if (stringA < stringB) {
+            return -1;
+        }
+        if (stringA > stringB) {
+            return 1;
+        }
+        return 0;
+    }
+    
+    ngOnChanges(): void {
+        this.ngOnDestroy();
+
+        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();
+    }
+
+    insertTitle(titleNumber: number): void {
+        this.publicationEditionService.insertTitle(titleNumber);
+    }
+
+    selectAPicture(): void {
+        this.publicationEditionService.selectAPicture();
+    }
+
+    insertLink(): void {
+        this.publicationEditionService.insertLink();
+    }
+
+    displayCodeBlockDialog(): void {
+        this.publicationEditionService.displayCodeBlockDialog();
+    }
+
+    save(): void {
+        this.publicationSave.emit(this.publicationInEdition);
+    }
+
+    displayPictureSectionDialog(): void {
+        this.publicationEditionService.displayPictureSectionDialog();
+    }
+
+    updateCursorPosition(event: KeyboardEvent | MouseEvent): void {
+        if (event.target) {
+            const textarea = event.target as HTMLTextAreaElement;
+
+            const positionStart = textarea.selectionStart;
+            const positionEnd = textarea.selectionEnd;
+
+            this.publicationEditionService.editCursorPosition(positionStart, positionEnd);
+        }
+    }
+
+    onTabChange(tabSelectedIndex: number): void {
+        if (tabSelectedIndex === 1) {
+            this.publicationEditionService.loadPreview();
+        }
+    }
+}

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

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

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

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

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

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

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

@@ -1,15 +1,18 @@
-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";
+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";
 
 @Component({
-  selector: 'app-publication-list',
-  templateUrl: './publication-list.component.html',
-  styleUrl: './publication-list.component.scss',
-  imports: [CommonModule, RouterModule, MatTooltipModule]
+    selector: 'app-publication-list',
+    standalone: true,
+    templateUrl: './publication-list.component.html',
+    styleUrl: './publication-list.component.scss',
+    imports: [CommonModule, RouterModule, MatTooltipModule]
 })
 export class PublicationListComponent {
-  publications = input.required<Publication[]>();
-}
+    @Input()
+    publications$!: Observable<Publication[]>;
+}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,7 +1,8 @@
-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';
+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';
 
 export interface DisplayableCategory {
   id: string;
@@ -19,60 +20,68 @@ export interface DisplayableSubCategory {
   providedIn: 'root'
 })
 export class SideMenuService {
-  readonly #categoryRestService = inject(CategoryRestService);
-  readonly #snackBar = inject(MatSnackBar);
-  #categories = signal<DisplayableCategory[]>([]);
-  #isLoading = signal(false);
-  isLoaded = signal(false);
+  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);
 
-  #mapToDisplayableCategory(category: Category): DisplayableCategory {
+  private mapToDisplayableCategory(category: Category): DisplayableCategory {
     return {
       id: category.id,
       name: category.name,
-      subCategories: category.subCategories.map(subCategory => this.#mapToDisplayableSubCategory(subCategory)),
+      subCategories: category.subCategories.map(subCategory => this.mapToDisplayableSubCategory(subCategory)),
       isOpenned: false
     };
   }
 
-  #mapToDisplayableSubCategory(subCategory: Category): DisplayableSubCategory {
+  private mapToDisplayableSubCategory(subCategory: Category): DisplayableSubCategory {
     return {
       id: subCategory.id,
       name: subCategory.name
     }
   }
 
-  get categories(): Signal<DisplayableCategory[]> {
-    return this.#categories.asReadonly();
+  private get categories(): DisplayableCategory[] {
+    return this.categoriesSubject.value;
   }
 
-  get isLoading(): Signal<boolean> {
-    return this.#isLoading.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();
   }
 
   loadCategories(): void {
-    this.#isLoading.set(true);
-    this.isLoaded.set(false);
+    this.isLoadingSubject.next(true);
+    this.isLoadedSubject.next(false);
 
-    this.#categoryRestService.getCategories()
+    this.categoryRestService.getCategories()
       .then(categories => {
         const displayableCategories = categories
           .filter(category => category.subCategories?.length)
-          .map(category => this.#mapToDisplayableCategory(category));
-        this.#categories.set(displayableCategories);
+          .map(category => this.mapToDisplayableCategory(category));
+        this.categoriesSubject.next(displayableCategories);
       })
       .catch(error => {
         const errorMessage = $localize`An error occured while loading categories.`;
         console.error(errorMessage, error);
-        this.#snackBar.open(errorMessage, $localize`Close`, {duration: 5000});
+        this.snackBar.open(errorMessage, $localize`Close`, { duration: 5000 });
       })
       .finally(() => {
-        this.#isLoading.set(false);
-        this.isLoaded.set(true);
+        this.isLoadingSubject.next(false);
+        this.isLoadedSubject.next(true);
       });
   }
 
-  setOpened(category: DisplayableCategory): void {
-    const categories = this.#categories();
+  setOpenned(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);
@@ -82,7 +91,7 @@ export class SideMenuService {
         categories.forEach(categoryTemp => categoryTemp.isOpenned = false);
         matchingCategory.isOpenned = true;
       }
-      this.#categories.set(categories);
+      this.save(categories);
     }
   }
 }

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

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

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

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

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

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

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

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

frontend/src/app/core/interceptor/correlation-id.interceptor.ts

@@ -0,0 +1,20 @@
+import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from "@angular/common/http";
+import { inject, Injectable } from "@angular/core";
+import { Observable } from "rxjs";
+import { CorrelationIdService } from "../service/correlation-id.service";
+
+@Injectable()
+export class CorrelationIdInterceptor implements HttpInterceptor {
+    private readonly correlationIdService = inject(CorrelationIdService);
+
+    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+        const correlationId = this.correlationIdService.getCorrelationId();
+
+        const requestWithCorrelationId = request.clone({
+            headers: request.headers.set('x-correlation-id', correlationId)
+        });
+
+        return next.handle(requestWithCorrelationId);
+    }
+
+}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,8 +1,8 @@
-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';
+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';
 
 @Injectable({
   providedIn: 'root'
@@ -29,7 +29,7 @@ export class PublicationRestService {
   search(searchCriteria: string): Promise<Publication[]> {
     let params = new HttpParams();
     params = params.set('query', searchCriteria);
-    return lastValueFrom(this.httpClient.get<Publication[]>('/api/publications', {params}));
+    return lastValueFrom(this.httpClient.get<Publication[]>('/api/publications', { params }));
   }
 
   preview(request: PreviewContentRequest): Promise<PreviewContentResponse> {

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

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

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

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

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

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

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

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

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

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

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

@@ -1,7 +1,7 @@
-import {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';
+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';
 
 @Injectable({
   providedIn: 'root'

frontend/src/app/core/service/correlation-id.service.ts

@@ -0,0 +1,27 @@
+import { Injectable } from "@angular/core";
+import * as uuid from 'uuid';
+
+const CORRELATION_ID_KEY = 'correlationId';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class CorrelationIdService {
+    getCorrelationId(): string {
+        let correlationId = this.getCorrelationFromLocalStorage();
+        if (correlationId === undefined) {
+            correlationId = this.createNewCorrelationId();
+        }
+        return correlationId;
+    }
+
+    private getCorrelationFromLocalStorage(): string | undefined {
+        return localStorage.getItem(CORRELATION_ID_KEY) ?? undefined;
+    }
+
+    private createNewCorrelationId(): string {
+        const newCorrelationId = uuid.v4();
+        localStorage.setItem(CORRELATION_ID_KEY, newCorrelationId);
+        return newCorrelationId;
+    }
+}

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

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

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

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

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

@@ -1,10 +1,11 @@
-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 { Component, OnInit, inject } from '@angular/core';
+import {MatProgressSpinnerModule} from '@angular/material/progress-spinner'; 
+import { AuthenticationService } from '../../core/service/authentication.service';
+import { Router } from '@angular/router';
 
 @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,11 +1,11 @@
 <h1 i18n>Last publications</h1>
-@if ((isLoading())) {
-  <h2 i18n>Publications loading...</h2>
-  <mat-spinner/>
+@if ((isLoading$ | async) === true) {
+    <h2 i18n>Publications loading...</h2>
+    <mat-spinner></mat-spinner>
 } @else {
-  @if (publications(); as publications) {
-    <app-publication-list [publications]="publications"/>
-  } @else {
-    <h2 i18n>No any publication.</h2>
-  }
+    @if ((publications$ | async) != []) {
+        <app-publication-list [publications$]="publications$"></app-publication-list>
+    } @else {
+        <h2 i18n>No any publication.</h2>
+    }
 }

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

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

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

@@ -1,11 +1,14 @@
-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';
+import { Component, OnInit, inject } from '@angular/core';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { Observable } from 'rxjs';
+import { PublicationListComponent } from '../../components/publication-list/publication-list.component';
+import { Publication } from '../../core/rest-services/publications/model/publication';
+import { HomeService } from './home.service';
+import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'app-home',
+  standalone: true,
   imports: [
     CommonModule,
     MatProgressSpinnerModule,
@@ -16,11 +19,17 @@ import {CommonModule} from '@angular/common';
   providers: [HomeService]
 })
 export class HomeComponent implements OnInit {
-  readonly #homeService = inject(HomeService);
-  isLoading = this.#homeService.isLoading;
-  publications = this.#homeService.publications;
+  private homeService = inject(HomeService);
+
+  get isLoading$(): Observable<boolean> {
+    return this.homeService.isLoading$;
+  }
+
+  get publications$(): Observable<Publication[]> {
+    return this.homeService.publications$;
+  }
 
   ngOnInit(): void {
-    this.#homeService.startLatestPublicationsRetrieving();
+    this.homeService.startLatestPublicationsRetrieving();
   }
 }

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

@@ -1,34 +1,35 @@
-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";
+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";
 
 @Injectable()
 export class HomeService {
-  private publicationRestService = inject(PublicationRestService);
-  private snackBar = inject(MatSnackBar);
+    private publicationRestService = inject(PublicationRestService);
+    private snackBar = inject(MatSnackBar);
 
-  #publications = signal<Publication[]>([]);
-  #isLoadingSubject = signal<boolean>(false);
+    private publicationsSubject = new BehaviorSubject<Publication[]>([]);
+    private isLoadingSubject = new BehaviorSubject<boolean>(false);
 
-  get isLoading(): Signal<boolean> {
-    return this.#isLoadingSubject.asReadonly();
-  }
+    get isLoading$(): Observable<boolean> {
+        return this.isLoadingSubject.asObservable();
+    }
 
-  get publications(): Signal<Publication[]> {
-    return this.#publications.asReadonly();
-  }
+    get publications$(): Observable<Publication[]> {
+        return this.publicationsSubject.asObservable();
+    }
 
-  startLatestPublicationsRetrieving(): void {
-    this.#isLoadingSubject.set(true);
+    startLatestPublicationsRetrieving(): void {
+        this.isLoadingSubject.next(true);
 
-    this.publicationRestService.getLatest()
-      .then(publications => this.#publications.set(publications))
-      .catch(error => {
-        const errorMessage = $localize`An error occurred while retrieving latest publications...`;
-        this.snackBar.open(errorMessage, $localize`Close`, {duration: 5000});
-        console.error(errorMessage, error);
-      })
-      .finally(() => this.#isLoadingSubject.set(false));
-  }
-}
+        this.publicationRestService.getLatest()
+            .then(publications => this.publicationsSubject.next(publications))
+            .catch(error => {
+                const errorMessage = $localize`An error occurred while retrieving latest publications...`;
+                this.snackBar.open(errorMessage, $localize`Close`, { duration: 5000 });
+                console.error(errorMessage, error);
+            })
+            .finally(() => this.isLoadingSubject.next(false));
+    }
+}

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

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

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

@@ -1,7 +1,82 @@
 :host {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  padding: 1em;
-}
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 1em;
+
+    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;
+            }
+        }
+    }
+}