Re-design of login page.

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

@@ -0,0 +1,29 @@
+<ng-container *ngIf="isLoading; else afterLoadingPart">
+    <mat-spinner></mat-spinner>
+</ng-container>
+
+<ng-template #afterLoadingPart>
+    <ng-container *ngIf="publication; else loadingFailedMessage">
+        <div class="card">
+            <img src="/pictures/{{ publication.illustrationId }}" />
+            <header>
+                <h1>{{ publication.title }}</h1>
+                <h2>{{ publication.description }}</h2>
+            </header>
+            <main [innerHTML]="publication.parsedText"></main>
+            <footer>
+                <img src="/pictures/{{ publication.author.image }}" [matTooltip]="publication.author.name" />
+                Publication posted by {{ publication.author.name }}
+                <span class="publication-date">
+                    ({{ publication.creationDate | date: 'short' : 'fr-FR' }})
+                </span>
+            </footer>
+        </div>
+    </ng-container>
+
+    <ng-template #loadingFailedMessage>
+        <div class="loading-failed">
+            <h1>Publication failed to load...</h1>
+        </div>
+    </ng-template>
+</ng-template>

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

@@ -0,0 +1,66 @@
+$cardBorderRadius: .5em;
+
+:host {
+    display: flex;
+    justify-content: center;
+
+    .card {
+        display: flex;
+        flex-direction: column;
+        margin: 1em;
+        max-width: 80em;
+        border-radius: .5em;    
+        box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
+
+        img {
+            height: 25em;
+            object-fit: cover;
+            border-radius: $cardBorderRadius $cardBorderRadius 0 0;
+        }
+
+        header {
+            padding: 2em;
+
+            h1 {
+                font-size: 2em;
+                margin-bottom: .5em;
+            }
+
+            h2 {
+                font-size: 1.2em;
+                line-height: 1.6em;
+                margin: 0;
+                font-weight: 400;
+            }
+        }
+
+        main {
+            border-top: 1px solid #dddddd;
+            margin: 0 2em 2em 2em;
+            padding-top: 2em;
+        }
+
+        footer {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            background-color: #f0f0f0;
+            border-radius: 0 0 $cardBorderRadius $cardBorderRadius;
+            padding: 1em 2em;
+            gap: 1em;
+
+            img {
+                $imageSize: 4em;
+                border-radius: 10em;
+                width: $imageSize;
+                height: $imageSize;
+                object-fit: cover;
+            }
+
+            .publication-date {
+                font-style: italic;
+                color: #bdbdbd;
+            }
+        }
+    }
+}

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

@@ -0,0 +1,55 @@
+import { Component, OnDestroy, OnInit, inject } from '@angular/core';
+import { PublicationRestService } from '../../core/rest-services/publications/publication.rest-service';
+import { ActivatedRoute } 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 } from '@angular/common';
+import { MatProgressSpinner } from '@angular/material/progress-spinner';
+import { MatTooltip } from '@angular/material/tooltip';
+
+@Component({
+  selector: 'app-publication',
+  standalone: true,
+  imports: [CommonModule, MatProgressSpinner, MatTooltip],
+  templateUrl: './publication.component.html',
+  styleUrl: './publication.component.scss'
+})
+export class PublicationComponent implements OnInit, OnDestroy {
+  private activatedRoute = inject(ActivatedRoute);
+  private publicationRestService = inject(PublicationRestService);
+  private paramMapSubscription?: Subscription;
+  private snackBar = inject(MatSnackBar);
+  isLoading: boolean = false;
+  publication?: Publication;
+
+  ngOnInit(): void {
+    this.paramMapSubscription = this.activatedRoute
+        .paramMap
+        .subscribe(params => {
+          const publicationId = params.get('publicationId');
+
+          if (publicationId) {
+            this.isLoading = true;
+
+            this.publicationRestService.getById(publicationId)
+                .then(publication => {
+                  this.publication = publication;
+                })
+                .catch(error => {
+                  this.snackBar.open('An error occurred while loading publication...', 'Close', { duration: 5000 });
+                  console.error('An error occurred while loading publication...', error);
+                })
+                .finally(() => {
+                  this.isLoading = false;
+                });
+          }
+        });
+
+    // this.publicationRestService.getById()
+  }
+
+  ngOnDestroy(): void {
+    this.paramMapSubscription?.unsubscribe();
+  }
+}