Add icon button style.

Add a guard to deny access for some routes.

backend/codiki-application/src/main/java/org/codiki/application/security/model/CustomUserDetails.java

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

backend/codiki-exposition/pom.xml

@@ -25,10 +25,6 @@
             <groupId>org.springframework.boot</groupId>
             <artifactId>spring-boot-starter-web</artifactId>
         </dependency>
-        <dependency>
-            <groupId>org.springframework.boot</groupId>
-            <artifactId>spring-boot-starter-aop</artifactId>
-        </dependency>
         <dependency>
             <groupId>org.projectlombok</groupId>
             <artifactId>lombok</artifactId>
@@ -37,5 +33,28 @@
             <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/TrafficTraceConfiguration.java

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

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

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

backend/codiki-exposition/src/main/java/org/codiki/exposition/traffic/ApiCallsLoggerAspect.java

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

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

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

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

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

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

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

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

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

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

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

backend/pom.xml

@@ -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.1.0</jakarta.servlet-api.version>
+		<jakarta.servlet-api.version>6.0.0</jakarta.servlet-api.version>
 		<java-jwt.version>4.4.0</java-jwt.version>
+		<postgresql.version>42.7.0</postgresql.version>
 		<tika-core.version>2.9.0</tika-core.version>
-		<postgresql.version>42.7.4</postgresql.version>
-		<commons-lang3.version>3.17.0</commons-lang3.version>
+		<commons-lang3.version>3.14.0</commons-lang3.version>
 	</properties>
 
 	<modules>
@@ -35,7 +35,7 @@
 			<dependency>
 				<groupId>org.springframework.boot</groupId>
 				<artifactId>spring-boot-dependencies</artifactId>
-				<version>3.3.4</version>
+				<version>3.2.0</version>
 				<type>pom</type>
 				<scope>import</scope>
 			</dependency>
@@ -84,6 +84,8 @@
 				<artifactId>commons-lang3</artifactId>
 				<version>${commons-lang3.version}</version>
 			</dependency>
+
+
 		</dependencies>
 	</dependencyManagement>
 

frontend/package-lock.json

@@ -20,7 +20,6 @@
         "@angular/router": "^18.2.5",
         "rxjs": "~7.8.0",
         "tslib": "^2.3.0",
-        "uuid": "^10.0.0",
         "zone.js": "~0.14.10"
       },
       "devDependencies": {
@@ -29,7 +28,6 @@
         "@angular/compiler-cli": "^18.2.5",
         "@angular/localize": "^18.2.5",
         "@types/jasmine": "~5.1.0",
-        "@types/uuid": "^10.0.0",
         "jasmine-core": "~5.1.0",
         "karma": "~6.4.0",
         "karma-chrome-launcher": "~3.2.0",
@@ -4657,13 +4655,6 @@
         "@types/node": "*"
       }
     },
-    "node_modules/@types/uuid": {
-      "version": "10.0.0",
-      "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-10.0.0.tgz",
-      "integrity": "sha512-7gqG38EyHgyP1S+7+xomFtL+ZNHcKv6DwNaCZmJmo1vgMugyF3TCnXVg4t1uk89mLNwnLtnY3TpOpCOyp1/xHQ==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/@types/wrap-ansi": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@types/wrap-ansi/-/wrap-ansi-3.0.0.tgz",
@@ -12436,16 +12427,6 @@
         "websocket-driver": "^0.7.4"
       }
     },
