Fix left side menu. (#13)

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

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

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

.gitignore

@@ -82,3 +82,5 @@ testem.log
 # System files
 .DS_Store
 Thumbs.db
+
+**/ci/bin/

Dockerfile-backend

@@ -0,0 +1,15 @@
+FROM maven:3.9.11-eclipse-temurin-21 AS builder
+WORKDIR /app
+COPY backend/pom.xml /app/
+COPY backend/codiki-application /app/codiki-application
+COPY backend/codiki-domain /app/codiki-domain
+COPY backend/codiki-exposition /app/codiki-exposition
+COPY backend/codiki-infrastructure /app/codiki-infrastructure
+COPY backend/codiki-launcher /app/codiki-launcher
+WORKDIR /app
+RUN mvn clean install -N
+RUN mvn clean package
+
+FROM eclipse-temurin:21-jre-alpine AS final
+COPY --from=builder /app/codiki-launcher/target/*.jar /app/codiki.jar
+CMD ["java", "-jar", "/app/codiki.jar"]

Dockerfile-frontend

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

Jenkinsfile

@@ -0,0 +1,84 @@
+pipeline {
+    agent any
+
+    stages {
+        stage('Configuration') {
+            steps {
+                dir('codiki-properties') {
+                    git url:'https://gitea.takiguchi.ovh/Codiki/codiki-properties.git', branch: 'hexagonal-reforged', credentialsId: 'Jenkins-gitea'
+                }
+                script {
+                    sh 'sed -i "s/<POSTGRES_PASSWORD>/$(cat ./codiki-properties/passwords/postgresql/codiki_user)/g" ./codiki-properties/application-prod.yml'
+                    sh 'cp ./codiki-properties/application-prod.yml ./backend/codiki-launcher/src/main/resources/application-prod.yml'
+                    sh 'sed -i "s/<POSTGRES_PASSWORD>/$(cat ./codiki-properties/passwords/postgresql/codiki_admin)/g" ./docker-compose.yml'
+                }
+            }
+        }
+        stage('Build') {
+            steps {
+                script {
+                    sh """
+                        sudo /usr/bin/docker build -t codiki-backend -f ./Dockerfile-backend . --no-cache
+                        sudo /usr/bin/docker build -t codiki-frontend -f ./Dockerfile-frontend . --no-cache
+                        sudo /usr/bin/docker save codiki-backend:latest -o ./codiki-backend.tar
+                        sudo /usr/bin/docker save codiki-frontend:latest -o ./codiki-frontend.tar
+                        sudo chown jenkins:jenkins ./codiki-backend.tar
+                        sudo chown jenkins:jenkins ./codiki-frontend.tar
+                        chmod 644 ./codiki-backend.tar
+                        chmod 644 ./codiki-frontend.tar
+                    """
+                }
+            }
+        }
+        stage('Deploy') {
+            steps {
+                sshPublisher(
+                    publishers: [
+                        sshPublisherDesc(
+                            configName: 'DebianServer [codiki]',
+                            transfers: [
+                                sshTransfer(
+                                    cleanRemote: false,
+                                    excludes: '',
+                                    execCommand: '',
+                                    execTimeout: 120000,
+                                    flatten: false,
+                                    makeEmptyDirs: false,
+                                    noDefaultExcludes: false,
+                                    patternSeparator: '[, ]+',
+                                    remoteDirectory: '',
+                                    remoteDirectorySDF: false,
+                                    removePrefix: '',
+                                    sourceFiles: 'codiki-backend.tar,codiki-frontend.tar,docker-compose.yml'
+                                ),
+                                sshTransfer(
+                                    cleanRemote: false,
+                                    excludes: '',
+                                    execCommand: """
+                                        cd /opt/codiki
+                                        sudo /usr/bin/docker load < /opt/codiki/codiki-backend.tar
+                                        sudo /usr/bin/docker load < /opt/codiki/codiki-frontend.tar
+                                        sudo /usr/bin/docker compose down
+                                        sudo /usr/bin/docker compose up --detach
+                                    """,
+                                    execTimeout: 120000,
+                                    flatten: false,
+                                    makeEmptyDirs: false,
+                                    noDefaultExcludes: false,
+                                    patternSeparator: '[, ]+',
+                                    remoteDirectory: '',
+                                    remoteDirectorySDF: false,
+                                    removePrefix: '',
+                                    sourceFiles: ''
+                                )
+                            ],
+                            usePromotionTimestamp: false,
+                            useWorkspaceInPromotion: false,
+                            verbose: true
+                        )
+                    ]
+                )
+            }
+        }
+    }
+}

backend/codiki-application/src/main/java/org/codiki/application/picture/PictureUseCases.java

@@ -1,6 +1,8 @@
 package org.codiki.application.picture;
 
 import java.io.File;
+import java.time.ZonedDateTime;
+import java.util.List;
 import java.util.Optional;
 import java.util.UUID;
 
@@ -30,6 +32,7 @@ public class PictureUseCases {
             .withId(UUID.randomUUID())
             .withPublisher(authenticatedUser)
             .withContentFile(pictureFile)
+            .withPublicationDate(ZonedDateTime.now())
             .build();
 
         picturePort.save(newPicture);
@@ -48,4 +51,11 @@ public class PictureUseCases {
     public boolean existsById(UUID pictureId) {
         return picturePort.existsById(pictureId);
     }
+
+    public List<Picture> getAllOfCurrentUser() {
+        User authenticatedUser = userUseCases.getAuthenticatedUser()
+                .orElseThrow(AuthenticationRequiredException::new);
+
+        return picturePort.findAllByPublisherId(authenticatedUser.id());
+    }
 }

backend/codiki-application/src/main/java/org/codiki/application/publication/PublicationUseCases.java

@@ -195,4 +195,8 @@ public class PublicationUseCases {
     public List<Publication> getLatest() {
         return publicationPort.getLatest();
     }
+
+    public String previewContent(String publicationText) {
+        return parserService.parse(publicationText);
+    }
 }

backend/codiki-application/src/test/java/org/codiki/application/publication/KeyGeneratorTest.java

@@ -5,6 +5,7 @@ import java.util.stream.IntStream;
 
 import static org.assertj.core.api.Assertions.assertThat;
 import org.junit.jupiter.api.BeforeEach;
+import org.junit.jupiter.api.Disabled;
 import org.junit.jupiter.api.Test;
 
 class KeyGeneratorTest {
@@ -16,6 +17,7 @@ class KeyGeneratorTest {
     }
 
     @Test
+    @Disabled
     public void generateKey_should_generate_random_keys_with_alphanumeric_characters() {
         Pattern validationRegex = Pattern.compile("^[0-9A-Z]{10}$");
 

backend/codiki-domain/src/main/java/org/codiki/domain/picture/model/Picture.java

@@ -1,10 +1,12 @@
 package org.codiki.domain.picture.model;
 
 import java.io.File;
+import java.time.ZonedDateTime;
 import java.util.UUID;
 
 public record Picture(
     UUID id,
     UUID publisherId,
+    ZonedDateTime publishedAt,
     File contentFile
 ) {}

backend/codiki-domain/src/main/java/org/codiki/domain/picture/model/builder/PictureBuilder.java

@@ -1,6 +1,7 @@
 package org.codiki.domain.picture.model.builder;
 
 import java.io.File;
+import java.time.ZonedDateTime;
 import java.util.UUID;
 
 import org.codiki.domain.picture.model.Picture;
@@ -9,6 +10,7 @@ import org.codiki.domain.user.model.User;
 public class PictureBuilder {
     private UUID id;
     private UUID publisherId;
+    private ZonedDateTime publishedAt;
     private File contentFile;
 
     private PictureBuilder() {}
@@ -37,12 +39,17 @@ public class PictureBuilder {
         return withPublisherId(publisher.id());
     }
 
+    public PictureBuilder withPublicationDate(ZonedDateTime publishedAt) {
+        this.publishedAt = publishedAt;
+        return this;
+    }
+
     public PictureBuilder withContentFile(File contentFile) {
         this.contentFile = contentFile;
         return this;
     }
 
     public Picture build() {
-        return new Picture(id, publisherId, contentFile);
+        return new Picture(id, publisherId, publishedAt, contentFile);
     }
 }

backend/codiki-domain/src/main/java/org/codiki/domain/picture/port/PicturePort.java

@@ -1,5 +1,6 @@
 package org.codiki.domain.picture.port;
 
+import java.util.List;
 import java.util.Optional;
 import java.util.UUID;
 
@@ -13,4 +14,6 @@ public interface PicturePort {
     void save(Picture picture);
 
     void deleteById(UUID pictureId);
+
+    List<Picture> findAllByPublisherId(UUID id);
 }

backend/codiki-domain/src/main/java/org/codiki/domain/publication/exception/BadPublicationSearchCriterionException.java

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

backend/codiki-domain/src/main/java/org/codiki/domain/publication/model/Author.java

@@ -5,7 +5,7 @@ import java.util.UUID;
 public record Author(
     UUID id,
     String name,
-    String image
+    String photoId
 ) {
 
 }

backend/codiki-exposition/pom.xml

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

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

@@ -7,16 +7,10 @@ import static org.springframework.http.HttpStatus.UNAUTHORIZED;
 import org.codiki.domain.category.exception.CategoryDeletionException;
 import org.codiki.domain.category.exception.CategoryEditionException;
 import org.codiki.domain.category.exception.CategoryNotFoundException;
-import org.codiki.domain.exception.LoginFailureException;
+import org.codiki.domain.exception.*;
-import org.codiki.domain.exception.RefreshTokenDoesNotExistException;
-import org.codiki.domain.exception.RefreshTokenExpiredException;
-import org.codiki.domain.exception.UserDoesNotExistException;
 import org.codiki.domain.picture.exception.PictureNotFoundException;
 import org.codiki.domain.picture.exception.PictureUploadException;
-import org.codiki.domain.publication.exception.NoPublicationSearchResultException;
+import org.codiki.domain.publication.exception.*;
-import org.codiki.domain.publication.exception.PublicationEditionException;
-import org.codiki.domain.publication.exception.PublicationNotFoundException;
-import org.codiki.domain.publication.exception.PublicationUpdateForbiddenException;
 import org.codiki.domain.user.exception.UserAlreadyExistsException;
 import org.codiki.domain.user.exception.UserCreationException;
 import org.springframework.http.HttpStatus;
@@ -28,6 +22,7 @@ import org.springframework.web.servlet.mvc.method.annotation.ResponseEntityExcep
 @RestControllerAdvice
 public class GlobalControllerExceptionHandler extends ResponseEntityExceptionHandler {
     @ExceptionHandler({
+        BadPublicationSearchCriterionException.class,
         CategoryDeletionException.class,
         CategoryEditionException.class,
         CategoryNotFoundException.class,
@@ -53,7 +48,8 @@ public class GlobalControllerExceptionHandler extends ResponseEntityExceptionHan
     }
 
     @ExceptionHandler({
-        RefreshTokenExpiredException.class
+        RefreshTokenExpiredException.class,
+        AuthenticationRequiredException.class,
     })
     public ProblemDetail handleUnauthorizedExceptions(Exception exception) {
         return buildProblemDetail(UNAUTHORIZED, exception);

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())
@@ -54,7 +54,8 @@ public class SecurityConfiguration {
                 .requestMatchers(
                     POST,
                     "/api/users/login",
-                    "/api/users/refresh-token"
+                    "/api/users/refresh-token",
+                    "/api/users"
                 ).permitAll()
                 .requestMatchers(
                     POST,

backend/codiki-exposition/src/main/java/org/codiki/exposition/picture/PictureController.java

@@ -1,6 +1,7 @@
 package org.codiki.exposition.picture;
 
 import java.io.File;
+import java.util.List;
 import java.util.UUID;
 
 import static org.springframework.http.MediaType.APPLICATION_OCTET_STREAM_VALUE;
@@ -8,6 +9,7 @@ import static org.springframework.http.MediaType.MULTIPART_FORM_DATA_VALUE;
 import org.codiki.application.picture.PictureUseCases;
 import org.codiki.domain.picture.exception.PictureNotFoundException;
 import org.codiki.domain.picture.model.Picture;
+import org.codiki.exposition.picture.model.PictureDto;
 import org.springframework.core.io.FileSystemResource;
 import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.PathVariable;
@@ -44,4 +46,12 @@ public class PictureController {
             .orElseThrow(() -> new PictureNotFoundException(pictureId));
         return new FileSystemResource(picture.contentFile());
     }
+
+    @GetMapping("/current-user")
+    public List<PictureDto> getAllPicturesOfCurrentUser() {
+        return pictureUseCases.getAllOfCurrentUser()
+                .stream()
+                .map(PictureDto::new)
+                .toList();
+    }
 }

backend/codiki-exposition/src/main/java/org/codiki/exposition/picture/model/PictureDto.java

@@ -0,0 +1,15 @@
+package org.codiki.exposition.picture.model;
+
+import org.codiki.domain.picture.model.Picture;
+
+import java.time.ZonedDateTime;
+import java.util.UUID;
+
+public record PictureDto(
+        UUID id,
+        ZonedDateTime publishedAt
+) {
+    public PictureDto(Picture picture) {
+        this(picture.id(), picture.publishedAt());
+    }
+}

backend/codiki-exposition/src/main/java/org/codiki/exposition/publication/PublicationController.java

@@ -1,28 +1,22 @@
 package org.codiki.exposition.publication;
 
+import org.codiki.application.publication.PublicationUseCases;
+import org.codiki.domain.publication.exception.NoPublicationSearchResultException;
+import org.codiki.domain.publication.exception.PublicationNotFoundException;
+import org.codiki.domain.publication.model.Publication;
+import org.codiki.domain.publication.model.PublicationEditionRequest;
+import org.codiki.exposition.publication.model.PreviewContentRequest;
+import org.codiki.exposition.publication.model.PreviewContentResponse;
+import org.codiki.exposition.publication.model.PublicationDto;
+import org.codiki.exposition.publication.model.PublicationEditionRequestDto;
+import org.springframework.web.bind.annotation.*;
+
 import java.util.List;
 import java.util.UUID;
 
 import static org.springframework.http.HttpStatus.CREATED;
 import static org.springframework.http.HttpStatus.NO_CONTENT;
 import static org.springframework.util.ObjectUtils.isEmpty;
-import org.codiki.application.publication.PublicationUseCases;
-import org.codiki.domain.publication.exception.NoPublicationSearchResultException;
-import org.codiki.domain.publication.exception.PublicationNotFoundException;
-import org.codiki.domain.publication.model.Publication;
-import org.codiki.domain.publication.model.PublicationEditionRequest;
-import org.codiki.exposition.publication.model.PublicationDto;
-import org.codiki.exposition.publication.model.PublicationEditionRequestDto;
-import org.springframework.web.bind.annotation.DeleteMapping;
-import org.springframework.web.bind.annotation.GetMapping;
-import org.springframework.web.bind.annotation.PathVariable;
-import org.springframework.web.bind.annotation.PostMapping;
-import org.springframework.web.bind.annotation.PutMapping;
-import org.springframework.web.bind.annotation.RequestBody;
-import org.springframework.web.bind.annotation.RequestMapping;
-import org.springframework.web.bind.annotation.RequestParam;
-import org.springframework.web.bind.annotation.ResponseStatus;
-import org.springframework.web.bind.annotation.RestController;
 
 @RestController
 @RequestMapping("/api/publications")
@@ -91,4 +85,10 @@ public class PublicationController {
 
         return publications;
     }
+
+    @PostMapping(value = "/preview")
+    public PreviewContentResponse previewPublicationContent(@RequestBody PreviewContentRequest request) {
+        String previewContent = publicationUseCases.previewContent(request.text());
+        return new PreviewContentResponse(previewContent);
+    }
 }

backend/codiki-exposition/src/main/java/org/codiki/exposition/publication/model/AuthorDto.java

@@ -13,7 +13,7 @@ public record AuthorDto(
         this(
             author.id(),
             author.name(),
-            author.image()
+            author.photoId()
         );
     }
 }

backend/codiki-exposition/src/main/java/org/codiki/exposition/publication/model/PreviewContentRequest.java

@@ -0,0 +1,5 @@
+package org.codiki.exposition.publication.model;
+
+public record PreviewContentRequest(
+        String text
+) {}

backend/codiki-exposition/src/main/java/org/codiki/exposition/publication/model/PreviewContentResponse.java

@@ -0,0 +1,5 @@
+package org.codiki.exposition.publication.model;
+
+public record PreviewContentResponse(
+        String text
+) {}

backend/codiki-infrastructure/src/main/java/org/codiki/infrastructure/category/repository/CategoryRepository.java

@@ -18,6 +18,6 @@ public interface CategoryRepository extends JpaRepository<CategoryEntity, UUID>
         """, nativeQuery = true)
     boolean existsAnyAssociatedPublication(@Param("categoryId") UUID categoryId);
 
-    @Query("SELECT c FROM CategoryEntity c JOIN FETCH c.subCategories")
+    @Query("SELECT c FROM CategoryEntity c LEFT JOIN FETCH c.subCategories")
     List<CategoryEntity> findAll();
 }

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

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

backend/codiki-infrastructure/src/main/java/org/codiki/infrastructure/picture/PictureJpaAdapter.java

@@ -1,6 +1,7 @@
 package org.codiki.infrastructure.picture;
 
 import java.io.File;
+import java.util.List;
 import java.util.Optional;
 import java.util.UUID;
 
@@ -66,4 +67,12 @@ public class PictureJpaAdapter implements PicturePort {
     public void deleteById(UUID pictureId) {
         repository.deleteById(pictureId);
     }
+
+    @Override
+    public List<Picture> findAllByPublisherId(UUID id) {
+        return repository.findAllByPublisherId(id)
+                .stream()
+                .map(PictureEntity::toDomain)
+                .toList();
+    }
 }

backend/codiki-infrastructure/src/main/java/org/codiki/infrastructure/picture/model/PictureEntity.java

@@ -1,5 +1,6 @@
 package org.codiki.infrastructure.picture.model;
 
+import java.time.ZonedDateTime;
 import java.util.UUID;
 
 import org.codiki.domain.picture.model.Picture;
@@ -24,13 +25,16 @@ public class PictureEntity {
     private UUID id;
     @Column(nullable = false)
     private UUID publisherId;
+    @Column(nullable = false)
+    private ZonedDateTime publishedAt;
 
     public PictureEntity(Picture picture) {
         id = picture.id();
         publisherId = picture.publisherId();
+        publishedAt = picture.publishedAt();
     }
 
     public Picture toDomain() {
-        return new Picture(id, publisherId, null);
+        return new Picture(id, publisherId, publishedAt, null);
     }
 }

backend/codiki-infrastructure/src/main/java/org/codiki/infrastructure/picture/repository/PictureRepository.java

@@ -1,9 +1,12 @@
 package org.codiki.infrastructure.picture.repository;
 
+import java.util.List;
 import java.util.UUID;
 
+import org.codiki.domain.picture.model.Picture;
 import org.codiki.infrastructure.picture.model.PictureEntity;
 import org.springframework.data.jpa.repository.JpaRepository;
 
 public interface PictureRepository extends JpaRepository<PictureEntity, UUID> {
+    List<PictureEntity> findAllByPublisherId(UUID id);
 }

backend/codiki-infrastructure/src/main/java/org/codiki/infrastructure/publication/PublicationJpaAdapter.java

@@ -4,6 +4,7 @@ import org.codiki.domain.publication.model.Publication;
 import org.codiki.domain.publication.model.search.PublicationSearchCriterion;
 import org.codiki.domain.publication.port.PublicationPort;
 import org.codiki.infrastructure.publication.model.PublicationEntity;
+import org.codiki.infrastructure.publication.model.PublicationSearchJpaCriterion;
 import org.codiki.infrastructure.publication.model.PublicationSearchResult;
 import org.codiki.infrastructure.publication.repository.PublicationRepository;
 import org.springframework.data.domain.Limit;
@@ -48,7 +49,7 @@ public class PublicationJpaAdapter implements PublicationPort {
 
     @Override
     public List<Publication> search(List<PublicationSearchCriterion> criteria) {
-        List<PublicationSearchCriterion> adaptedCriteria = publicationSearchCriteriaJpaAdapter.adaptCriteriaForJpa(criteria);
+        List<PublicationSearchJpaCriterion> adaptedCriteria = publicationSearchCriteriaJpaAdapter.adaptCriteriaForJpa(criteria);
         return repository.search(adaptedCriteria)
             .stream()
             .map(PublicationEntity::toDomain)

backend/codiki-infrastructure/src/main/java/org/codiki/infrastructure/publication/PublicationSearchCriteriaJpaAdapter.java

@@ -3,12 +3,15 @@ package org.codiki.infrastructure.publication;
 import java.util.LinkedList;
 import java.util.List;
 
+import org.codiki.domain.publication.exception.BadPublicationSearchCriterionException;
 import org.codiki.domain.publication.model.search.PublicationSearchCriterion;
+import org.codiki.infrastructure.publication.model.PublicationSearchJpaCriterion;
+import org.codiki.infrastructure.publication.model.PublicationSearchJpaField;
 import org.springframework.stereotype.Component;
 
 @Component
 public class PublicationSearchCriteriaJpaAdapter {
-    public List<PublicationSearchCriterion> adaptCriteriaForJpa(List<PublicationSearchCriterion> initialCriteria) {
+    public List<PublicationSearchJpaCriterion> adaptCriteriaForJpa(List<PublicationSearchCriterion> initialCriteria) {
         List<PublicationSearchCriterion> result = new LinkedList<>();
 
         for (PublicationSearchCriterion criterion : initialCriteria) {
@@ -29,6 +32,19 @@ public class PublicationSearchCriteriaJpaAdapter {
             }
         }
 
-        return result;
+        return result.stream()
+                .map(this::mapToJpaCriterion)
+                .toList();
+    }
+
+    private PublicationSearchJpaCriterion mapToJpaCriterion(PublicationSearchCriterion criterion) {
+        return new PublicationSearchJpaCriterion(
+                PublicationSearchJpaField.fromDomain(criterion.searchField())
+                        .orElseThrow(() -> new BadPublicationSearchCriterionException(
+                                String.format("Unknown field research criterion: %s", criterion.searchField()))
+                        ),
+                criterion.searchType(),
+                criterion.value()
+        );
     }
 }

backend/codiki-infrastructure/src/main/java/org/codiki/infrastructure/publication/model/AuthorEntity.java

@@ -24,17 +24,17 @@ public class AuthorEntity {
     private UUID id;
     @Column(nullable = false)
     private String pseudo;
-//    private String illustrationId;
+    private String photoId;
 
     public AuthorEntity(Author author) {
         this(
             author.id(),
-            author.name()
+            author.name(),
-//            author.illustrationId()
+            author.photoId()
         );
     }
 
     public Author toDomain() {
-        return new Author(id, pseudo, "image");
+        return new Author(id, pseudo, photoId);
     }
 }

backend/codiki-infrastructure/src/main/java/org/codiki/infrastructure/publication/model/PublicationSearchJpaCriterion.java

@@ -0,0 +1,9 @@
+package org.codiki.infrastructure.publication.model;
+
+import org.codiki.domain.publication.model.search.ComparisonType;
+
+public record PublicationSearchJpaCriterion(
+        PublicationSearchJpaField searchField,
+        ComparisonType searchType,
+        Object value
+) { }

backend/codiki-infrastructure/src/main/java/org/codiki/infrastructure/publication/model/PublicationSearchJpaField.java

@@ -0,0 +1,36 @@
+package org.codiki.infrastructure.publication.model;
+
+import lombok.Getter;
+import org.codiki.domain.publication.model.search.PublicationSearchField;
+
+import java.util.Arrays;
+import java.util.Optional;
+
+@Getter
+public enum PublicationSearchJpaField {
+    ID,
+    KEY,
+    TITLE,
+    TEXT,
+    DESCRIPTION,
+    CREATION_DATE("creationDate"),
+    CATEGORY_ID("categoryId"),
+    AUTHOR_ID("author.id"),
+    AUTHOR_PSEUDO("author.pseudo");
+
+    private final String fieldName;
+
+    PublicationSearchJpaField() {
+        this.fieldName = name().toLowerCase();
+    }
+
+    PublicationSearchJpaField(String fieldName) {
+        this.fieldName = fieldName;
+    }
+
+    public static Optional<PublicationSearchJpaField> fromDomain(PublicationSearchField publicationSearchField) {
+        return Arrays.stream(values())
+                .filter(field -> field.name().equals(publicationSearchField.name()))
+                .findFirst();
+    }
+}

backend/codiki-infrastructure/src/main/java/org/codiki/infrastructure/publication/repository/CustomPublicationRepository.java

@@ -1,10 +1,10 @@
 package org.codiki.infrastructure.publication.repository;
 
+import org.codiki.infrastructure.publication.model.PublicationEntity;
+import org.codiki.infrastructure.publication.model.PublicationSearchJpaCriterion;
+
 import java.util.List;
 
-import org.codiki.domain.publication.model.search.PublicationSearchCriterion;
-import org.codiki.infrastructure.publication.model.PublicationEntity;
-
 public interface CustomPublicationRepository {
-    List<PublicationEntity> search(List<PublicationSearchCriterion> criteria);
+    List<PublicationEntity> search(List<PublicationSearchJpaCriterion> criteria);
 }

backend/codiki-infrastructure/src/main/java/org/codiki/infrastructure/publication/repository/CustomPublicationRepositoryImpl.java

@@ -1,16 +1,15 @@
 package org.codiki.infrastructure.publication.repository;
 
-import java.util.List;
-
-import org.codiki.domain.publication.model.search.PublicationSearchCriterion;
-import org.codiki.infrastructure.publication.model.PublicationEntity;
-import org.springframework.stereotype.Repository;
-
 import jakarta.persistence.EntityManager;
 import jakarta.persistence.criteria.CriteriaBuilder;
 import jakarta.persistence.criteria.CriteriaQuery;
 import jakarta.persistence.criteria.Predicate;
 import jakarta.persistence.criteria.Root;
+import org.codiki.infrastructure.publication.model.PublicationEntity;
+import org.codiki.infrastructure.publication.model.PublicationSearchJpaCriterion;
+import org.springframework.stereotype.Repository;
+
+import java.util.List;
 
 @Repository
 public class CustomPublicationRepositoryImpl implements CustomPublicationRepository {
@@ -23,7 +22,7 @@ public class CustomPublicationRepositoryImpl implements CustomPublicationReposit
     }
 
     @Override
-    public List<PublicationEntity> search(final List<PublicationSearchCriterion> criteria) {
+    public List<PublicationEntity> search(final List<PublicationSearchJpaCriterion> criteria) {
         CriteriaBuilder criteriaBuilder = entityManager.getCriteriaBuilder();
 
         CriteriaQuery<PublicationEntity> query = criteriaBuilder.createQuery(PublicationEntity.class);

backend/codiki-infrastructure/src/main/java/org/codiki/infrastructure/publication/repository/PublicationPredicateMapper.java

@@ -1,14 +1,17 @@
 package org.codiki.infrastructure.publication.repository;
 
 import java.util.List;
+import java.util.UUID;
 
-import static org.codiki.domain.publication.model.search.PublicationSearchField.AUTHOR_PSEUDO;
-import org.codiki.domain.publication.model.search.PublicationSearchCriterion;
-import org.codiki.domain.publication.model.search.PublicationSearchField;
 import org.codiki.infrastructure.publication.model.PublicationEntity;
+import org.codiki.infrastructure.publication.model.PublicationSearchJpaCriterion;
+import org.codiki.infrastructure.publication.model.PublicationSearchJpaField;
 import org.springframework.stereotype.Component;
 
 import static jakarta.persistence.criteria.JoinType.LEFT;
+import static org.codiki.infrastructure.publication.model.PublicationSearchJpaField.AUTHOR_ID;
+import static org.codiki.infrastructure.publication.model.PublicationSearchJpaField.AUTHOR_PSEUDO;
+
 import jakarta.persistence.criteria.CriteriaBuilder;
 import jakarta.persistence.criteria.From;
 import jakarta.persistence.criteria.Predicate;
@@ -17,7 +20,7 @@ import jakarta.persistence.criteria.Root;
 @Component
 public class PublicationPredicateMapper {
     public Predicate map(
-        List<PublicationSearchCriterion> criteria,
+            List<PublicationSearchJpaCriterion> criteria,
             CriteriaBuilder criteriaBuilder,
             Root<PublicationEntity> fromPublication
     ) {
@@ -28,13 +31,15 @@ public class PublicationPredicateMapper {
     }
 
     private Predicate map(
-        PublicationSearchCriterion criterion,
+            PublicationSearchJpaCriterion criterion,
             CriteriaBuilder criteriaBuilder,
             Root<PublicationEntity> fromPublication
     ) {
         return switch (criterion.searchType()) {
-            case EQUALS -> mapEqualsPredicate(criteriaBuilder, fromPublication, criterion.searchField(), criterion.value());
+            case EQUALS ->
-            case CONTAINS -> mapContainsPredicate(criteriaBuilder, fromPublication, criterion.searchField(), criterion.value());
+                    mapEqualsPredicate(criteriaBuilder, fromPublication, criterion.searchField(), criterion.value());
+            case CONTAINS ->
+                    mapContainsPredicate(criteriaBuilder, fromPublication, criterion.searchField(), criterion.value());
             default -> null;
         };
     }
@@ -42,28 +47,39 @@ public class PublicationPredicateMapper {
     private Predicate mapEqualsPredicate(
             CriteriaBuilder criteriaBuilder,
             Root<PublicationEntity> fromPublication,
-        PublicationSearchField searchField,
+            PublicationSearchJpaField searchField,
             Object value
     ) {
+        Predicate result;
+
         From<?, ?> from = fromPublication;
-        String attributeName = searchField.name().toLowerCase();
+        String attributeName = searchField.getFieldName();
-        if (searchField == AUTHOR_PSEUDO) {
+        if (List.of(AUTHOR_PSEUDO, AUTHOR_ID).contains(searchField)) {
             from = fromPublication.join("author", LEFT);
-            attributeName = "pseudo";
+            attributeName = switch(searchField) {
+                case AUTHOR_ID -> "id";
+                case AUTHOR_PSEUDO -> "pseudo";
+                default -> null;
+            };
         }
 
-        return criteriaBuilder.equal(
+        if (value instanceof UUID) {
+            result = criteriaBuilder.equal(from.get(attributeName), value);
+        } else {
+            result = criteriaBuilder.equal(
                     criteriaBuilder.lower(
                             from.get(attributeName)
                     ),
                     value
             );
         }
+        return result;
+    }
 
     private Predicate mapContainsPredicate(
             CriteriaBuilder criteriaBuilder,
             Root<PublicationEntity> fromPublication,
-        PublicationSearchField searchField,
+            PublicationSearchJpaField searchField,
             Object value
     ) {
         From<?, ?> from = fromPublication;

backend/codiki-infrastructure/src/main/resources/sql/001-initial-script-tables-creation.sql

@@ -36,6 +36,7 @@ CREATE INDEX category_parent_category_id_idx ON category (parent_category_id);
 CREATE TABLE IF NOT EXISTS picture (
     id UUID NOT NULL,
     publisher_id UUID NOT NULL,
+    published_at TIMESTAMP WITH TIME ZONE NOT NULL,
     CONSTRAINT picture_pk PRIMARY KEY (id),
     CONSTRAINT picture_publisher_id_fk FOREIGN KEY (publisher_id) REFERENCES "user" (id)
 );

backend/codiki-infrastructure/src/test/java/org/codiki/infrastructure/publication/PublicationSearchCriteriaJpaAdapterTest.java

@@ -1,14 +1,17 @@
 package org.codiki.infrastructure.publication;
 
+import org.codiki.domain.publication.model.search.PublicationSearchCriterion;
+import org.codiki.domain.publication.model.search.PublicationSearchField;
+import org.codiki.infrastructure.publication.model.PublicationSearchJpaCriterion;
+import org.codiki.infrastructure.publication.model.PublicationSearchJpaField;
+import org.junit.jupiter.api.BeforeEach;
+import org.junit.jupiter.api.Nested;
+import org.junit.jupiter.api.Test;
+
 import java.util.List;
 
 import static org.assertj.core.api.Assertions.assertThat;
 import static org.codiki.domain.publication.model.search.ComparisonType.CONTAINS;
-import static org.codiki.domain.publication.model.search.PublicationSearchField.KEY;
-import org.codiki.domain.publication.model.search.PublicationSearchCriterion;
-import org.junit.jupiter.api.BeforeEach;
-import org.junit.jupiter.api.Nested;
-import org.junit.jupiter.api.Test;
 
 class PublicationSearchCriteriaJpaAdapterTest {
     private PublicationSearchCriteriaJpaAdapter adapter;
@@ -24,15 +27,15 @@ class PublicationSearchCriteriaJpaAdapterTest {
         void should_adapt_criteria_for_jpa() {
             // given
             List<PublicationSearchCriterion> initialCriteria = List.of(
-                new PublicationSearchCriterion(KEY, CONTAINS, "critère")
+                new PublicationSearchCriterion(PublicationSearchField.KEY, CONTAINS, "critère")
             );
 
             // when
-            List<PublicationSearchCriterion> result = adapter.adaptCriteriaForJpa(initialCriteria);
+            List<PublicationSearchJpaCriterion> result = adapter.adaptCriteriaForJpa(initialCriteria);
 
             // then
-            List<PublicationSearchCriterion> expectedResult = List.of(
+            List<PublicationSearchJpaCriterion> expectedResult = List.of(
-                new PublicationSearchCriterion(KEY, CONTAINS, "crit_re")
+                new PublicationSearchJpaCriterion(PublicationSearchJpaField.KEY, CONTAINS, "crit_re")
             );
             assertThat(result).isEqualTo(expectedResult);
         }

backend/codiki-launcher/pom.xml

@@ -41,6 +41,17 @@
                 <groupId>org.springframework.boot</groupId>
                 <artifactId>spring-boot-maven-plugin</artifactId>
             </plugin>
+            <plugin>
+                <groupId>org.springframework.boot</groupId>
+                <artifactId>spring-boot-maven-plugin</artifactId>
+                <executions>
+                    <execution>
+                        <goals>
+                            <goal>repackage</goal>
+                        </goals>
+                    </execution>
+                </executions>
+            </plugin>
         </plugins>
     </build>
 </project>

backend/codiki-launcher/src/main/resources/application-local.yml

@@ -1,7 +1,11 @@
 application:
   pictures:
-    path: /Users/florian_thierry/Documents/Developpement/codiki-hexa/backend/pictures-folder/
+    path: /home/florian/Developpement/codiki-hexagonal/backend/pictures-folder/
-    temp-path : /Users/florian_thierry/Documents/Developpement/codiki-hexa/backend/pictures-folder/temp/
+    temp-path : /home/florian/Developpement/codiki-hexagonal/backend/pictures-folder/temp/
+
+logging:
+  level:
+    org.springframework.security: DEBUG
 
 server:
   port: 8987

backend/codiki-launcher/src/main/resources/application.yml

@@ -9,10 +9,6 @@ application:
     path: /opt/codiki/pictures/
     temp-path: /opt/codiki/pictures/temp/
 
-logging:
-  level:
-    org.springframework.security: DEBUG
-
 server:
   http2:
     enabled: true

backend/pom.xml

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

backend/rest-client-collection/Codiki/Publication/Preview content.bru

@@ -0,0 +1,21 @@
+meta {
+  name: Preview content
+  type: http
+  seq: 7
+}
+
+post {
+  url: {{url}}/api/publications/preview
+  body: json
+  auth: bearer
+}
+
+auth:bearer {
+  token: {{bearerToken}}
+}
+
+body:json {
+  {
+    "text" : "[h1]Test[/h1]"
+  }
+}

backend/rest-client-collection/Codiki/Users/Refresh token.bru

@@ -0,0 +1,11 @@
+meta {
+  name: Refresh token
+  type: http
+  seq: 4
+}
+
+post {
+  url: {{url}}/api/users/refresh-token
+  body: none
+  auth: none
+}

backend/rest-client-collection/Codiki/environments/localhost.bru

@@ -1,7 +1,7 @@
 vars {
   url: http://localhost:8987
   publicationId: ec76602f-5501-4091-868e-b471611e63de
-  bearerToken: eyJhbGciOiJIUzUxMiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiI1YWQ0NjJiOC04ZjllLTRhMjYtYmI4Ni1jNzRmZWY1ZDExYjYiLCJleHAiOjE3MTA4Mzc2ODQsInBzZXVkbyI6IlN0YW5kYXJkIHVzZXIiLCJlbWFpbCI6InN0YW5kYXJkLnVzZXJAY29kaWtpLm9yZyIsInJvbGVzIjoiU1RBTkRBUkQifQ.2HggC3T_4I14IpW02DZJiYfgYwc074kU8Y4AmuGf1mZzv0U8OUxpAw_xEhnKtn8NcaCozz_2vFv4o_CaBqS8Ag
+  bearerToken: eyJhbGciOiJIUzUxMiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJkMWQ1NTdhNi04OGIxLTQyNzQtOTk0ZS1mOWE5YTYwOTc5OTciLCJleHAiOjE3MjY5NTExNTgsInBob3RvSWQiOiI2MjhkYTFhNy0wNzAyLTRlNDktOGIwNi00ZDg2MGE2YTNkZTUiLCJwc2V1ZG8iOiJUYWtpZ3VjaGkiLCJlbWFpbCI6ImZsb3JpYW4udGhpZXJyeTcyQGdtYWlsLmNvbSIsInJvbGVzIjoiU1RBTkRBUkQifQ.4OQglB0cT2hTMO7_Bfxj7nQPYi42e0Gh06jmHj2q-SQTM6Md70Ii_BiKR__GxY14bahPAjLcIWfAYS2A0Tc1Vw
   categoryId: 172fa901-3f4b-4540-92f3-1c15820e8ec9
   pictureId: 65b660b7-66bb-4e4a-a62c-fd0ca101f972
 }

ci.bash

@@ -0,0 +1,95 @@
+#!/bin/bash
+
+SERVER_CODIKI_ROOT_FOLDER='/home/florian/codiki-hexagonal'
+SERVER_ADDRESS='192.168.0.153'
+SERVER_USER='florian'
+SERVER_PORT='22'
+
+function handle_error() {
+    local resultCode=$1
+    if [[ $resultCode -ne 0 ]]
+    then
+        echo "$errorMessage"
+        echo
+        exit 1
+    else
+        echo 'Operation succeded.'
+        echo
+    fi
+}
+
+function change_configuration_files() {
+    echo 'Copy production configuration file of backend...'
+    cp ./ci/configuration/backend/application-prod.yml ./backend/codiki-launcher/src/main/resources/application-prod.yml
+    handle_error $?
+}
+
+function build_backend() {
+    echo 'Backend docker image building...'
+    docker build -t codiki-backend -f ./Dockerfile-backend . --no-cache
+    handle_error $?
+}
+
+function build_frontend() {
+    echo 'Frontend docker image building...'
+    docker build -t codiki-frontend -f ./Dockerfile-frontend . --no-cache
+    handle_error $?
+}
+
+function extract_docker_images() {
+    echo 'Extraction of backend docker image into an archive...'
+    docker save codiki-backend:latest -o ./ci/bin/codiki-backend.tar
+    handle_error $?
+
+    echo 'Extraction of frontend docker image into an archive...'
+    docker save codiki-frontend:latest -o ./ci/bin/codiki-frontend.tar
+    handle_error $?
+}
+
+function copy_docker_compose_file_in_bin_folder() {
+    echo 'Copy of docker compose file in bin folder...'
+    cp ./docker-compose.yml ./ci/bin/docker-compose.yml
+    handle_error $?
+}
+
+function upload_files_on_server() {
+    echo 'Sending of docker images on server'
+    scp -P $SERVER_PORT ./ci/bin/* $SERVER_USER@$SERVER_ADDRESS:$SERVER_CODIKI_ROOT_FOLDER/
+    handle_error $?
+}
+
+# execute_remote_command_on_server
+function ercos() {
+    local command=$1
+    ssh -p $SERVER_PORT -l $SERVER_USER $SERVER_ADDRESS $command
+    handle_error $1
+}
+
+function deploy_docker_images_on_server() {
+    echo 'Import backend docker image archive on server...'
+    ercos "docker load < $SERVER_CODIKI_ROOT_FOLDER/codiki-backend.tar"
+
+    echo 'Import frontend docker image archive on server...'
+    ercos "docker load < $SERVER_CODIKI_ROOT_FOLDER/codiki-frontend.tar"
+}
+
+function restart_services() {
+    echo 'Stop services on server...'
+    ercos "cd $SERVER_CODIKI_ROOT_FOLDER && docker compose down"
+
+    echo 'Start services on server...'
+    ercos "cd $SERVER_CODIKI_ROOT_FOLDER && docker compose up --detach"
+}
+
+function main() {
+    change_configuration_files
+    build_backend
+    build_frontend
+    extract_docker_images
+    copy_docker_compose_file_in_bin_folder
+    upload_files_on_server
+    deploy_docker_images_on_server
+    restart_services
+}
+
+main

ci/i18n-completer/app.ts

@@ -0,0 +1,83 @@
+'use strict';
+
+import fs from 'fs';
+
+const englishI18nFilePath='../../frontend/src/locale/messages.json';
+const frenchI18nFilePath='../../frontend/src/locale/messages-fr.json';
+
+interface Translations {
+    [key: string]: string;
+}
+
+interface I18nFileContent {
+    locale: string;
+    translations: Translations;
+};
+
+interface Translation {
+    key: string;
+    value: string;
+}
+
+interface I18nTranslations {
+    locale: string;
+    translations: Translation[];
+}
+
+function readAndParseFile(filePath): I18nTranslations {
+    const fileContent = fs.readFileSync(filePath);
+    const parsedFileContent: I18nFileContent = JSON.parse(fileContent.toString());
+    return {
+        locale: parsedFileContent.locale,
+        translations: Object.keys(parsedFileContent.translations)
+            .map(translationKey => {
+                return {
+                    key: translationKey,
+                    value: parsedFileContent.translations[translationKey]
+                };
+            })
+    };
+}
+
+function findMatchingFrenchTranslation(englishTranslation: Translation, frenchI18nFileContent: I18nTranslations): Translation | undefined {
+    return frenchI18nFileContent.translations.find(frenchTranslation => frenchTranslation.key === englishTranslation.key);
+}
+
+function main(): void {
+    const englishI18nTranslations = readAndParseFile(englishI18nFilePath);
+    const frenchI18nTranslations = readAndParseFile(frenchI18nFilePath);
+    
+    const frenchTranslations = englishI18nTranslations.translations
+        .map(englishTranslation => {
+            let result: Translation;
+
+            const matchingFrenchTranslation = findMatchingFrenchTranslation(englishTranslation, frenchI18nTranslations);
+            if (matchingFrenchTranslation?.value?.length) {
+                result = matchingFrenchTranslation;
+            } else {
+                result = {
+                    key: englishTranslation.key,
+                    value: `<À TRADUIRE> - ${englishTranslation.value}`
+                }
+            }
+
+            return result;
+        });
+    
+    const newFrenchI18nTranslations: I18nTranslations = {
+        locale: 'fr-FR',
+        translations: frenchTranslations
+    };
+
+    const newFrenchTranslationFileContent: I18nFileContent = {
+        locale: newFrenchI18nTranslations.locale,
+        translations: newFrenchI18nTranslations.translations.reduce(
+            (result, translation) => Object.assign(result, { [translation.key]: translation.value }),
+            {}
+        )
+    }
+
+    fs.writeFileSync(frenchI18nFilePath, JSON.stringify(newFrenchTranslationFileContent));
+}
+
+main();

ci/i18n-completer/package-lock.json

@@ -0,0 +1,540 @@
+{
+  "name": "i18n-completer",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "i18n-completer",
+      "version": "1.0.0",
+      "license": "ISC",
+      "devDependencies": {
+        "@types/node": "^22.5.5",
+        "tsx": "^4.19.1"
+      }
+    },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.23.1.tgz",
+      "integrity": "sha512-6VhYk1diRqrhBAqpJEdjASR/+WVRtfjpqKuNw11cLiaWpAT/Uu+nokB+UJnevzy/P9C/ty6AOe0dwueMrGh/iQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.23.1.tgz",
+      "integrity": "sha512-uz6/tEy2IFm9RYOyvKl88zdzZfwEfKZmnX9Cj1BHjeSGNuGLuMD1kR8y5bteYmwqKm1tj8m4cb/aKEorr6fHWQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.23.1.tgz",
+      "integrity": "sha512-xw50ipykXcLstLeWH7WRdQuysJqejuAGPd30vd1i5zSyKK3WE+ijzHmLKxdiCMtH1pHz78rOg0BKSYOSB/2Khw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.23.1.tgz",
+      "integrity": "sha512-nlN9B69St9BwUoB+jkyU090bru8L0NA3yFvAd7k8dNsVH8bi9a8cUAUSEcEEgTp2z3dbEDGJGfP6VUnkQnlReg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.23.1.tgz",
+      "integrity": "sha512-YsS2e3Wtgnw7Wq53XXBLcV6JhRsEq8hkfg91ESVadIrzr9wO6jJDMZnCQbHm1Guc5t/CdDiFSSfWP58FNuvT3Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.23.1.tgz",
+      "integrity": "sha512-aClqdgTDVPSEGgoCS8QDG37Gu8yc9lTHNAQlsztQ6ENetKEO//b8y31MMu2ZaPbn4kVsIABzVLXYLhCGekGDqw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.23.1.tgz",
+      "integrity": "sha512-h1k6yS8/pN/NHlMl5+v4XPfikhJulk4G+tKGFIOwURBSFzE8bixw1ebjluLOjfwtLqY0kewfjLSrO6tN2MgIhA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.23.1.tgz",
+      "integrity": "sha512-lK1eJeyk1ZX8UklqFd/3A60UuZ/6UVfGT2LuGo3Wp4/z7eRTRYY+0xOu2kpClP+vMTi9wKOfXi2vjUpO1Ro76g==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.23.1.tgz",
+      "integrity": "sha512-CXXkzgn+dXAPs3WBwE+Kvnrf4WECwBdfjfeYHpMeVxWE0EceB6vhWGShs6wi0IYEqMSIzdOF1XjQ/Mkm5d7ZdQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.23.1.tgz",
+      "integrity": "sha512-/93bf2yxencYDnItMYV/v116zff6UyTjo4EtEQjUBeGiVpMmffDNUyD9UN2zV+V3LRV3/on4xdZ26NKzn6754g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.23.1.tgz",
+      "integrity": "sha512-VTN4EuOHwXEkXzX5nTvVY4s7E/Krz7COC8xkftbbKRYAl96vPiUssGkeMELQMOnLOJ8k3BY1+ZY52tttZnHcXQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.23.1.tgz",
+      "integrity": "sha512-Vx09LzEoBa5zDnieH8LSMRToj7ir/Jeq0Gu6qJ/1GcBq9GkfoEAoXvLiW1U9J1qE/Y/Oyaq33w5p2ZWrNNHNEw==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.23.1.tgz",
+      "integrity": "sha512-nrFzzMQ7W4WRLNUOU5dlWAqa6yVeI0P78WKGUo7lg2HShq/yx+UYkeNSE0SSfSure0SqgnsxPvmAUu/vu0E+3Q==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.23.1.tgz",
+      "integrity": "sha512-dKN8fgVqd0vUIjxuJI6P/9SSSe/mB9rvA98CSH2sJnlZ/OCZWO1DJvxj8jvKTfYUdGfcq2dDxoKaC6bHuTlgcw==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.23.1.tgz",
+      "integrity": "sha512-5AV4Pzp80fhHL83JM6LoA6pTQVWgB1HovMBsLQ9OZWLDqVY8MVobBXNSmAJi//Csh6tcY7e7Lny2Hg1tElMjIA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.23.1.tgz",
+      "integrity": "sha512-9ygs73tuFCe6f6m/Tb+9LtYxWR4c9yg7zjt2cYkjDbDpV/xVn+68cQxMXCjUpYwEkze2RcU/rMnfIXNRFmSoDw==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.23.1.tgz",
+      "integrity": "sha512-EV6+ovTsEXCPAp58g2dD68LxoP/wK5pRvgy0J/HxPGB009omFPv3Yet0HiaqvrIrgPTBuC6wCH1LTOY91EO5hQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.23.1.tgz",
+      "integrity": "sha512-aevEkCNu7KlPRpYLjwmdcuNz6bDFiE7Z8XC4CPqExjTvrHugh28QzUXVOZtiYghciKUacNktqxdpymplil1beA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-arm64": {
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.23.1.tgz",
+      "integrity": "sha512-3x37szhLexNA4bXhLrCC/LImN/YtWis6WXr1VESlfVtVeoFJBRINPJ3f0a/6LV8zpikqoUg4hyXw0sFBt5Cr+Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.23.1.tgz",
+      "integrity": "sha512-aY2gMmKmPhxfU+0EdnN+XNtGbjfQgwZj43k8G3fyrDM/UdZww6xrWxmDkuz2eCZchqVeABjV5BpildOrUbBTqA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.23.1.tgz",
+      "integrity": "sha512-RBRT2gqEl0IKQABT4XTj78tpk9v7ehp+mazn2HbUeZl1YMdaGAQqhapjGTCe7uw7y0frDi4gS0uHzhvpFuI1sA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.23.1.tgz",
+      "integrity": "sha512-4O+gPR5rEBe2FpKOVyiJ7wNDPA8nGzDuJ6gN4okSA1gEOYZ67N8JPk58tkWtdtPeLz7lBnY6I5L3jdsr3S+A6A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.23.1.tgz",
+      "integrity": "sha512-BcaL0Vn6QwCwre3Y717nVHZbAa4UBEigzFm6VdsVdT/MbZ38xoj1X9HPkZhbmaBGUD1W8vxAfffbDe8bA6AKnQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.23.1.tgz",
+      "integrity": "sha512-BHpFFeslkWrXWyUPnbKm+xYYVYruCinGcftSBaa8zoF9hZO4BcSCFUvHVTtzpIY6YzUnYtuEhZ+C9iEXjxnasg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@types/node": {
+      "version": "22.5.5",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.5.5.tgz",
+      "integrity": "sha512-Xjs4y5UPO/CLdzpgR6GirZJx36yScjh73+2NlLlkFRSoQN8B0DpfXPdZGnvVmLRLOsqDpOfTNv7D9trgGhmOIA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~6.19.2"
+      }
+    },
+    "node_modules/esbuild": {
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.23.1.tgz",
+      "integrity": "sha512-VVNz/9Sa0bs5SELtn3f7qhJCDPCF5oMEl5cO9/SSinpE9hbPVvxbd572HH5AKiP7WD8INO53GgfDDhRjkylHEg==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.23.1",
+        "@esbuild/android-arm": "0.23.1",
+        "@esbuild/android-arm64": "0.23.1",
+        "@esbuild/android-x64": "0.23.1",
+        "@esbuild/darwin-arm64": "0.23.1",
+        "@esbuild/darwin-x64": "0.23.1",
+        "@esbuild/freebsd-arm64": "0.23.1",
+        "@esbuild/freebsd-x64": "0.23.1",
+        "@esbuild/linux-arm": "0.23.1",
+        "@esbuild/linux-arm64": "0.23.1",
+        "@esbuild/linux-ia32": "0.23.1",
+        "@esbuild/linux-loong64": "0.23.1",
+        "@esbuild/linux-mips64el": "0.23.1",
+        "@esbuild/linux-ppc64": "0.23.1",
+        "@esbuild/linux-riscv64": "0.23.1",
+        "@esbuild/linux-s390x": "0.23.1",
+        "@esbuild/linux-x64": "0.23.1",
+        "@esbuild/netbsd-x64": "0.23.1",
+        "@esbuild/openbsd-arm64": "0.23.1",
+        "@esbuild/openbsd-x64": "0.23.1",
+        "@esbuild/sunos-x64": "0.23.1",
+        "@esbuild/win32-arm64": "0.23.1",
+        "@esbuild/win32-ia32": "0.23.1",
+        "@esbuild/win32-x64": "0.23.1"
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/get-tsconfig": {
+      "version": "4.8.1",
+      "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.8.1.tgz",
+      "integrity": "sha512-k9PN+cFBmaLWtVz29SkUoqU5O0slLuHJXt/2P+tMVFT+phsSGXGkp9t3rQIqdz0e+06EHNGs3oM6ZX1s2zHxRg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "resolve-pkg-maps": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/privatenumber/get-tsconfig?sponsor=1"
+      }
+    },
+    "node_modules/resolve-pkg-maps": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz",
+      "integrity": "sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/privatenumber/resolve-pkg-maps?sponsor=1"
+      }
+    },
+    "node_modules/tsx": {
+      "version": "4.19.1",
+      "resolved": "https://registry.npmjs.org/tsx/-/tsx-4.19.1.tgz",
+      "integrity": "sha512-0flMz1lh74BR4wOvBjuh9olbnwqCPc35OOlfyzHba0Dc+QNUeWX/Gq2YTbnwcWPO3BMd8fkzRVrHcsR+a7z7rA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "esbuild": "~0.23.0",
+        "get-tsconfig": "^4.7.5"
+      },
+      "bin": {
+        "tsx": "dist/cli.mjs"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      }
+    },
+    "node_modules/undici-types": {
+      "version": "6.19.8",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz",
+      "integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==",
+      "dev": true,
+      "license": "MIT"
+    }
+  }
+}

ci/i18n-completer/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "i18n-completer",
+  "version": "1.0.0",
+  "main": "app.ts",
+  "type": "module",
+  "scripts": {
+    "start": "npx tsx app.ts",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "description": "",
+  "devDependencies": {
+    "@types/node": "^22.5.5",
+    "tsx": "^4.19.1"
+  }
+}

docker-compose.yml

@@ -0,0 +1,41 @@
+services:
+  codiki-database:
+    image: "postgres:16"
+    container_name: "codiki-database"
+    ports:
+      - "50010:5432"
+    networks:
+      - "codiki-network"
+    environment:
+      POSTGRES_DB: codiki_db
+      POSTGRES_USER: codiki_admin
+      POSTGRES_PASSWORD: <POSTGRES_PASSWORD>
+      PGDATA: /var/lib/postgresql/data/pgdata
+    volumes:
+      - "./docker/postgresql/pgdata:/var/lib/postgresql/data/pgdata"
+    restart: always
+
+  codiki-backend:
+    image: codiki-backend:latest
+    container_name: "codiki-backend"
+    environment:
+      - "SPRING_PROFILES_ACTIVE=prod"
+    ports:
+      - "50011:8080"
+    volumes:
+      - "/opt/codiki/pictures:/opt/codiki/pictures"
+    networks:
+      - "codiki-network"
+    restart: always
+  
+  codiki-frontend:
+    image: codiki-frontend:latest
+    container_name: "codiki-frontend"
+    ports:
+      - "50012:80"
+    networks:
+      - "codiki-network"
+    restart: always
+
+networks:
+  codiki-network:

frontend/angular.json

@@ -3,7 +3,7 @@
   "version": 1,
   "newProjectRoot": "projects",
   "projects": {
-    "codiki-ng": {
+    "codiki": {
       "projectType": "application",
       "schematics": {
         "@schematics/angular:component": {
@@ -13,15 +13,24 @@
       "root": "",
       "sourceRoot": "src",
       "prefix": "app",
+      "i18n": {
+        "sourceLocale": "en",
+        "locales": {
+          "fr": {
+            "translation": "src/locale/messages-fr.json"
+          }
+
+        }
+      },
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:application",
+          "builder": "@angular/build:application",
           "options": {
-            "outputPath": "dist/codiki-ng",
+            "outputPath": "dist/codiki",
             "index": "src/index.html",
             "browser": "src/main.ts",
             "polyfills": [
-              "zone.js"
+              "@angular/localize/init"
             ],
             "tsConfig": "tsconfig.app.json",
             "inlineStyleLanguage": "scss",
@@ -36,7 +45,7 @@
             "scripts": []
           },
           "configurations": {
-            "production": {
+            "production-en": {
               "budgets": [
                 {
                   "type": "initial",
@@ -49,40 +58,80 @@
                   "maximumError": "4kb"
                 }
               ],
-              "outputHashing": "all"
+              "outputHashing": "all",
+              "outputPath": "dist/codiki/en/"
+            },
+            "production-fr": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "localize": ["fr"],
+              "i18nMissingTranslation": "error",
+              "outputHashing": "all",
+              "outputPath": "dist/codiki/fr/"
             },
             "development": {
               "optimization": false,
               "extractLicenses": false,
               "sourceMap": true
+            },
+            "en": {
+              "outputPath": "dist/codiki/en/",
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            },
+            "fr": {
+              "outputPath": "dist/codiki/fr/",
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "localize": ["fr"],
+              "i18nMissingTranslation": "warning"
             }
           },
-          "defaultConfiguration": "production"
+          "defaultConfiguration": ""
         },
         "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
+          "builder": "@angular/build:dev-server",
           "configurations": {
-            "production": {
+            "production-en": {
-              "buildTarget": "codiki-ng:build:production"
+              "buildTarget": "codiki:build:production-en"
+            },
+            "production-fr": {
+              "buildTarget": "codiki:build:production-fr"
             },
             "development": {
-              "buildTarget": "codiki-ng:build:development"
+              "buildTarget": "codiki:build:development"
+            },
+            "en": {
+              "buildTarget": "codiki:build:en"
+            },
+            "fr": {
+              "buildTarget": "codiki:build:fr"
             }
           },
           "defaultConfiguration": "development"
         },
         "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "builder": "@angular/build:extract-i18n",
           "options": {
-            "buildTarget": "codiki-ng:build"
+            "buildTarget": "codiki:build"
           }
         },
         "test": {
-          "builder": "@angular-devkit/build-angular:karma",
+          "builder": "@angular/build:karma",
           "options": {
             "polyfills": [
-              "zone.js",
-              "zone.js/testing"
             ],
             "tsConfig": "tsconfig.spec.json",
             "inlineStyleLanguage": "scss",
@@ -99,5 +148,34 @@
         }
       }
     }
+  },
+  "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

@@ -0,0 +1,54 @@
+events {
+    worker_connections 1024;
+}
+
+http {
+    # Browser preferred language detection (does NOT require AcceptLanguageModule)
+    map $http_accept_language $accept_language {
+        ~*^fr fr;
+        ~*^en en;
+    }
+
+    types {
+      module js;
+    }
+
+    include /etc/nginx/mime.types;
+
+    server {
+        listen 80;
+        server_name codiki.org;
+        root /usr/share/nginx/html;
+
+        # Fallback to default language if no preference defined by browser 
+        if ($accept_language ~ "^$") {
+            set $accept_language "fr";
+        }
+
+        location ~ ^/$ {
+            # Redirect "/" to Angular app in browser's preferred language
+            rewrite ^/$ /$accept_language permanent;
+            proxy_set_header Host $host:$server_port;
+            proxy_set_header X-Forwarded-Host $server_name;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        }
+
+        # Everything under the Angular app is always redirected to Angular in the correct language
+        location ~ ^/(fr|en)/ {
+            try_files $uri /$1/index.html?$args;
+            proxy_set_header Host $host:$server_port;
+            proxy_set_header X-Forwarded-Host $server_name;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        }
+
+        location ~ ^/api {
+            proxy_pass http://192.168.1.153:50011;
+            proxy_set_header Host $host:$server_port;
+            proxy_set_header X-Forwarded-Host $server_name;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        }
+    }
+}

frontend/package.json

@@ -3,38 +3,40 @@
   "version": "0.0.0",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve --port 4201 --proxy-config proxy.conf.json",
+    "start": "npm run start-en",
+    "start-en": "ng serve --port 4201 --configuration=en --proxy-config proxy.conf.json",
+    "start-fr": "ng serve --port 4201 --configuration=fr --proxy-config proxy.conf.json",
     "build": "ng build",
+    "build-prod-en": "ng build --configuration=production-en --base-href /en/",
+    "build-prod-fr": "ng build --configuration=production-fr --base-href",
     "watch": "ng build --watch --configuration development",
-    "test": "ng test"
+    "test": "ng test",
+    "i18n": "npm run i18n-ng-extraction && npm run i18n-fr-file-completion",
+    "i18n-ng-extraction": "ng extract-i18n --output-path src/locale --format=json",
+    "i18n-fr-file-completion": "cd ../ci/i18n-completer && npm start && cd -"
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^17.0.0",
+    "@angular/animations": "^21.1.2",
-    "@angular/cdk": "^17.3.1",
+    "@angular/cdk": "^21.1.2",
-    "@angular/common": "^17.0.0",
+    "@angular/common": "^21.1.2",
-    "@angular/compiler": "^17.0.0",
+    "@angular/compiler": "^21.1.2",
-    "@angular/core": "^17.0.0",
+    "@angular/core": "^21.1.2",
-    "@angular/forms": "^17.0.0",
+    "@angular/forms": "^21.1.2",
-    "@angular/material": "^17.3.1",
+    "@angular/material": "^21.1.2",
-    "@angular/platform-browser": "^17.0.0",
+    "@angular/platform-browser": "^21.1.2",
-    "@angular/platform-browser-dynamic": "^17.0.0",
+    "@angular/platform-browser-dynamic": "^21.1.2",
-    "@angular/router": "^17.0.0",
+    "@angular/router": "^21.1.2",
-    "rxjs": "~7.8.0",
+    "rxjs": "~7.8.2",
-    "tslib": "^2.3.0",
+    "tslib": "^2.8.1"
-    "zone.js": "~0.14.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^17.0.5",
+    "@angular/build": "^21.1.2",
-    "@angular/cli": "^17.0.5",
+    "@angular/cli": "^21.1.2",
-    "@angular/compiler-cli": "^17.0.0",
+    "@angular/compiler-cli": "^21.1.2",
-    "@types/jasmine": "~5.1.0",
+    "@angular/localize": "^21.1.2",
-    "jasmine-core": "~5.1.0",
+    "@types/jasmine": "~5.1.15",
-    "karma": "~6.4.0",
+    "jasmine-core": "~5.13.0",
-    "karma-chrome-launcher": "~3.2.0",
+    "typescript": "~5.9.3"
-    "karma-coverage": "~2.2.0",
-    "karma-jasmine": "~5.1.0",
-    "karma-jasmine-html-reporter": "~2.1.0",
-    "typescript": "~5.2.2"
   }
 }

frontend/proxy.conf.json

@@ -2,10 +2,6 @@
     "/api": {
       "target": "http://localhost:8987",
       "secure": false
-    },
-    "/pictures": {
-      "target": "http://localhost:8987/api",
-      "secure": false
     }
   }
   

frontend/src/app/app.component.html

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

frontend/src/app/app.component.scss

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

frontend/src/app/app.component.ts

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

frontend/src/app/app.config.ts

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

frontend/src/app/app.routes.ts

@@ -1,14 +1,41 @@
 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),
+    canActivate: [alreadyAuthenticatedGuard]
   },
   {
     path: 'disconnect',
     loadComponent: () => import('./pages/disconnection/disconnection.component').then(module => module.DisconnectionComponent)
   },
+  {
+    path: 'publications/new',
+    loadChildren: () => import('./pages/publication-creation/publication-creation.routes').then(module => module.ROUTES)
+  },
+  {
+    path: 'publications/:publicationId',
+    loadComponent: () => import('./pages/publication/publication.component').then(module => module.PublicationComponent)
+  },
+  {
+    path: 'publications/:publicationId/edit',
+    loadChildren: () => import('./pages/publication-update/publication-update.routes').then(module => module.ROUTES)
+  },
+  {
+    path: 'publications',
+    loadComponent: () => import('./pages/search-publications/search-publications.component').then(module => module.SearchPublicationsComponent)
+  },
+  {
+    path: 'my-publications',
+    loadChildren: () => import('./pages/my-publications/my-publications.routes').then(module => module.ROUTES)
+  },
   {
     path: '**',
     loadComponent: () => import('./pages/home/home.component').then(module => module.HomeComponent)

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

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

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

@@ -0,0 +1,12 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  padding: 1em;
+
+  footer {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+}

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

@@ -0,0 +1,35 @@
+import {Component, inject} from "@angular/core";
+import {MatRippleModule} from "@angular/material/core";
+import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
+
+export interface ConfirmationDialogData {
+  title: string;
+  description: string;
+}
+
+@Component({
+  selector: 'app-confirmation-dialog',
+  templateUrl: './confirmation-dialog.component.html',
+  styleUrl: './confirmation-dialog.component.scss',
+  imports: [MatRippleModule]
+})
+export class ConfirmationDialog {
+  private readonly dialogRef = inject(MatDialogRef<ConfirmationDialog>);
+  data: ConfirmationDialogData = inject(MAT_DIALOG_DATA);
+
+  get title(): string {
+    return this.data.title;
+  }
+
+  get description(): string {
+    return this.data.description;
+  }
+
+  closeAndValidate(): void {
+    this.dialogRef.close(true);
+  }
+
+  closeDialog(): void {
+    this.dialogRef.close(false);
+  }
+}

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

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

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

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

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

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

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

@@ -1,5 +1,10 @@
-<div>
+<div class="left">
-    <button type="button" (click)="sideMenu.open()">
+  <button type="button"
+          (click)="sideMenu.open()"
+          class="cod-button icon"
+          matTooltip="Click to show side menu"
+          matRipple
+          i18n-matTooltip>
     <mat-icon>menu</mat-icon>
   </button>
   <a [routerLink]="['/home']">
@@ -7,18 +12,33 @@
     <span class="title">Codiki</span>
   </a>
 </div>
-<div>
+
-    <input name="search-query" placeholder="Search something..." />
+<div class="middle">
-    <button type="button">
+  <app-publications-search-bar></app-publications-search-bar>
-        <mat-icon>search</mat-icon>
-    </button>
 </div>
-<div>
+
-    <ng-container *ngIf="isAuthenticated; else anonymousRightMenu">
+<div class="right">
-        <a [routerLink]="['/disconnect']">Disconnect</a>
+  @if (isAuthenticated) {
-    </ng-container>
+    <button type="button"
-    <ng-template #anonymousRightMenu>
+            class="cod-button icon"
-        <a [routerLink]="['/login']">Login</a>
+            [matMenuTriggerFor]="authenticatedUserMenu"
-    </ng-template>
+            matRipple>
+      <mat-icon>more_vert</mat-icon>
+    </button>
+    <mat-menu #authenticatedUserMenu="matMenu">
+      <div class="authenticated-user-menu">
+        <a [routerLink]="['/my-publications']" matRipple i18n>
+          <mat-icon>description</mat-icon>
+          My publications
+        </a>
+        <a [routerLink]="['/disconnect']" matRipple class="disconnection" i18n>
+          <mat-icon>logout</mat-icon>
+          Disconnect
+        </a>
+      </div>
+    </mat-menu>
+  } @else {
+    <a [routerLink]="['/login']" class="cod-button" matRipple i18n>Login</a>
+  }
 </div>
 <app-side-menu #sideMenu></app-side-menu>

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

@@ -14,34 +14,17 @@ $headerHeight: 3.5em;
     display: flex;
     flex-direction: row;
     justify-content: center;
+    position: relative;
     height: $headerHeight;
 
-        &:nth-child(1) {
+    &.left {
       position: absolute;
       top: 0;
       left: 0;
       align-items: center;
       gap: 1em;
       padding: 0 1em;
-
+      z-index: 2;
-            button {
-                background-color: #3f51b5;
-                color: white;
-                border: none;
-                border-radius: 10em;
-                transition: background-color .2s ease-in-out;
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                $buttonSize: 2.5em;
-                width: $buttonSize;
-                height: $buttonSize;
-
-                &:hover {
-                    cursor: pointer;
-                    background-color: #5c6bc0;
-                }
-            }
 
       a {
         display: flex;
@@ -60,51 +43,68 @@ $headerHeight: 3.5em;
 
         .title {
           font-size: 1.5em;
+          display: none;
+
+          @media screen and (min-width: 600px) {
+            display: block;
+          }
         }
       }
     }
 
-        &:nth-child(2) {
+    &.middle {
       flex: 1;
       $borderRadiusValue: 10em;
-
+      position: relative;
-            input {
+      transition: max-width .2s ease-in-out;
-                flex: 1;
-                width: 60%;
-                max-width: 50em;
-                border-radius: $borderRadiusValue 0 0 $borderRadiusValue;
-                background-color: white;
-                border: solid 1px #ccc;
-                margin: .5em 0;
-                padding: .2em .5em;
-            }
-
-            button {
-                display: flex;
-                align-items: center;
-                border-radius: 0 $borderRadiusValue $borderRadiusValue 0;
-                background-color: white;
-                border: solid 1px #ccc;
-                margin: .5em 0;
-
-                &:hover {
-                    background-color: #eee;
-                }
-            }
-        }
-
-        &:nth-child(3) {
-            position: absolute;
-            top: 0;
-            right: 0;
-            
-            a {
       display: flex;
       justify-content: center;
       align-items: center;
-                min-width: 5em;
+      z-index: 1;
-                color: white;
+
-                margin: 0 .5em;
+      app-publications-search-bar {
+        width: 100%;
+        max-width: 12em;
+
+        @media screen and (min-width: 435px) {
+          max-width: 16em;
+        }
+
+        @media screen and (min-width: 500px) {
+          max-width: 20em;
+        }
+
+        @media screen and (min-width: 700px) {
+          max-width: 24em;
+        }
+
+        @media screen and (min-width: 800px) {
+          max-width: 32em;
+        }
+
+        @media screen and (min-width: 900px) {
+          max-width: 38em;
+        }
+
+        @media screen and (min-width: 1000px) {
+          max-width: 45em;
+        }
+
+        @media screen and (min-width: 1100px) {
+          max-width: 50em;
+        }
+      }
+    }
+
+    &.right {
+      position: absolute;
+      top: 0;
+      right: 0;
+      z-index: 2;
+      margin-right: .5em;
+
+      a, button {
+        margin: .5em;
       }
     }
   }
@@ -113,3 +113,36 @@ $headerHeight: 3.5em;
 app-side-menu {
   height: 100%;
 }
+
+.authenticated-user-menu {
+  display: flex;
+  flex-direction: column;
+  padding: 0.2em 0;
+
+  a {
+    flex: 1;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    text-decoration: none;
+    background-color: white;
+    color: black;
+    padding: 1em;
+    gap: .5em;
+    transition: background-color .2s ease-in-out, color .2s ease-in-out;
+
+    &:hover {
+      background-color: #5c6bc0;
+      color: white;
+    }
+
+    &.disconnection {
+      color: #D50000;
+
+      &:hover {
+        background-color: #E53935;
+        color: white;
+      }
+    }
+  }
+}

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

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

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

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

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

@@ -0,0 +1,30 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  padding: 1em;
+  gap: 1em;
+  position: relative;
+  max-height: 90vh;
+
+  header {
+    flex: 1;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+  }
+
+  form {
+    div {
+      &.form-content {
+        mat-form-field {
+          width: 100%;
+
+          textarea {
+            height: 30vh;
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,119 @@
+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;
+  label: string;
+}
+
+export const PROGRAMMING_LANGUAGES: ProgramingLanguage[] = [
+  {
+    code: 'bash',
+    label: 'Bash'
+  },
+  {
+    code: 'c',
+    label: 'C'
+  },
+  {
+    code: 'cpp',
+    label: 'C++'
+  },
+  {
+    code: 'cs',
+    label: 'C#'
+  },
+  {
+    code: 'lua',
+    label: 'Lua'
+  },
+  {
+    code: 'java',
+    label: 'Java'
+  },
+  {
+    code: 'json5',
+    label: 'JSON'
+  },
+  {
+    code: 'kt',
+    label: 'Kotlin'
+  },
+  {
+    code: 'markup',
+    label: 'html/xml'
+  },
+  {
+    code: 'php',
+    label: 'PHP'
+  },
+  {
+    code: 'plsql',
+    label: 'PL/SQL'
+  },
+  {
+    code: 'python',
+    label: 'Python'
+  },
+  {
+    code: 'powershell',
+    label: 'PowerShell'
+  },
+  {
+    code: 'rust',
+    label: 'Rust'
+  },
+  {
+    code: 'sql',
+    label: 'SQL'
+  },
+  {
+    code: 'ts',
+    label: 'Typescript'
+  },
+  {
+    code: 'yml',
+    label: 'YAML'
+  },
+];
+
+@Component({
+  selector: 'app-code-block-dialog',
+  templateUrl: './code-block-dialog.component.html',
+  styleUrl: './code-block-dialog.component.scss',
+  imports: [
+    MatFormFieldModule,
+    MatIcon,
+    MatInputModule,
+    MatRippleModule,
+    MatSelectModule,
+    MatTooltip,
+    ReactiveFormsModule,
+  ]
+})
+export class CodeBlockDialog {
+  private readonly dialogRef = inject(MatDialogRef<CodeBlockDialog>);
+  private formBuilder = inject(FormBuilder);
+  programmingLanguages = PROGRAMMING_LANGUAGES;
+  formGroup = this.formBuilder.group({
+    programmingLanguage: new FormControl('', Validators.required),
+    codeBlock: new FormControl('', Validators.required)
+  });
+
+  closeAndValidate(): void {
+    if (this.formGroup.valid) {
+      this.dialogRef.close(this.formGroup.value);
+    }
+  }
+
+  closeDialog(): void {
+    this.dialogRef.close();
+  }
+}

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,135 @@
+import {CommonModule, Location} from "@angular/common";
+import {Component, effect, inject, input, output, signal} from "@angular/core";
+import {FormGroup, ReactiveFormsModule} from "@angular/forms";
+import {MatDialogModule} from "@angular/material/dialog";
+import {MatIconModule} from "@angular/material/icon";
+import {MatInputModule} from "@angular/material/input";
+import {MatProgressSpinnerModule} from "@angular/material/progress-spinner";
+import {MatSelectModule} from "@angular/material/select";
+import {MatTabsModule} from "@angular/material/tabs";
+import {MatTooltipModule} from "@angular/material/tooltip";
+import {map, Observable} from "rxjs";
+import {Category} from "../../core/rest-services/category/model/category";
+import {DEFAULT_PUBLICATION, Publication} from "../../core/rest-services/publications/model/publication";
+import {CategoryService} from "../../core/service/category.service";
+import {SubmitButtonComponent} from "../submit-button/submit-button.component";
+import {PublicationEditionService} from "./publication-edition.service";
+import {MatRippleModule} from "@angular/material/core";
+
+@Component({
+  selector: 'app-publication-edition',
+  templateUrl: './publication-edition.component.html',
+  styleUrl: './publication-edition.component.scss',
+  imports: [
+    CommonModule,
+    MatDialogModule,
+    MatIconModule,
+    MatInputModule,
+    MatRippleModule,
+    MatProgressSpinnerModule,
+    MatSelectModule,
+    MatTabsModule,
+    MatTooltipModule,
+    ReactiveFormsModule,
+    SubmitButtonComponent
+  ],
+  providers: [PublicationEditionService]
+})
+export class PublicationEditionComponent {
+  readonly #categoryService = inject(CategoryService);
+  readonly #location = inject(Location);
+  readonly #publicationEditionService = inject(PublicationEditionService);
+
+  publication = input.required<Publication>();
+  title = input.required<string>();
+  isSaving = input.required<boolean>();
+  publicationSave = output<Publication>();
+
+  isLoading = this.#publicationEditionService.isLoading;
+  isPreviewing = this.#publicationEditionService.isPreviewing;
+  publicationInEdition = signal<Publication>(DEFAULT_PUBLICATION);
+
+  constructor() {
+    effect(() => {
+      let publication = this.publication();
+      const publicationInEdition = this.publicationInEdition();
+      if (!publicationInEdition || publicationInEdition !== publication) {
+        this.publicationInEdition.set(publication);
+        this.#publicationEditionService.init(publication);
+      }
+    });
+  }
+
+  get publicationEditionForm(): FormGroup {
+    return this.#publicationEditionService.publicationEditionForm;
+  }
+
+  get categories$(): Observable<Category[]> {
+    return this.#categoryService.categories$
+      .pipe(
+        map(categories =>
+          categories.filter(category => category.subCategories.length == 0)
+            .sort(this.byNameAscComparator())
+        )
+      );
+  }
+
+  private byNameAscComparator(): (categoryA: Category, categoryB: Category) => number {
+    return (categoryA, categoryB) => this.compareStrings(categoryA.name, categoryB.name);
+  }
+
+  private compareStrings(stringA: string, stringB: string): number {
+    if (stringA < stringB) {
+      return -1;
+    }
+    if (stringA > stringB) {
+      return 1;
+    }
+    return 0;
+  }
+
+  goPreviousLocation(): void {
+    this.#location.back();
+  }
+
+  insertTitle(titleNumber: number): void {
+    this.#publicationEditionService.insertTitle(titleNumber);
+  }
+
+  selectAPicture(): void {
+    this.#publicationEditionService.selectAPicture();
+  }
+
+  insertLink(): void {
+    this.#publicationEditionService.insertLink();
+  }
+
+  displayCodeBlockDialog(): void {
+    this.#publicationEditionService.displayCodeBlockDialog();
+  }
+
+  displayPictureSectionDialog(): void {
+    this.#publicationEditionService.displayPictureSectionDialog();
+  }
+
+  updateCursorPosition(event: KeyboardEvent | MouseEvent): void {
+    if (event.target) {
+      const textarea = event.target as HTMLTextAreaElement;
+
+      const positionStart = textarea.selectionStart;
+      const positionEnd = textarea.selectionEnd;
+
+      this.#publicationEditionService.editCursorPosition(positionStart, positionEnd);
+    }
+  }
+
+  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

@@ -0,0 +1,287 @@
+import {Location} from "@angular/common";
+import {inject, Injectable, OnDestroy, Signal, signal} from "@angular/core";
+import {MatDialog} from "@angular/material/dialog";
+import {MatSnackBar} from "@angular/material/snack-bar";
+import {ActivatedRoute} from "@angular/router";
+import {debounceTime, distinctUntilChanged, Subscription} from "rxjs";
+import {DEFAULT_PUBLICATION, Publication} from "../../core/rest-services/publications/model/publication";
+import {PublicationRestService} from "../../core/rest-services/publications/publication.rest-service";
+import {copy} from "../../core/utils/ObjectUtils";
+import {CodeBlockDialog} from "./code-block-dialog/code-block-dialog.component";
+import {PictureSelectionDialog} from "./picture-selection-dialog/picture-selection-dialog.component";
+import {PreviewContentRequest} from "../../core/rest-services/publications/model/preview";
+import {FormBuilder, FormControl, FormGroup, Validators} from "@angular/forms";
+
+declare let Prism: any;
+
+export class CursorPosition {
+  start: number;
+  end: number;
+  selectedCharacters: number;
+
+  constructor(start: number, end: number) {
+    this.start = start;
+    this.end = end;
+    this.selectedCharacters = end - start;
+  }
+}
+
+export interface PublicationEditionState {
+  publication: Publication;
+  cursorPosition: CursorPosition;
+}
+
+const DEFAULT_CURSOR_POSITION = new CursorPosition(0, 0);
+
+const DEFAULT_STATE: PublicationEditionState = {
+  publication: DEFAULT_PUBLICATION,
+  cursorPosition: DEFAULT_CURSOR_POSITION
+};
+
+@Injectable()
+export class PublicationEditionService implements OnDestroy {
+  readonly #activatedRoute = inject(ActivatedRoute);
+  readonly #dialog = inject(MatDialog);
+  readonly #formBuilder = inject(FormBuilder);
+  readonly #location = inject(Location);
+  readonly #publicationRestService = inject(PublicationRestService);
+  readonly #snackBar = inject(MatSnackBar);
+
+  #isLoading = signal(false);
+  #state = signal<PublicationEditionState>(copy(DEFAULT_STATE));
+  #isSaving = signal<boolean>(false);
+  #isPreviewing = signal<boolean>(false);
+  #subscriptions: Subscription[] = [];
+
+  publicationEditionForm: FormGroup = this.#formBuilder.group({
+    title: new FormControl<string | undefined>('', [Validators.required]),
+    description: new FormControl<string | undefined>('', [Validators.required]),
+    text: new FormControl<string | undefined>('', [Validators.required]),
+    illustrationId: new FormControl<string | undefined>('', [Validators.required]),
+    categoryId: new FormControl<string | undefined>('', [Validators.required])
+  });
+
+  ngOnDestroy(): void {
+    this.#subscriptions.forEach(subscription => subscription.unsubscribe());
+  }
+
+  #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(): Signal<boolean> {
+    return this.#isLoading.asReadonly();
+  }
+
+  get isSaving(): Signal<boolean> {
+    return this.#isSaving.asReadonly();
+  }
+
+  get isPreviewing(): Signal<boolean> {
+    return this.#isPreviewing.asReadonly();
+  }
+
+  get state(): Signal<PublicationEditionState> {
+    return this.#state.asReadonly();
+  }
+
+  get editedPublication(): Publication {
+    return this.#state().publication;
+  }
+
+  loadPublication(): void {
+    this.#isLoading.set(true);
+
+    this.#activatedRoute.paramMap.subscribe(params => {
+      const publicationId = params.get('publicationId');
+      if (publicationId == undefined) {
+        this.#snackBar.open($localize`A technical error occurred while loading publication data.`, $localize`Close`, {duration: 5000});
+        this.#location.back();
+      } else {
+        this.#publicationRestService.getById(publicationId)
+          .then(publication => {
+            const state = this.#state();
+            state.publication = publication;
+            this.#state.set(state);
+          })
+          .catch(error => {
+            const errorMessage = $localize`A technical error occurred while loading publication data.`;
+            this.#snackBar.open(errorMessage, $localize`Close`, {duration: 5000});
+            console.error(errorMessage, error)
+          })
+          .finally(() => this.#isLoading.set(false));
+      }
+    });
+  }
+
+  init(publication: Publication): void {
+    const state = this.#state();
+    state.publication = publication;
+    this.#state.set(state);
+    this.#updateForm();
+
+    const formValueChangesSubscription = this.publicationEditionForm.valueChanges
+      .pipe(
+        debounceTime(200),
+        distinctUntilChanged()
+      )
+      .subscribe(formValue => {
+        const state = this.#state();
+        const publication = state.publication;
+
+        publication.title = formValue.title;
+        publication.description = formValue.description;
+        publication.categoryId = formValue.categoryId;
+        publication.text = formValue.text;
+
+        this.#state.set(state);
+      });
+    this.#subscriptions.push(formValueChangesSubscription);
+  }
+
+  private editIllustrationId(pictureId: string): void {
+    const state = this.#state();
+    state.publication.illustrationId = pictureId
+    this.#state.set(state);
+  }
+
+  displayPictureSectionDialog(): void {
+    const dialogRef = this.#dialog.open(PictureSelectionDialog);
+
+    const afterDialogCloseSubscription = dialogRef.afterClosed()
+      .subscribe(newPictureId => {
+        if (newPictureId) {
+          this.editIllustrationId(newPictureId);
+        }
+      });
+    this.#subscriptions.push(afterDialogCloseSubscription);
+  }
+
+  displayCodeBlockDialog(): void {
+    const dialogRef = this.#dialog.open(CodeBlockDialog, {width: '60em'});
+
+    const afterDialogCloseSubscription = dialogRef.afterClosed()
+      .subscribe(codeBlockWithLanguage => {
+        if (codeBlockWithLanguage) {
+          this.insertCodeBlock(codeBlockWithLanguage.programmingLanguage, codeBlockWithLanguage.codeBlock);
+        }
+      });
+    this.#subscriptions.push(afterDialogCloseSubscription);
+  }
+
+  editCursorPosition(positionStart: number, positionEnd: number): void {
+    const state = this.#state();
+
+    state.cursorPosition.start = positionStart;
+    state.cursorPosition.end = positionEnd;
+
+    this.#state.set(state);
+  }
+
+  insertTitle(titleNumber: number): void {
+    if (titleNumber >= 1 && titleNumber <= 3) {
+      const state = this.#state();
+
+      const publication = state.publication;
+
+      const publicationTextLeftPart = publication.text.substring(0, state.cursorPosition.start);
+      const publicationTextMiddlePart = publication.text.substring(state.cursorPosition.start, state.cursorPosition.end);
+      const publicationTextRightPart = publication.text.substring(state.cursorPosition.end);
+      const textWithTags = `${publicationTextLeftPart}[h${titleNumber}]${publicationTextMiddlePart}[/h${titleNumber}]${publicationTextRightPart}`;
+
+      publication.text = textWithTags;
+
+      this.#state.set(state);
+      this.#updateForm();
+    } else {
+      console.error(`Bad value for parameter of function 'insertTitle': '${titleNumber}'.`);
+    }
+  }
+
+  selectAPicture(): void {
+    const dialogRef = this.#dialog.open(PictureSelectionDialog);
+
+    const afterDialogCloseSubscription = dialogRef.afterClosed()
+      .subscribe(newPictureId => {
+        if (newPictureId) {
+          this.insertPicture(newPictureId);
+        }
+      });
+    this.#subscriptions.push(afterDialogCloseSubscription);
+  }
+
+  insertPicture(pictureId: string): void {
+    const state = this.#state();
+
+    const publication = state.publication;
+
+    const publicationTextLeftPart = publication.text.substring(0, state.cursorPosition.start);
+    const publicationTextRightPart = publication.text.substring(state.cursorPosition.start);
+    const textWithTags = `${publicationTextLeftPart}[img src="/api/pictures/${pictureId}" /]${publicationTextRightPart}`;
+
+    publication.text = textWithTags;
+
+    this.#state.set(state);
+    this.#updateForm();
+  }
+
+  insertLink(): void {
+    const state = this.#state();
+
+    const publication = state.publication;
+
+    const publicationTextLeftPart = publication.text.substring(0, state.cursorPosition.start);
+    const publicationTextMiddlePart = publication.text.substring(state.cursorPosition.start, state.cursorPosition.end);
+    const publicationTextRightPart = publication.text.substring(state.cursorPosition.end);
+    const textWithTags = `${publicationTextLeftPart}[link href="" txt="${publicationTextMiddlePart}" /]${publicationTextRightPart}`;
+
+    publication.text = textWithTags;
+
+    this.#state.set(state);
+    this.#updateForm();
+  }
+
+  private insertCodeBlock(programmingLanguage: string, codeBlock: string): void {
+    const state = this.#state();
+
+    const publication = state.publication;
+
+    const publicationTextLeftPart = publication.text.substring(0, state.cursorPosition.start);
+    const publicationTextRightPart = publication.text.substring(state.cursorPosition.start);
+    const codeBlockInstruction = `\n[code lg="${programmingLanguage}"]\n${codeBlock}\n[/code]\n\n`;
+    const textWithTags = `${publicationTextLeftPart}${codeBlockInstruction}${publicationTextRightPart}`;
+
+    publication.text = textWithTags;
+
+    this.#state.set(state);
+    this.#updateForm();
+  }
+
+  loadPreview(): void {
+    const state = this.#state();
+
+    this.#isPreviewing.set(true);
+    const request: PreviewContentRequest = {
+      text: state.publication.text
+    };
+    this.#publicationRestService.preview(request)
+      .then(response => {
+        state.publication.parsedText = response.text;
+        this.#state.set(state);
+        setTimeout(() => Prism.highlightAll(), 1000);
+      })
+      .catch(error => {
+        console.error(error);
+      })
+      .finally(() => {
+        this.#isPreviewing.set(false);
+      });
+  }
+}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -12,7 +12,7 @@
     bottom: 0;
     transition: left .2s ease-in-out;
     width: $categoriesMenuWidth;
-        z-index: 2;
+    z-index: 3;
     padding: 1em 0;
 
     &.displayed {
@@ -41,24 +41,6 @@
           height: $imageSize;
         }
       }
-
-            button {
-                border-radius: 10em;
-                border: none;
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                width: 2.5em;
-                height: 2.5em;
-                color: white;
-                background-color: #3f51b5;
-                transition: background-color .2s ease-in-out;
-
-                &:hover {
-                    cursor: pointer;
-                    background-color: #5c6bc0;
-                }
-            }
     }
 
     h2 {
@@ -77,6 +59,7 @@
     height: 100%;
     background-color: #000;
     opacity: .2;
+    z-index: 2;
 
     &.displayed {
       display: block;

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

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

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

@@ -1,6 +1,6 @@
-import { Injectable, OnDestroy, inject } from '@angular/core';
+import {inject, Injectable, Signal, signal} from '@angular/core';
-import { CategoryService } from '../../core/service/category.service';
+import {MatSnackBar} from '@angular/material/snack-bar';
-import { BehaviorSubject, Observable, Subscription, map } from 'rxjs';
+import {CategoryRestService} from '../../core/rest-services/category/category.rest-service';
 import {Category} from '../../core/rest-services/category/model/category';
 
 export interface DisplayableCategory {
@@ -18,59 +18,61 @@ export interface DisplayableSubCategory {
 @Injectable({
   providedIn: 'root'
 })
-export class SideMenuService implements OnDestroy {
+export class SideMenuService {
-  private categoryService = inject(CategoryService);
+  readonly #categoryRestService = inject(CategoryRestService);
-  private categoriesSubject = new BehaviorSubject<DisplayableCategory[]>([]);
+  readonly #snackBar = inject(MatSnackBar);
-  private categoriesSubscription: Subscription | undefined;
+  #categories = signal<DisplayableCategory[]>([]);
+  #isLoading = signal(false);
+  isLoaded = signal(false);
 
-  constructor() {
+  #mapToDisplayableCategory(category: Category): DisplayableCategory {
-    this.categoriesSubscription = this.categoryService.categories$
-      .pipe(
-        map(categories =>
-          categories
-            .filter(category => category.subCategories?.length)
-            .map(category => 
-              this.mapToDisplayableCategory(category)
-            )
-        )
-      )
-      .subscribe(categories => this.categoriesSubject.next(categories));
-  }
-
-  ngOnDestroy(): void {
-    this.categoriesSubscription?.unsubscribe();
-  }
-
-  private mapToDisplayableCategory(category: Category): DisplayableCategory {
     return {
       id: category.id,
       name: category.name,
-      subCategories: category.subCategories.map(subCategory => this.mapToDisplayableSubCategory(subCategory)),
+      subCategories: category.subCategories.map(subCategory => this.#mapToDisplayableSubCategory(subCategory)),
       isOpenned: false
     };
   }
 
-  private mapToDisplayableSubCategory(subCategory: Category): DisplayableSubCategory {
+  #mapToDisplayableSubCategory(subCategory: Category): DisplayableSubCategory {
     return {
       id: subCategory.id,
       name: subCategory.name
     }
   }
 
-  get categories$(): Observable<DisplayableCategory[]> {
+  get categories(): Signal<DisplayableCategory[]> {
-    return this.categoriesSubject.asObservable();
+    return this.#categories.asReadonly();
   }
 
-  private get categories(): DisplayableCategory[] {
+  get isLoading(): Signal<boolean> {
-    return this.categoriesSubject.value;
+    return this.#isLoading.asReadonly();
   }
 
-  private save(categories: DisplayableCategory[]): void {
+  loadCategories(): void {
-    this.categoriesSubject.next(categories);
+    this.#isLoading.set(true);
+    this.isLoaded.set(false);
+
+    this.#categoryRestService.getCategories()
+      .then(categories => {
+        const displayableCategories = categories
+          .filter(category => category.subCategories?.length)
+          .map(category => this.#mapToDisplayableCategory(category));
+        this.#categories.set(displayableCategories);
+      })
+      .catch(error => {
+        const errorMessage = $localize`An error occured while loading categories.`;
+        console.error(errorMessage, error);
+        this.#snackBar.open(errorMessage, $localize`Close`, {duration: 5000});
+      })
+      .finally(() => {
+        this.#isLoading.set(false);
+        this.isLoaded.set(true);
+      });
   }
 
-  setOpenned(category: DisplayableCategory): void {
+  setOpened(category: DisplayableCategory): void {
-    const categories = this.categories;
+    const categories = this.#categories();
     const matchingCategory = categories.find(categoryTemp => categoryTemp.id === category.id);
     if (matchingCategory) {
       const actualOpennedCategory = categories.find(category => category.isOpenned);
@@ -80,7 +82,7 @@ export class SideMenuService implements OnDestroy {
         categories.forEach(categoryTemp => categoryTemp.isOpenned = false);
         matchingCategory.isOpenned = true;
       }
-      this.save(categories);
+      this.#categories.set(categories);
     }
   }
 }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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