Use signals ont publication creation and update pages.

frontend/src/app/app.config.ts

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

frontend/src/app/app.routes.ts

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,6 +1,5 @@
 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";
@@ -92,7 +91,6 @@ export const PROGRAMMING_LANGUAGES: ProgramingLanguage[] = [
         MatFormFieldModule,
         MatIcon,
         MatInputModule,
-        MatRippleModule,
         MatSelectModule,
         ReactiveFormsModule,
     ]

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

@@ -1,4 +1,4 @@
-<button type="button" class="close" (click)="closeDialog()" matRipple>
+<button type="button" class="close" (click)="closeDialog()">
     <mat-icon>close</mat-icon>
 </button>
 <header>
@@ -19,18 +19,10 @@
     }
 </div>
 <footer>
-    <button type="button"
+    <button type="button" class="secondary" matRipple (click)="closeDialog()" i18n>
-            (click)="closeDialog()"
-            class="cod-btn secondary"
-            matRipple
-            i18n>
         Cancel
     </button>
-    <button type="button"
+    <button type="button" (click)="fileUpload.click()" matRipple i18n>
-            (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.ts

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

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

@@ -102,11 +102,6 @@
 
         button {
             padding: 0;
-            border-radius: 10em;
-            border: none;
-            background-color: #3f51b5;
-            color: white;
-            transition: background-color .2s ease-in-out;
             display: flex;
             justify-content: center;
             align-items: center;
@@ -114,16 +109,35 @@
             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 {
+button, a.button {
-                background-color: #5b6ed8;
+    padding: .8em 1.2em;
-                cursor: pointer;
+    border-radius: 10em;
-            }
+    border: none;
-        
+    background-color: #3f51b5;
-            &:disabled {
+    color: white;
-                background-color: #5f6aa6;
+    transition: background-color .2s ease-in-out;
-                cursor: not-allowed;
+
-            }
+    &: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;
         }
     }
 }

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

@@ -15,7 +15,6 @@ 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',
@@ -27,7 +26,6 @@ import { MatRippleModule } from "@angular/material/core";
         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()" matRipple>
+    <button type="submit" (click)="searchPublications()">
         <mat-icon>search</mat-icon>
     </button>
 </form>

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

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

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

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

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

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

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

@@ -1,32 +1,33 @@
 import { CommonModule } from "@angular/common";
-import { Component, EventEmitter, inject, OnInit, Output } from "@angular/core";
+import { Component, EventEmitter, inject, OnDestroy, OnInit, Output, signal } from "@angular/core";
 import { MatIconModule } from "@angular/material/icon";
 import { DisplayableCategory, SideMenuService } from "../side-menu.service";
-import { Observable } from "rxjs";
+import { Observable, Subscription } from "rxjs";
 import { RouterModule } from "@angular/router";
+import { Category } from "../../../core/rest-services/category/model/category";
 
 @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 {
+export class CategoriesMenuComponent implements OnInit, OnDestroy {
-  private sideMenuService = inject(SideMenuService);
   @Output()
   categoryClicked = new EventEmitter<void>();
+  private sideMenuService = inject(SideMenuService);
+  private categoriesSubscription?: Subscription;
+  categories = signal<DisplayableCategory[]>([]);
 
   ngOnInit(): void {
+    this.categoriesSubscription = this.sideMenuService.categories$
+      .subscribe(categories => this.categories.set(categories));
     this.sideMenuService.loadCategories();
   }
 
-  get categories$(): Observable<DisplayableCategory[]> {
+  ngOnDestroy(): void {
-    return this.sideMenuService.categories$;
+    this.categoriesSubscription?.unsubscribe();
   }
 
   setOpenned(category: DisplayableCategory): void {

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

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

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

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

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

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

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

@@ -1,18 +1,14 @@
 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

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

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

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

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

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

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

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

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

@@ -1,5 +1,5 @@
 <h1 i18n>Last publications</h1>
-@if ((isLoading$ | async) === true) {
+@if (isLoading()) {
     <h2 i18n>Publications loading...</h2>
     <mat-spinner></mat-spinner>
 } @else {

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

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

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

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

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

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

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

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

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

@@ -60,24 +60,18 @@ export class LoginService {
   performLogin(): void {
     const state = this.state;
 
-    if (this.isStateValid(state)) {
+    // Check state is valid
-      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 });
-    }
-  }
 
-  isStateValid(state: LoginState): boolean {
+    this.userRestService
-    return !!state.request.email?.trim().length && !!state.request.password?.length;
+      .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 });
+      });
   }
 }

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

@@ -8,11 +8,11 @@
     +
 </a>
 