-    "node_modules/sockjs/node_modules/uuid": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
-      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
-      "dev": true,
-      "license": "MIT",
-      "bin": {
-        "uuid": "dist/bin/uuid"
-      }
-    },
     "node_modules/socks": {
       "version": "2.8.3",
       "resolved": "https://registry.npmjs.org/socks/-/socks-2.8.3.tgz",
@@ -13334,13 +13315,10 @@
       }
     },
     "node_modules/uuid": {
-      "version": "10.0.0",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-10.0.0.tgz",
-      "integrity": "sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ==",
-      "funding": [
-        "https://github.com/sponsors/broofa",
-        "https://github.com/sponsors/ctavan"
-      ],
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "dev": true,
       "license": "MIT",
       "bin": {
         "uuid": "dist/bin/uuid"

frontend/package.json

@@ -29,7 +29,6 @@
     "@angular/router": "^18.2.5",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
-    "uuid": "^10.0.0",
     "zone.js": "~0.14.10"
   },
   "devDependencies": {
@@ -38,7 +37,6 @@
     "@angular/compiler-cli": "^18.2.5",
     "@angular/localize": "^18.2.5",
     "@types/jasmine": "~5.1.0",
-    "@types/uuid": "^10.0.0",
     "jasmine-core": "~5.1.0",
     "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.2.0",

frontend/src/app/app.config.ts

@@ -1,11 +1,11 @@
-import { ApplicationConfig } from '@angular/core';
+import { APP_INITIALIZER, ApplicationConfig } from '@angular/core';
 import { provideRouter, withRouterConfig } from '@angular/router';
 
 import { HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
 import { routes } from './app.routes';
 import { JwtInterceptor } from './core/interceptor/jwt.interceptor';
-import { CorrelationIdInterceptor } from './core/interceptor/correlation-id.interceptor';
+import { AuthenticationService } from './core/service/authentication.service';
 
 export const appConfig: ApplicationConfig = {
   providers: [
@@ -19,6 +19,11 @@ export const appConfig: ApplicationConfig = {
     provideAnimationsAsync(),
     provideHttpClient(withInterceptorsFromDi()),
     { provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },
-    { provide: HTTP_INTERCEPTORS, useClass: CorrelationIdInterceptor, multi: true },
+    {
+      provide: APP_INITIALIZER,
+      useFactory: (authenticationService: AuthenticationService) => () => authenticationService.startAuthenticationCheckingProcess(),
+      deps: [AuthenticationService],
+      multi: true
+    }
   ]
 };

frontend/src/app/app.routes.ts

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,10 +1,15 @@
-<button type="button" class="close" (click)="closeDialog()">
+<button type="button"
+        (click)="closeDialog()"
+        class="cod-btn icon secondary close"
+        matTooltip="Close"
+        matRipple
+        i18n-matTooltip>
     <mat-icon>close</mat-icon>
 </button>
 <header>
     <h1 i18n>Add a code block</h1>
 </header>
-<form [formGroup]="formGroup" (submit)="closeAndValidate()" ngNativeValidate>
+<form [formGroup]="formGroup" (submit)="closeAndValidate()" class="cod-form" ngNativeValidate>
     <div class="form-content">
         <mat-form-field>
             <mat-label i18n>Programming language</mat-label>
@@ -21,11 +26,11 @@
             <textarea matInput formControlName="codeBlock"></textarea>
         </mat-form-field>
     </div>
-    <div class="actions">
-        <button type="submit" i18n>
+    <div class="actions reversed">
+        <button type="submit" class="cod-btn" matRipple i18n>
             Validate
         </button>
-        <button type="button" (click)="closeDialog()" class="secondary" i18n>
+        <button type="button" (click)="closeDialog()" class="cod-btn secondary" matRipple i18n>
             Cancel
         </button>
     </div>

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

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

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

@@ -1,10 +1,12 @@
 import { Component, inject } from "@angular/core";
 import { FormBuilder, FormControl, ReactiveFormsModule, Validators } from "@angular/forms";
+import { 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;
@@ -91,7 +93,9 @@ export const PROGRAMMING_LANGUAGES: ProgramingLanguage[] = [
         MatFormFieldModule,
         MatIcon,
         MatInputModule,
+        MatRippleModule,
         MatSelectModule,
+        MatTooltip,
         ReactiveFormsModule,
     ]
 })

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

@@ -1,4 +1,9 @@
-<button type="button" class="close" (click)="closeDialog()">
+<button type="button"
+        (click)="closeDialog()"
+        class="cod-btn icon secondary close"
+        matTooltip="Close"
+        matRipple
+        i18n-matTooltip>
     <mat-icon>close</mat-icon>
 </button>
 <header>
@@ -19,10 +24,18 @@
     }
 </div>
 <footer>
-    <button type="button" class="secondary" matRipple (click)="closeDialog()" i18n>
+    <button type="button"
+            (click)="closeDialog()"
+            class="cod-btn secondary"
+            matRipple
+            i18n>
         Cancel
     </button>
-    <button type="button" (click)="fileUpload.click()" matRipple i18n>
+    <button type="button"
+            (click)="fileUpload.click()"
+            class="cod-btn"
+            matRipple
+            i18n>
         <mat-icon>upload_file</mat-icon>
         Add new picture
     </button>

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

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

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

@@ -11,9 +11,14 @@ import { MatTooltip } from "@angular/material/tooltip";
 @Component({
     selector: 'app-picture-selection',
     standalone: true,
-    imports: [MatProgressSpinnerModule, MatIcon, MatRippleModule, MatTooltip],
     templateUrl: './picture-selection-dialog.component.html',
     styleUrl: './picture-selection-dialog.component.scss',
+    imports: [
+        MatIcon, 
+        MatRippleModule, 
+        MatProgressSpinnerModule, 
+        MatTooltip
+    ],
 })
 export class PictureSelectionDialog implements OnInit {
     private readonly pictureRestService = inject(PictureRestService);

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

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

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

@@ -102,6 +102,11 @@
 
         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;
@@ -109,35 +114,16 @@
             height: 3em;
             box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
             font-weight: bold;
-        }
-    }
-}
 
