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:24-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(CustomUserDetails::getUser);
-            .map(UUID::fromString)
-            .flatMap(userPort::findById);
     }
 
     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>
+		<java-jwt.version>4.4.0</java-jwt.version>
-		<postgresql.version>42.7.8</postgresql.version>
+		<tika-core.version>2.9.0</tika-core.version>
-		<tika-core.version>3.2.3</tika-core.version>
+		<postgresql.version>42.7.4</postgresql.version>
-		<commons-lang3.version>3.20.0</commons-lang3.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

@@ -24,14 +24,13 @@
       },
       "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": [
-              "zone.js",
+              "zone.js"
-              "@angular/localize/init"
             ],
             "tsConfig": "tsconfig.app.json",
             "inlineStyleLanguage": "scss",
@@ -103,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"
@@ -124,13 +123,13 @@
           "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",
@@ -154,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/animations": "^18.2.5",
-    "@angular/cdk": "^21.1.2",
+    "@angular/cdk": "^18.2.5",
-    "@angular/common": "^21.1.2",
+    "@angular/common": "^18.2.5",
-    "@angular/compiler": "^21.1.2",
+    "@angular/compiler": "^18.2.5",
-    "@angular/core": "^21.1.2",
+    "@angular/core": "^18.2.5",
-    "@angular/forms": "^21.1.2",
+    "@angular/forms": "^18.2.5",
-    "@angular/material": "^21.1.2",
+    "@angular/material": "^18.2.5",
-    "@angular/platform-browser": "^21.1.2",
+    "@angular/platform-browser": "^18.2.5",
-    "@angular/platform-browser-dynamic": "^21.1.2",
+    "@angular/platform-browser-dynamic": "^18.2.5",
-    "@angular/router": "^21",
+    "@angular/router": "^18.2.5",
-    "rxjs": "~7.8.2",
+    "rxjs": "~7.8.0",
-    "tslib": "^2.8.1"
+    "tslib": "^2.3.0",
+    "uuid": "^10.0.0",
+    "zone.js": "~0.14.10"
   },
   "devDependencies": {
-    "@angular/build": "^21.1.2",
+    "@angular-devkit/build-angular": "^18.2.5",
-    "@angular/cli": "^21.1.2",
+    "@angular/cli": "^18.2.5",
-    "@angular/compiler-cli": "^21.1.2",
+    "@angular/compiler-cli": "^18.2.5",
-    "@angular/localize": "^21.1.2",
+    "@angular/localize": "^18.2.5",
-    "@types/jasmine": "~5.1.15",
+    "@types/jasmine": "~5.1.0",
-    "jasmine-core": "~5.13.0",
+    "@types/uuid": "^10.0.0",
-    "typescript": "~5.9.3"
+    "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.ts

@@ -1,4 +1,4 @@
-
+import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 import { HeaderComponent } from './components/header/header.component';
@@ -6,7 +6,9 @@ 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 { 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 { CorrelationIdInterceptor } from './core/interceptor/correlation-id.interceptor';
 
 export const appConfig: ApplicationConfig = {
   providers: [
@@ -19,9 +19,6 @@ export const appConfig: ApplicationConfig = {
     provideAnimationsAsync(),
     provideHttpClient(withInterceptorsFromDi()),
     { provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },
-    provideAppInitializer(() => {
+    { provide: HTTP_INTERCEPTORS, useClass: CorrelationIdInterceptor, multi: true },
-        const initializerFn = ((authenticationService: AuthenticationService) => () => authenticationService.startAuthenticationCheckingProcess())(inject(AuthenticationService));
-        return initializerFn();
-      })
   ]
 };

frontend/src/app/app.routes.ts

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

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

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

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

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

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

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

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

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

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

@@ -12,7 +12,6 @@
         display: flex;
         flex-direction: row;
         align-items: center;
-        gap: .2em;
 
         .copy-left {
             transform: rotate(180deg);

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

@@ -5,8 +5,11 @@ 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 {}
+export class FooterComponent {
+
+}

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

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

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

@@ -26,6 +26,25 @@ $headerHeight: 3.5em;
             padding: 0 1em;
             z-index: 2;
 
+            button {
+                background-color: #3f51b5;
+                color: white;
+                border: none;
+                border-radius: 10em;
+                transition: background-color .2s ease-in-out;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                $buttonSize: 2.5em;
+                width: $buttonSize;
+                height: $buttonSize;
+
+                &:hover {
+                    cursor: pointer;
+                    background-color: #5c6bc0;
+                }
+            }
+
             a {
                 display: flex;
                 flex-direction: row;
@@ -101,10 +120,45 @@ $headerHeight: 3.5em;
             top: 0;
             right: 0;
             z-index: 2;
-            margin-right: .5em;
 
-            a, button {
+            a {
-                margin: .5em;
+                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;
+                }
             }
         }
     }

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

@@ -1,4 +1,4 @@
-
+import { CommonModule } from '@angular/common';
 import { Component, inject } from '@angular/core';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
@@ -13,7 +13,9 @@ import { SideMenuComponent } from '../side-menu/side-menu.component';
 
 @Component({
   selector: 'app-header',
+  standalone: true,
   imports: [
+    CommonModule,
     MatButtonModule,
     MatIconModule,
     MatMenuModule,
@@ -22,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,15 +1,10 @@
-<button type="button"
+<button type="button" class="close" (click)="closeDialog()">
-        (click)="closeDialog()"
-        class="cod-button icon secondary close"
-        matTooltip="Close"
-        matRipple
-        i18n-matTooltip>
     <mat-icon>close</mat-icon>
 </button>
 <header>
     <h1 i18n>Add a code block</h1>
 </header>
-<form [formGroup]="formGroup" (submit)="closeAndValidate()" class="cod-form" ngNativeValidate>
+<form [formGroup]="formGroup" (submit)="closeAndValidate()" ngNativeValidate>
     <div class="form-content">
         <mat-form-field>
             <mat-label i18n>Programming language</mat-label>
@@ -26,11 +21,11 @@
             <textarea matInput formControlName="codeBlock"></textarea>
         </mat-form-field>
     </div>
-    <div class="actions reversed">
+    <div class="actions">
-        <button type="submit" class="cod-button" matRipple i18n>
+        <button type="submit" i18n>
             Validate
         </button>
-        <button type="button" (click)="closeDialog()" class="cod-button secondary" matRipple i18n>
+        <button type="button" (click)="closeDialog()" class="secondary" i18n>
             Cancel
         </button>
     </div>

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

@@ -6,6 +6,20 @@
     position: relative;
     max-height: 90vh;
 
+    .close {
+        position: absolute;
+        top: 1em;
+        right: 1em;
+        width: 2.5em;
+        height: 2.5em;
+        border-radius: 10em;
+        border: none;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+    }
+
     header {
         flex: 1;
         display: flex;
@@ -25,6 +39,40 @@
                     }
                 }
             }
+
+            &.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,12 +1,10 @@
 import { Component, inject } from "@angular/core";
 import { FormBuilder, FormControl, ReactiveFormsModule, Validators } from "@angular/forms";
-import { MatRippleModule } from "@angular/material/core";
 import { MatDialogRef } from "@angular/material/dialog";
 import { MatFormFieldModule } from "@angular/material/form-field";
 import { MatIcon } from "@angular/material/icon";
 import { MatInputModule } from "@angular/material/input";
 import { MatSelectModule } from '@angular/material/select';
-import { MatTooltip } from "@angular/material/tooltip";
 
 export interface ProgramingLanguage {
     code: string;
@@ -86,15 +84,14 @@ export const PROGRAMMING_LANGUAGES: ProgramingLanguage[] = [
 
 @Component({
     selector: 'app-code-block-dialog',
+    standalone: true,
     templateUrl: './code-block-dialog.component.html',
     styleUrl: './code-block-dialog.component.scss',
     imports: [
         MatFormFieldModule,
         MatIcon,
         MatInputModule,
-        MatRippleModule,
         MatSelectModule,
-        MatTooltip,
         ReactiveFormsModule,
     ]
 })

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

@@ -1,16 +1,11 @@
-<button type="button"
+<button type="button" class="close" (click)="closeDialog()">
-        (click)="closeDialog()"
-        class="cod-button icon secondary close"
-        matTooltip="Close"
-        matRipple
-        i18n-matTooltip>
     <mat-icon>close</mat-icon>
 </button>
 <header>
     <h1 i18n>Select an illustration</h1>
 </header>
 <div class="picture-container">
-    @if (isLoading()) {
+    @if (isLoading) {
         <h2 i18n>Pictures loading...</h2>
         <mat-spinner></mat-spinner>
     } @else {
@@ -24,18 +19,10 @@
     }
 </div>
 <footer>
-    <button type="button"
+    <button type="button" class="secondary" matRipple (click)="closeDialog()" i18n>
-            (click)="closeDialog()"
-            class="cod-button secondary"
-            matRipple
-            i18n>
         Cancel
     </button>
-    <button type="button"
+    <button type="button" (click)="fileUpload.click()" matRipple i18n>
-            (click)="fileUpload.click()"
-            class="cod-button"
-            matRipple
-            i18n>
         <mat-icon>upload_file</mat-icon>
         Add new picture
     </button>

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

@@ -6,6 +6,20 @@
     position: relative;
     max-height: 90vh;
 
+    .close {
+        position: absolute;
+        top: 1em;
+        right: 1em;
+        width: 2.5em;
+        height: 2.5em;
+        border-radius: 10em;
+        border: none;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+    }
+
     header {
         flex: 1;
         display: flex;

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

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

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

@@ -37,53 +37,25 @@
                 </div>
 
                 <div class="actions">
-                    <button type="button"
+                    <button type="button" matTooltip="Click to insert a title 1 section" (click)="insertTitle(1)" i18n-matTooltip>
-                            (click)="insertTitle(1)"
-                            matTooltip="Click to insert a title 1 section"
-                            matRipple
-                            i18n-matTooltip>
                         H1
                     </button>
-                    <button type="button"
+                    <button type="button" matTooltip="Click to insert a title 2 section" (click)="insertTitle(2)" i18n-matTooltip>
-                            (click)="insertTitle(2)"
-                            matTooltip="Click to insert a title 2 section"
-                            matRipple
-                            i18n-matTooltip>
                         H2
                     </button>
-                    <button type="button"
+                    <button type="button" matTooltip="Click to insert a title 3 section" (click)="insertTitle(3)" i18n-matTooltip>
-                            (click)="insertTitle(3)"
-                            matTooltip="Click to insert a title 3 section"
-                            matRipple
-                            i18n-matTooltip>
                         H3
                     </button>
-                    <button type="button"
+                    <button type="button" matTooltip="Click to insert a picture" (click)="selectAPicture()" i18n-matTooltip>
-                            (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"
+                    <button type="button" matTooltip="Click to insert a link" (click)="insertLink()" i18n-matTooltip>
-                            (click)="displayCodeBlockDialog()"
+                        <mat-icon>link</mat-icon>
-                            matTooltip="Click to insert a code block"
+                    </button>
-                            matRipple
+                    <button type="button" matTooltip="Click to insert a code block" (click)="displayCodeBlockDialog()" i18n-matTooltip>
-                            i18n-matTooltip>
                         <mat-icon>code</mat-icon>
                     </button>
-                    <button type="button"
+                    <button type="button" disabled matTooltip="Click to display editor help" i18n-matTooltip>
-                            matTooltip="Click to display editor help"
-                            disabled
-                            matRipple
-                            i18n-matTooltip>
                         <mat-icon>help</mat-icon>
                     </button>
                 </div>
@@ -120,12 +92,8 @@
         </mat-tab>
     </mat-tab-group>
     <footer>
-        <app-submit-button [requestPending]="!!(isSaving$ | async)" i18n>Save</app-submit-button>
+        <app-submit-button label="Save" [requestPending]="!!(isSaving$ | async)" i18n-label></app-submit-button>
-        <button type="button"
+        <button type="button" class="secondary" (click)="goPreviousLocation()" i18n>
-                class="cod-button secondary" 
-                (click)="goPreviousLocation()" 
-                matRipple 
-                i18n>
             Cancel
         </button>
     </footer>

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

@@ -102,11 +102,6 @@
 
         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;
@@ -114,6 +109,17 @@
             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;
@@ -124,6 +130,14 @@
         background-color: #5f6aa6;
         cursor: not-allowed;
     }
+
+    &.secondary {
+        color: #3f51b5;
+        background-color: white;
+
+        &:hover {
+            background-color: #f2f4ff;
+            cursor: pointer;
         }
     }
 }

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

@@ -1,6 +1,6 @@
 import { CommonModule, Location } from "@angular/common";
 import { Component, EventEmitter, inject, Input, OnChanges, OnDestroy, Output } from "@angular/core";
-import { FormGroup, ReactiveFormsModule } from "@angular/forms";
+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";
@@ -15,10 +15,10 @@ import { CategoryService } from "../../core/service/category.service";
 import { SubmitButtonComponent } from "../submit-button/submit-button.component";
 import { PictureSelectionDialog } from "./picture-selection-dialog/picture-selection-dialog.component";
 import { PublicationEditionService } from "./publication-edition.service";
-import { MatRippleModule } from "@angular/material/core";
 
 @Component({
     selector: 'app-publication-edition',
+    standalone: true,
     templateUrl: './publication-edition.component.html',
     styleUrl: './publication-edition.component.scss',
     imports: [
@@ -26,11 +26,11 @@ import { MatRippleModule } from "@angular/material/core";
         MatDialogModule,
         MatIconModule,
         MatInputModule,
-        MatRippleModule,
         MatProgressSpinnerModule,
         MatSelectModule,
         MatTabsModule,
         MatTooltipModule,
+        PictureSelectionDialog,
         ReactiveFormsModule,
         SubmitButtonComponent
     ],
@@ -48,13 +48,18 @@ export class PublicationEditionComponent implements OnChanges, OnDestroy {
 
     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[] = [];
 
-    get publicationEditionForm(): FormGroup {
+    publicationEditionForm: FormGroup = this.formBuilder.group({
-        return this.publicationEditionService.publicationEditionForm;
+        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 isLoading$(): Observable<boolean> {
         return this.publicationEditionService.isLoading$;
@@ -91,10 +96,48 @@ export class PublicationEditionComponent implements OnChanges, OnDestroy {
     ngOnChanges(): void {
         this.ngOnDestroy();
 
-        if (!this.publicationInEdition || this.publicationInEdition !== this.publication) {
         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 {
@@ -121,6 +164,10 @@ export class PublicationEditionComponent implements OnChanges, OnDestroy {
         this.publicationEditionService.displayCodeBlockDialog();
     }
 
+    save(): void {
+        this.publicationSave.emit(this.publicationInEdition);
+    }
+
     displayPictureSectionDialog(): void {
         this.publicationEditionService.displayPictureSectionDialog();
     }
@@ -136,10 +183,6 @@ export class PublicationEditionComponent implements OnChanges, OnDestroy {
         }
     }
 
-    save(): void {
-        this.publicationSave.emit(this.publicationEditionService.editedPublication);
-    }
-
     onTabChange(tabSelectedIndex: number): void {
         if (tabSelectedIndex === 1) {
             this.publicationEditionService.loadPreview();

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

@@ -3,14 +3,13 @@ import { inject, Injectable, OnDestroy } from "@angular/core";
 import { MatDialog } from "@angular/material/dialog";
 import { MatSnackBar } from "@angular/material/snack-bar";
 import { ActivatedRoute } from "@angular/router";
-import { BehaviorSubject, debounceTime, distinctUntilChanged, Observable, Subscription } from "rxjs";
+import { BehaviorSubject, Observable, Subscription } from "rxjs";
 import { Publication } from "../../core/rest-services/publications/model/publication";
 import { PublicationRestService } from "../../core/rest-services/publications/publication.rest-service";
 import { copy } from "../../core/utils/ObjectUtils";
 import { CodeBlockDialog } from "./code-block-dialog/code-block-dialog.component";
 import { PictureSelectionDialog } from "./picture-selection-dialog/picture-selection-dialog.component";
 import { PreviewContentRequest } from "../../core/rest-services/publications/model/preview";
-import { FormBuilder, FormControl, FormGroup, Validators } from "@angular/forms";
 
 declare let Prism: any;
 
@@ -58,11 +57,10 @@ const DEFAULT_STATE: PublicationEditionState = {
 @Injectable()
 export class PublicationEditionService implements OnDestroy {
     private readonly activatedRoute = inject(ActivatedRoute);
-    private readonly dialog = inject(MatDialog);
-    private readonly formBuilder = inject(FormBuilder);
-    private readonly location = inject(Location);
     private readonly publicationRestService = inject(PublicationRestService);
+    private readonly location = inject(Location);
     private readonly snackBar = inject(MatSnackBar);
+    private readonly dialog = inject(MatDialog);
 
     private isLoadingSubject = new BehaviorSubject<boolean>(false);
     private stateSubject = new BehaviorSubject<PublicationEditionState>(copy(DEFAULT_STATE));
@@ -70,14 +68,6 @@ export class PublicationEditionService implements OnDestroy {
     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());
     }
@@ -90,17 +80,6 @@ export class PublicationEditionService implements OnDestroy {
         this.stateSubject.next(state);
     }
 
-    private _updateForm(): void {
-        const state = this._state;
-        const publication = state.publication;
-
-        this.publicationEditionForm.controls['title'].setValue(publication.title);
-        this.publicationEditionForm.controls['description'].setValue(publication.description);
-        this.publicationEditionForm.controls['text'].setValue(publication.text);
-        this.publicationEditionForm.controls['illustrationId'].setValue(publication.illustrationId);
-        this.publicationEditionForm.controls['categoryId'].setValue(publication.categoryId);
-    }
-
     get isLoading$(): Observable<boolean> {
         return this.isLoadingSubject.asObservable();
     }
@@ -117,10 +96,6 @@ export class PublicationEditionService implements OnDestroy {
         return this.stateSubject.asObservable();
     }
 
-    get editedPublication(): Publication {
-        return this._state.publication;
-    }
-
     loadPublication(): void {
         this.isLoadingSubject.next(true);
         
@@ -150,28 +125,33 @@ export class PublicationEditionService implements OnDestroy {
         const state = this._state;
         state.publication = publication;
         this.stateSubject.next(state);
-        this._updateForm();
-
-        const formValueChangesSubscription = this.publicationEditionForm.valueChanges
-            .pipe(
-                debounceTime(200),
-                distinctUntilChanged()
-            )
-            .subscribe(formValue => {
-                const state = this._state;
-                const publication = state.publication;
-
-                publication.title = formValue.title;
-                publication.description = formValue.description;
-                publication.categoryId = formValue.categoryId;
-                publication.text = formValue.text;
-
-                this._save(state);
-            })
-        this.subscriptions.push(formValueChangesSubscription);
     }
 
-    private editIllustrationId(pictureId: string): void {
+    editTitle(title: string): void {
+        const state = this._state;
+        state.publication.title = title;
+        this._save(state);
+    }
+
+    editDescription(description: string): void {
+        const state = this._state;
+        state.publication.description = description;
+        this._save(state);
+    }
+
+    editCategoryId(categoryId: string): void {
+        const state = this._state;
+        state.publication.categoryId = categoryId;
+        this._save(state);
+    }
+
+    editText(text: string): void {
+        const state = this._state;
+        state.publication.text = text;
+        this._save(state);
+    }
+
+    editIllustrationId(pictureId: string): void {
         const state = this._state;
         state.publication.illustrationId = pictureId
         this._save(state);
@@ -224,7 +204,6 @@ export class PublicationEditionService implements OnDestroy {
             publication.text = textWithTags;
 
             this._save(state);
-            this._updateForm();
         } else {
             console.error(`Bad value for parameter of function 'insertTitle': '${titleNumber}'.`);
         }
@@ -254,7 +233,6 @@ export class PublicationEditionService implements OnDestroy {
         publication.text = textWithTags;
 
         this._save(state);
-        this._updateForm();
     }
 
     insertLink(): void {
@@ -270,10 +248,9 @@ export class PublicationEditionService implements OnDestroy {
         publication.text = textWithTags;
 
         this._save(state);
-        this._updateForm();
     }
 
-    private insertCodeBlock(programmingLanguage: string, codeBlock: string): void {
+    insertCodeBlock(programmingLanguage: string, codeBlock: string): void {
         const state = this._state;
 
         const publication = state.publication;
@@ -286,7 +263,6 @@ export class PublicationEditionService implements OnDestroy {
         publication.text = textWithTags;
 
         this._save(state);
-        this._updateForm();
     }
 
     loadPreview(): void {

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

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

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

@@ -1,4 +1,4 @@
-import {Component, input, Input} from "@angular/core";
+import { Component, Input } from "@angular/core";
 import { Publication } from "../../core/rest-services/publications/model/publication";
 import { Observable } from "rxjs";
 import { CommonModule } from "@angular/common";
@@ -7,10 +7,12 @@ import { MatTooltipModule } from "@angular/material/tooltip";
 
 @Component({
     selector: 'app-publication-list',
+    standalone: true,
     templateUrl: './publication-list.component.html',
     styleUrl: './publication-list.component.scss',
     imports: [CommonModule, RouterModule, MatTooltipModule]
 })
 export class PublicationListComponent {
-    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>
+    <button type="submit" (click)="searchPublications()">
         <mat-icon>search</mat-icon>
     </button>
 </form>

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

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

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

@@ -1,6 +1,6 @@
+import { HttpParams } from "@angular/common/http";
 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";
 
@@ -9,10 +9,10 @@ import { Router } from "@angular/router";
     selector: 'app-publications-search-bar',
     templateUrl: './publications-search-bar.component.html',
     styleUrl: './publications-search-bar.component.scss',
+    standalone: true,
     imports: [
-        MatIconModule,
+        ReactiveFormsModule,
-        MatRippleModule,
+        MatIconModule
-        ReactiveFormsModule
     ],
     providers: []
 })

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

@@ -6,10 +6,7 @@
         </div>
         <div class="sub-category-container {{category.isOpenned ? 'displayed' : ''}}">
             @for(subCategory of category.subCategories; track subCategory) {
-                <a [routerLink]="['/publications']"
+                <a [routerLink]="['/publications']" [queryParams]="{'category-id': subCategory.id}" (click)="categoryClicked.emit()" class="sub-category">
-                        [queryParams]="{'category-id': subCategory.id}"
-                        (click)="categoryClicked.emit()"
-                        class="sub-category">
                     {{subCategory.name}}
                 </a>
             }

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

@@ -7,12 +7,9 @@ import { RouterModule } from "@angular/router";
 
 @Component({
 	selector: 'app-categories-menu',
+  standalone: true,
+  imports: [CommonModule, RouterModule, MatIconModule],
   templateUrl: './categories-menu.component.html',
-    imports: [
-        CommonModule,
-        RouterModule,
-        MatIconModule
-    ],
   styleUrl: './categories-menu.component.scss'
 })
 export class CategoriesMenuComponent implements OnInit {

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

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

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

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

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

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

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

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

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

@@ -3,13 +3,11 @@ import { CanActivateFn, Router } from "@angular/router";
 import { AuthenticationService } from "../service/authentication.service";
 import { MatSnackBar } from "@angular/material/snack-bar";
 
-export const authenticationGuard: CanActivateFn = async () => {
+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 {

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

@@ -41,12 +41,23 @@ export class JwtInterceptor implements HttpInterceptor {
             this.isRefreshingToken = true;
             this.refreshTokenSubject.next(undefined);
 
-            this.authenticationService.refreshToken()
+            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(() => this.handleNoRefreshToken(initialError))
+                    .catch(() => {
+                        return this.handleNoRefreshToken(initialError);
+                    })
                     .finally(() => this.isRefreshingToken = false);
+            } else {
+                return this.handleNoRefreshToken(initialError);
+            }
         }
 
         return this.refreshTokenSubject.pipe(

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

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

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/pages/disconnection/disconnection.component.ts

@@ -5,6 +5,7 @@ import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-disconnection',
+  standalone: true,
   imports: [MatProgressSpinnerModule],
   templateUrl: './disconnection.component.html',
   styleUrl: './disconnection.component.scss'

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

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

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

@@ -1,14 +1,14 @@
-import {Component, OnInit, inject, Signal} from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { Observable } from 'rxjs';
 import { PublicationListComponent } from '../../components/publication-list/publication-list.component';
 import { Publication } from '../../core/rest-services/publications/model/publication';
 import { HomeService } from './home.service';
 import { CommonModule } from '@angular/common';
-import {toSignal} from "@angular/core/rxjs-interop";
 
 @Component({
   selector: 'app-home',
+  standalone: true,
   imports: [
     CommonModule,
     MatProgressSpinnerModule,
@@ -21,12 +21,12 @@ import {toSignal} from "@angular/core/rxjs-interop";
 export class HomeComponent implements OnInit {
   private homeService = inject(HomeService);
 
-  get isLoading(): Signal<boolean> {
+  get isLoading$(): Observable<boolean> {
-    return toSignal(this.homeService.isLoading$, { initialValue: false });
+    return this.homeService.isLoading$;
   }
 
-  get publications(): Signal<Publication[]> {
+  get publications$(): Observable<Publication[]> {
-    return toSignal(this.homeService.publications$, { initialValue: [] });
+    return this.homeService.publications$;
   }
 
   ngOnInit(): void {

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

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

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

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

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

@@ -5,20 +5,13 @@ import { Subscription, debounceTime, map } from 'rxjs';
 import { LoginService } from './login.service';
 import { MatIconModule } from '@angular/material/icon';
 import { RouterModule } from '@angular/router';
-import { SubmitButtonComponent } from "../../components/submit-button/submit-button.component";
-import { MatRippleModule } from '@angular/material/core';
 
 @Component({
   selector: 'app-login',
+  standalone: true,
   templateUrl: './login.component.html',
   styleUrl: './login.component.scss',
-    imports: [
+  imports: [ReactiveFormsModule, MatIconModule, RouterModule],
-        MatIconModule,
-        MatRippleModule,
-        ReactiveFormsModule,
-        RouterModule,
-        SubmitButtonComponent
-    ],
   providers: [LoginService, MatSnackBarModule]
 })
 export class LoginComponent implements OnInit, OnDestroy {

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

@@ -60,7 +60,8 @@ export class LoginService {
   performLogin(): void {
     const state = this.state;
 
-    if (this.isStateValid(state)) {
+    // Check state is valid
+
     this.userRestService
       .login(state.request)
       .then((response) => {
@@ -72,12 +73,5 @@ export class LoginService {
         console.error(error);
         this.snackBar.open($localize`Authentication failed.`, $localize`Close`, { duration: 5000 });
       });
-    } else {
-      this.snackBar.open($localize`Please, fill the inputs before send.`, $localize`Close`, { duration: 5000 });
-    }
-  }
-
-  isStateValid(state: LoginState): boolean {
-    return !!state.request.email?.trim().length && !!state.request.password?.length;
   }
 }

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

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

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

@@ -1,4 +1,4 @@
-import {Component, inject, OnInit, Signal} from "@angular/core";
+import { Component, inject, OnInit } from "@angular/core";
 import { MatProgressSpinnerModule } from "@angular/material/progress-spinner";
 import { MyPublicationsService } from "./my-publications.service";
 import { Observable } from "rxjs";
@@ -7,20 +7,18 @@ import { Publication } from "../../core/rest-services/publications/model/publica
 import { CommonModule } from "@angular/common";
 import { RouterModule } from "@angular/router";
 import { MatTooltipModule } from "@angular/material/tooltip";
-import { MatRippleModule } from "@angular/material/core";
-import {toSignal} from "@angular/core/rxjs-interop";
 
 
 @Component({
     selector: 'app-my-component',
+    standalone: true,
     templateUrl: './my-publications.component.html',
     styleUrl: './my-publications.component.scss',
     imports: [
         CommonModule,
         MatProgressSpinnerModule,
-        MatRippleModule,
-        MatTooltipModule,
         PublicationListComponent,
+        MatTooltipModule,
         RouterModule
     ],
     providers: [MyPublicationsService]
@@ -28,16 +26,16 @@ import {toSignal} from "@angular/core/rxjs-interop";
 export class MyPublicationsComponent implements OnInit {
     private readonly myPublicationsService = inject(MyPublicationsService);
 
-    get publications(): Signal<Publication[]> {
+    get publications$(): Observable<Publication[]> {
-        return toSignal(this.myPublicationsService.publications$, { initialValue: [] });
+        return this.myPublicationsService.publications$;
     }
 
-    get isLoading(): Signal<boolean> {
+    get isLoading$(): Observable<boolean> {
-        return toSignal(this.myPublicationsService.isLoading$, { initialValue: false });
+        return this.myPublicationsService.isLoading$;
     }
 
-    get isLoaded(): Signal<boolean> {
+    get isLoaded$(): Observable<boolean> {
-        return toSignal(this.myPublicationsService.isLoaded$, { initialValue: false });
+        return this.myPublicationsService.isLoaded$;
     }
 
     ngOnInit(): void {

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

@@ -7,13 +7,15 @@ import { BehaviorSubject, Observable, Subscription } from "rxjs";
 import { Publication } from "../../core/rest-services/publications/model/publication";
 import { AuthenticationService } from "../../core/service/authentication.service";
 import { Author } from "../../core/rest-services/publications/model/author";
-
+import { CommonModule } from "@angular/common";
 
 @Component({
     selector: 'app-publication-creation',
+    standalone: true,
     templateUrl: './publication-creation.component.html',
     styleUrl: './publication-creation.component.scss',
     imports: [
+        CommonModule,
         PublicationEditionComponent
     ]
 })

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

@@ -11,11 +11,14 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 import { ActivatedRoute, Router } from '@angular/router';
 import { BehaviorSubject, Observable, Subscription } from 'rxjs';
 import { PublicationEditionComponent } from '../../components/publication-edition/publication-edition.component';
+import { SubmitButtonComponent } from '../../components/submit-button/submit-button.component';
 import { Publication } from '../../core/rest-services/publications/model/publication';
 import { PublicationRestService } from '../../core/rest-services/publications/publication.rest-service';
+import { PictureSelectionDialog } from '../../components/publication-edition/picture-selection-dialog/picture-selection-dialog.component';
 
 @Component({
   selector: 'app-publication-update',
+  standalone: true,
   imports: [
     CommonModule,
     MatDialogModule,
@@ -24,11 +27,13 @@ import { PublicationRestService } from '../../core/rest-services/publications/pu
     MatProgressSpinnerModule,
     MatTabsModule,
     MatTooltipModule,
+    PictureSelectionDialog,
     ReactiveFormsModule,
+    SubmitButtonComponent,
     PublicationEditionComponent
   ],
   templateUrl: './publication-update.component.html',
-    styleUrl: './publication-update.component.scss'
+  styleUrl: './publication-update.component.scss',
 })
 export class PublicationUpdateComponent implements OnInit, OnDestroy {
   private readonly publicationRestService = inject(PublicationRestService);
@@ -51,7 +56,7 @@ export class PublicationUpdateComponent implements OnInit, OnDestroy {
 
   ngOnInit(): void {
     this.isLoadingSubject.next(true);
-    const activatedRouteSubscription = this.activatedRoute.paramMap.subscribe(params => {
+    this.activatedRoute.paramMap.subscribe(params => {
         const publicationId = params.get('publicationId');
         if (publicationId == undefined) {
             this.snackBar.open($localize`A technical error occurred while loading publication data.`, $localize`Close`, { duration: 5000 });
@@ -69,7 +74,6 @@ export class PublicationUpdateComponent implements OnInit, OnDestroy {
             .finally(() => this.isLoadingSubject.next(false));
         }
       });
-    this.subscriptions.push(activatedRouteSubscription);
   }
 
   ngOnDestroy(): void {

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

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

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

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

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

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

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

@@ -4,6 +4,7 @@ import { BehaviorSubject, Observable } from "rxjs";
 import { Publication } from "../../core/rest-services/publications/model/publication";
 import { MatSnackBar } from "@angular/material/snack-bar";
 
+
 @Injectable()
 export class SearchPublicationsService {
     private publicationRestService = inject(PublicationRestService);

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

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

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

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

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

@@ -6,20 +6,13 @@ import { Subscription, debounceTime, distinctUntilChanged, map } from 'rxjs';
 import { SigninService } from './signin.service';
 import { LoginService } from '../login/login.service';
 import { FormError } from '../../core/model/FormError';
-import { SubmitButtonComponent } from "../../components/submit-button/submit-button.component";
-import { MatRippleModule } from '@angular/material/core';
 
 @Component({
   selector: 'app-signin',
+  standalone: true,
+  imports: [ReactiveFormsModule, MatIconModule, RouterModule],
   templateUrl: './signin.component.html',
   styleUrl: './signin.component.scss',
-    imports: [
-        MatIconModule,
-        MatRippleModule,
-        ReactiveFormsModule,
-        RouterModule,
-        SubmitButtonComponent
-    ],
   providers: [SigninService, LoginService]
 })
 export class SigninComponent implements OnInit, OnDestroy {

frontend/src/design_system/button.scss

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

frontend/src/design_system/form.scss

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

frontend/src/design_system/index.scss

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

frontend/src/locale/messages-fr.json

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

frontend/src/locale/messages.json

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

frontend/src/styles.scss

@@ -1,5 +1,4 @@
 /* You can add global styles to this file, and also import other style files */
-@use './design_system/index.scss';
 
 html, body { height: 100%; }
 body {

frontend/tsconfig.json

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