-@if ((isLoading$ | async) === true) {
+@if (isLoading()) {
     <h2 i18n>Publication loading...</h2>
     <mat-spinner></mat-spinner>
 } @else {
-    @if ((isLoaded$ | async) === true) {
+    @if (isLoaded()) {
         <app-publication-list [publications$]="publications$"></app-publication-list>
     } @else {
         <h2 i18n>There is no any publication...</h2>

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

@@ -1,14 +1,13 @@
-import { Component, inject, OnInit } from "@angular/core";
+import { Component, inject, OnDestroy, OnInit, signal } from "@angular/core";
 import { MatProgressSpinnerModule } from "@angular/material/progress-spinner";
 import { MyPublicationsService } from "./my-publications.service";
-import { Observable } from "rxjs";
+import { Observable, Subscription } from "rxjs";
 import { PublicationListComponent } from "../../components/publication-list/publication-list.component";
 import { Publication } from "../../core/rest-services/publications/model/publication";
 import { CommonModule } from "@angular/common";
 import { RouterModule } from "@angular/router";
 import { MatTooltipModule } from "@angular/material/tooltip";
 
-
 @Component({
     selector: 'app-my-component',
     standalone: true,
@@ -23,22 +22,28 @@ import { MatTooltipModule } from "@angular/material/tooltip";
     ],
     providers: [MyPublicationsService]
 })
-export class MyPublicationsComponent implements OnInit {
+export class MyPublicationsComponent implements OnInit, OnDestroy {
     private readonly myPublicationsService = inject(MyPublicationsService);
+    private isLoadingSubscription?: Subscription;
+    private isLoadedSubscription?: Subscription;
+
+    isLoading = signal(false);
+    isLoaded = signal(false);
 
     get publications$(): Observable<Publication[]> {
         return this.myPublicationsService.publications$;
     }
 
-    get isLoading$(): Observable<boolean> {
-        return this.myPublicationsService.isLoading$;
-    }
-
-    get isLoaded$(): Observable<boolean> {
-        return this.myPublicationsService.isLoaded$;
-    }
-
     ngOnInit(): void {
+        this.isLoadingSubscription = this.myPublicationsService.isLoading$
+            .subscribe(isLoading => this.isLoading.set(isLoading));
+        this.isLoadedSubscription = this.myPublicationsService.isLoaded$
+            .subscribe(isLoaded => this.isLoaded.set(isLoaded));
         this.myPublicationsService.loadAuthenticatedUserPublications();    
     }
+
+    ngOnDestroy(): void {
+        this.isLoadingSubscription?.unsubscribe();
+        this.isLoadedSubscription?.unsubscribe();
+    }
 }

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

@@ -1,7 +1,9 @@
-<app-publication-edition
+@if (publicationIsNotNull()) {
-    title="Creation of a new publication"
+    <app-publication-edition
-    [publication]="publication" 
+        title="Creation of a new publication"
-    [isSaving$]="isSaving$"
+        [publication]="publication()!!"
-    (publicationSave)="onPublicationSave($event)"
+        [isSaving$]="isSaving$"
-    i18n-title>
+        (publicationSave)="onPublicationSave($event)"
-</app-publication-edition>
+        i18n-title>
+    </app-publication-edition>
+}

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

@@ -1,4 +1,4 @@
-import { Component, inject, OnInit } from "@angular/core";
+import { Component, computed, inject, OnInit, signal } from "@angular/core";
 import { PublicationEditionComponent } from "../../components/publication-edition/publication-edition.component";
 import { PublicationRestService } from "../../core/rest-services/publications/publication.rest-service";
 import { ActivatedRoute, Router } from "@angular/router";
@@ -26,7 +26,8 @@ export class PublicationCreationComponent implements OnInit {
     private readonly snackBar = inject(MatSnackBar);
     private isSavingSubject = new BehaviorSubject<boolean>(false);
     private subscriptions: Subscription[] = [];
-    publication!: Publication;
+    publication = signal<Publication | undefined>(undefined);
+    publicationIsNotNull = computed(() => !!this.publication());
 
     get isSaving$(): Observable<boolean> {
         return this.isSavingSubject.asObservable();
@@ -40,7 +41,7 @@ export class PublicationCreationComponent implements OnInit {
                 name: authenticatedUser.pseudo,
                 image: authenticatedUser.photoId ?? ''
             };
-            this.publication = {
+            const newPublication: Publication = {
                 id: '',
                 key: '',
                 title: '',
@@ -52,6 +53,7 @@ export class PublicationCreationComponent implements OnInit {
                 categoryId: '',
                 author
             };
+            this.publication.set(newPublication);
         }
     }
 

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

@@ -1,4 +1,4 @@
-@if ((isLoading$ | async) == true) {
+@if (isLoading()) {
     <h2 i18n>Loading publication to edit...</h2>
     <mat-spinner></mat-spinner>
 } 

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

@@ -1,5 +1,5 @@
 import { CommonModule, Location } from '@angular/common';
-import { Component, inject, OnDestroy, OnInit } from '@angular/core';
+import { Component, inject, OnDestroy, OnInit, signal } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatIconModule } from '@angular/material/icon';
@@ -41,21 +41,17 @@ export class PublicationUpdateComponent implements OnInit, OnDestroy {
   private readonly location = inject(Location);
   private readonly router = inject(Router);
   private readonly snackBar = inject(MatSnackBar);
-  private isLoadingSubject = new BehaviorSubject<boolean>(false);
   private isSavingSubject = new BehaviorSubject<boolean>(false);
   private subscriptions: Subscription[] = [];
+  isLoading = signal(false);
   publication: Publication | undefined;
 
-  get isLoading$(): Observable<boolean> {
-    return this.isLoadingSubject.asObservable();
-  }
-
   get isSaving$(): Observable<boolean> {
     return this.isSavingSubject.asObservable();
   }
 
   ngOnInit(): void {
-    this.isLoadingSubject.next(true);
+    this.isLoading.set(true);
     this.activatedRoute.paramMap.subscribe(params => {
         const publicationId = params.get('publicationId');
         if (publicationId == undefined) {
@@ -71,7 +67,7 @@ export class PublicationUpdateComponent implements OnInit, OnDestroy {
                 this.snackBar.open(errorMessage, $localize`Close`, { duration: 5000 });
                 console.error(errorMessage, error)
             })
-            .finally(() => this.isLoadingSubject.next(false));
+            .finally(() => this.isLoading.set(false));
         }
       });
   }

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

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

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

@@ -2,7 +2,8 @@ $cardBorderRadius: .5em;
 
 :host {
     display: flex;
-    justify-content: center;
+    flex-direction: column;
+    align-items: center;
 
     .card {
         display: flex;

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

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

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

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

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

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

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

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

frontend/src/design_system/button.scss

@@ -1,26 +0,0 @@
-button.cod-btn, a.cod-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;
-    }
-
-    &.secondary {
-        color: #3f51b5;
-        background-color: white;
-    
-        &:hover {
-            background-color: #f2f4ff;
-        }
-    }
-}
-
-a.cod-button {
-    text-decoration: none;
-}

frontend/src/design_system/form.scss

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

frontend/src/design_system/index.scss

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

frontend/src/locale/messages-fr.json

@@ -46,7 +46,6 @@
     "9122763438636464100": "Fermer le menu",
     "1902100407096396858": "Catégories",
     "6940115735259407353": "Une erreur est survenue lors du chargement des catégories.",
-    "3516191632292372377": "Vous ne pouvez pas accéder à cette page car vous êtes déjà connecté.",
     "3450287383703155559": "Vous n'êtes pas connecté. Veuillez vous connecter avant de réessayer.",
     "5455465794443528807": "You n'êtes pas connecté. Veuillez vous connecter avant de réessayer votre opération.",
     "4011987306265136481": "Déconnexion...",
@@ -60,7 +59,6 @@
     "2308975396733519902": "Créer un compte",
     "1037765878727976611": "Connexion réussie",
     "6034686865111167926": "Une erreur est survenue lors de la connexion.",
-    "5304730975301536612": "Veuillez renseigner tous les champs avant de valider.",
     "1041423751558601074": "Vos publications",
     "5463894166935799864": "Rédiger une nouvelle publication",
     "1519054954638405159": "Chargement de la liste de vos publications...",
@@ -91,4 +89,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",
+  "locale": "en-UK",
   "translations": {
     "3603720768157919481": " No ",
     "4861926948802653243": " Yes ",
@@ -46,7 +46,6 @@
     "9122763438636464100": "Close the menu",
     "1902100407096396858": "Categories",
     "6940115735259407353": "An error occured while loading categories.",
-    "3516191632292372377": "You can't access to this page because you are already authenticated.",
     "3450287383703155559": "You are unauthenticated. Please, log-in first.",
     "5455465794443528807": "You are unauthenticated. Please, re-authenticate before retrying your action.",
     "4011987306265136481": "Disconnection...",
@@ -60,7 +59,6 @@
     "2308975396733519902": "Create an account",
     "1037765878727976611": "Authentication succeeded!",
     "6034686865111167926": "Authentication failed.",
-    "5304730975301536612": "Please, fill the inputs before send.",
     "1041423751558601074": "Your publications",
     "5463894166935799864": "Add a new publication",
     "1519054954638405159": "Publication loading...",

frontend/src/styles.scss

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