-button, a.button {
-    padding: .8em 1.2em;
-    border-radius: 10em;
-    border: none;
-    background-color: #3f51b5;
-    color: white;
-    transition: background-color .2s ease-in-out;
-
-    &:hover {
-        background-color: #5b6ed8;
-        cursor: pointer;
-    }
-
-    &:disabled {
-        background-color: #5f6aa6;
-        cursor: not-allowed;
-    }
-
-    &.secondary {
-        color: #3f51b5;
-        background-color: white;
-
-        &:hover {
-            background-color: #f2f4ff;
-            cursor: pointer;
+            &:hover {
+                background-color: #5b6ed8;
+                cursor: pointer;
+            }
+        
+            &:disabled {
+                background-color: #5f6aa6;
+                cursor: not-allowed;
+            }
         }
     }
 }

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

@@ -15,6 +15,7 @@ import { CategoryService } from "../../core/service/category.service";
 import { SubmitButtonComponent } from "../submit-button/submit-button.component";
 import { PictureSelectionDialog } from "./picture-selection-dialog/picture-selection-dialog.component";
 import { PublicationEditionService } from "./publication-edition.service";
+import { MatRippleModule } from "@angular/material/core";
 
 @Component({
     selector: 'app-publication-edition',
@@ -26,6 +27,7 @@ import { PublicationEditionService } from "./publication-edition.service";
         MatDialogModule,
         MatIconModule,
         MatInputModule,
+        MatRippleModule,
         MatProgressSpinnerModule,
         MatSelectModule,
         MatTabsModule,

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

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

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

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

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

@@ -1,6 +1,6 @@
-import { HttpParams } from "@angular/common/http";
 import { Component, inject } from "@angular/core";
 import { FormBuilder, FormControl, ReactiveFormsModule, Validators } from "@angular/forms";
+import { MatRippleModule } from "@angular/material/core";
 import { MatIconModule } from "@angular/material/icon";
 import { Router } from "@angular/router";
 
@@ -11,8 +11,9 @@ import { Router } from "@angular/router";
     styleUrl: './publications-search-bar.component.scss',
     standalone: true,
     imports: [
-        ReactiveFormsModule,
-        MatIconModule
+        MatIconModule,
+        MatRippleModule,
+        ReactiveFormsModule
     ],
     providers: []
 })

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

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

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

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

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

@@ -4,7 +4,12 @@
             <img src="assets/images/codiki.png" alt="logo"/>
             Codiki
         </a>
-        <button type="button" (click)="close()" matTooltip="Close the menu" i18n-matTooltip>
+        <button type="button"
+                (click)="close()"
+                class="cod-btn icon"
+                matTooltip="Close the menu"
+                matRipple
+                i18n-matTooltip>
             <mat-icon>close</mat-icon>
         </button>
     </h1>

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

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

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

@@ -3,13 +3,20 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { RouterModule } from '@angular/router';
 import { CategoriesMenuComponent } from './categories-menu/categories-menu.component';
+import { MatRippleModule } from '@angular/material/core';
 
 @Component({
   selector: 'app-side-menu',
   standalone: true,
-  imports: [CategoriesMenuComponent, MatIconModule, MatTooltipModule, RouterModule],
   templateUrl: './side-menu.component.html',
-  styleUrl: './side-menu.component.scss'
+  styleUrl: './side-menu.component.scss',
+  imports: [
+    CategoriesMenuComponent, 
+    MatIconModule,
+    MatRippleModule, 
+    MatTooltipModule,
+    RouterModule
+  ]
 })
 export class SideMenuComponent {
   isOpenned: boolean = false;

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

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

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

@@ -1,14 +1,18 @@
 import { CommonModule } from "@angular/common";
 import { Component, EventEmitter, Input, Output } from "@angular/core";
+import { MatRippleModule } from "@angular/material/core";
 import { MatProgressSpinnerModule } from "@angular/material/progress-spinner";
 
-
 @Component({
     selector: 'app-submit-button',
     standalone: true,
-    imports: [MatProgressSpinnerModule, CommonModule],
     templateUrl: 'submit-button.component.html',
-    styleUrl: 'submit-button.component.scss'
+    styleUrl: 'submit-button.component.scss',
+    imports: [
+        CommonModule,
+        MatRippleModule,
+        MatProgressSpinnerModule
+    ]
 })
 export class SubmitButtonComponent {
     @Input() requestPending: boolean = false;

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

@@ -3,11 +3,13 @@ import { CanActivateFn, Router } from "@angular/router";
 import { AuthenticationService } from "../service/authentication.service";
 import { MatSnackBar } from "@angular/material/snack-bar";
 
-export const authenticationGuard: CanActivateFn = () => {
+export const authenticationGuard: CanActivateFn = async () => {
     const authenticationService = inject(AuthenticationService);
     const router = inject(Router);
     const snackBar = inject(MatSnackBar);
 
+    await authenticationService.checkIsAuthenticated();
+
     if (authenticationService.isAuthenticated()) {
         return true;
     } else {

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

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

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

@@ -41,23 +41,12 @@ export class JwtInterceptor implements HttpInterceptor {
             this.isRefreshingToken = true;
             this.refreshTokenSubject.next(undefined);
 
-            const refreshToken = this.authenticationService.getRefreshToken();
-            if (refreshToken) {
-                const refreshTokenRequest: RefreshTokenRequest = {
-                    refreshTokenValue: refreshToken
-                };
-                this.userRestService.refreshToken(refreshTokenRequest)
-                    .then(refreshTokenResponse => {
-                        this.authenticationService.authenticate(refreshTokenResponse.accessToken, refreshTokenResponse.refreshToken);
-                        this.refreshTokenSubject.next(refreshTokenResponse.accessToken);
-                    })
-                    .catch(() => {
-                        return this.handleNoRefreshToken(initialError);
-                    })
-                    .finally(() => this.isRefreshingToken = false);
-            } else {
-                return this.handleNoRefreshToken(initialError);
-            }
+            this.authenticationService.refreshToken()
+                .then(refreshTokenResponse => {
+                    this.refreshTokenSubject.next(refreshTokenResponse.accessToken);
+                })
+                .catch(() => this.handleNoRefreshToken(initialError))
+                .finally(() => this.isRefreshingToken = false);
         }
 
         return this.refreshTokenSubject.pipe(

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

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

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

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

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

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

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

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

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

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

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

@@ -60,18 +60,24 @@ export class LoginService {
   performLogin(): void {
     const state = this.state;
 
-    // Check state is valid
+    if (this.isStateValid(state)) {
+      this.userRestService
+        .login(state.request)
+        .then((response) => {
+          this.authenticationService.authenticate(response.accessToken, response.refreshToken);
+          this.snackBar.open($localize`Authentication succeeded!`, $localize`Close`, { duration: 5000 });
+          this.router.navigate(['/home']);
+        })
+        .catch((error) => {
+          console.error(error);
+          this.snackBar.open($localize`Authentication failed.`, $localize`Close`, { duration: 5000 });
+        });
+    } else {
+      this.snackBar.open($localize`Please, fill the inputs before send.`, $localize`Close`, { duration: 5000 });
+    }
+  }
 
-    this.userRestService
-      .login(state.request)
-      .then((response) => {
-        this.authenticationService.authenticate(response.accessToken, response.refreshToken);
-        this.snackBar.open($localize`Authentication succeeded!`, $localize`Close`, { duration: 5000 });
-        this.router.navigate(['/home']);
-      })
-      .catch((error) => {
-        console.error(error);
-        this.snackBar.open($localize`Authentication failed.`, $localize`Close`, { duration: 5000 });
-      });
+  isStateValid(state: LoginState): boolean {
+    return !!state.request.email?.trim().length && !!state.request.password?.length;
   }
 }

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

@@ -4,6 +4,7 @@
     class="new-publication"
     matTooltip="Add a new publication"
     matTooltipPosition="left"
+    matRipple
     i18n-matTooltip>
     +
 </a>

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

@@ -7,6 +7,7 @@ import { Publication } from "../../core/rest-services/publications/model/publica
 import { CommonModule } from "@angular/common";
 import { RouterModule } from "@angular/router";
 import { MatTooltipModule } from "@angular/material/tooltip";
+import { MatRippleModule } from "@angular/material/core";
 
 
 @Component({
@@ -17,8 +18,9 @@ import { MatTooltipModule } from "@angular/material/tooltip";
     imports: [
         CommonModule,
         MatProgressSpinnerModule,
-        PublicationListComponent,
+        MatRippleModule,
         MatTooltipModule,
+        PublicationListComponent,
         RouterModule
     ],
     providers: [MyPublicationsService]

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

@@ -12,6 +12,7 @@
                     <a [routerLink]="['edit']"
                         class="button action"
                         matTooltip="Click to edit the publication"
+                        matRipple
                         i18n-matTooltip>
                         <mat-icon>edit</mat-icon>
                     </a>
@@ -33,6 +34,7 @@
                         (click)="deletePublication()"
                         matTooltip="Click to delete the publication" 
                         matTooltipPosition="left"
+                        matRipple
                         i18n-matTooltip>
                         <mat-icon>delete</mat-icon>
                         Delete

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

@@ -1,25 +1,33 @@
-import { Component, OnDestroy, OnInit, inject } from '@angular/core';
-import { PublicationRestService } from '../../core/rest-services/publications/publication.rest-service';
-import { ActivatedRoute, Router, RouterModule } from '@angular/router';
-import { Subscription } from 'rxjs';
-import { Publication } from '../../core/rest-services/publications/model/publication';
-import { MatSnackBar } from '@angular/material/snack-bar';
 import { CommonModule, Location } from '@angular/common';
-import { MatProgressSpinner } from '@angular/material/progress-spinner';
-import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
-import { MatIcon } from '@angular/material/icon';
-import { AuthenticationService } from '../../core/service/authentication.service';
+import { Component, OnDestroy, OnInit, inject } from '@angular/core';
+import { MatRippleModule } from '@angular/material/core';
 import { MatDialog } from '@angular/material/dialog';
+import { MatIcon } from '@angular/material/icon';
+import { MatProgressSpinner } from '@angular/material/progress-spinner';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { ActivatedRoute, RouterModule } from '@angular/router';
+import { Subscription } from 'rxjs';
 import { ConfirmationDialog } from '../../components/confirmation-dialog/confirmation-dialog.component';
+import { Publication } from '../../core/rest-services/publications/model/publication';
+import { PublicationRestService } from '../../core/rest-services/publications/publication.rest-service';
+import { AuthenticationService } from '../../core/service/authentication.service';
 
 declare let Prism: any;
 
 @Component({
   selector: 'app-publication',
   standalone: true,
-  imports: [CommonModule, MatProgressSpinner, MatTooltip, RouterModule, MatIcon, MatTooltipModule],
   templateUrl: './publication.component.html',
-  styleUrl: './publication.component.scss'
+  styleUrl: './publication.component.scss',
+  imports: [
+    CommonModule,
+    MatIcon,
+    MatRippleModule,
+    MatProgressSpinner,
+    MatTooltipModule,
+    RouterModule
+  ]
 })
 export class PublicationComponent implements OnInit, OnDestroy {
   private readonly activatedRoute = inject(ActivatedRoute);

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

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

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

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

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

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

frontend/src/design_system/button.scss

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

frontend/src/design_system/form.scss

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

frontend/src/design_system/index.scss

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

frontend/src/locale/messages-fr.json

@@ -46,6 +46,7 @@
     "9122763438636464100": "Fermer le menu",
     "1902100407096396858": "Catégories",
     "6940115735259407353": "Une erreur est survenue lors du chargement des catégories.",
+    "3516191632292372377": "Vous ne pouvez pas accéder à cette page car vous êtes déjà connecté.",
     "3450287383703155559": "Vous n'êtes pas connecté. Veuillez vous connecter avant de réessayer.",
     "5455465794443528807": "You n'êtes pas connecté. Veuillez vous connecter avant de réessayer votre opération.",
     "4011987306265136481": "Déconnexion...",
@@ -59,6 +60,7 @@
     "2308975396733519902": "Créer un compte",
     "1037765878727976611": "Connexion réussie",
     "6034686865111167926": "Une erreur est survenue lors de la connexion.",
+    "5304730975301536612": "Veuillez renseigner tous les champs avant de valider.",
     "1041423751558601074": "Vos publications",
     "5463894166935799864": "Rédiger une nouvelle publication",
     "1519054954638405159": "Chargement de la liste de vos publications...",
@@ -89,4 +91,4 @@
     "3461230574295546047": "J'ai déjà un compte",
     "5052944271008222026": "Les mots de passe saisis sont différents."
   }
-}
+}

frontend/src/locale/messages.json

@@ -1,5 +1,5 @@
 {
-  "locale": "en-UK",
+  "locale": "en",
   "translations": {
     "3603720768157919481": " No ",
     "4861926948802653243": " Yes ",
@@ -46,6 +46,7 @@
     "9122763438636464100": "Close the menu",
     "1902100407096396858": "Categories",
     "6940115735259407353": "An error occured while loading categories.",
+    "3516191632292372377": "You can't access to this page because you are already authenticated.",
     "3450287383703155559": "You are unauthenticated. Please, log-in first.",
     "5455465794443528807": "You are unauthenticated. Please, re-authenticate before retrying your action.",
     "4011987306265136481": "Disconnection...",
@@ -59,6 +60,7 @@
     "2308975396733519902": "Create an account",
     "1037765878727976611": "Authentication succeeded!",
     "6034686865111167926": "Authentication failed.",
+    "5304730975301536612": "Please, fill the inputs before send.",
     "1041423751558601074": "Your publications",
     "5463894166935799864": "Add a new publication",
     "1519054954638405159": "Publication loading...",

frontend/src/styles.scss

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