jigrogerglbzefjkzeygfeu

src/app/app.component.html

@@ -1 +1,2 @@
 <router-outlet></router-outlet>
+<p-toast></p-toast>

src/app/app.component.ts

@@ -1,19 +1,22 @@
 import {Component} from '@angular/core';
 import {MenubarModule} from 'primeng/menubar';
-import {MenuItem} from 'primeng/api';
+import {MenuItem, MessageService} from 'primeng/api';
 import {FloatLabelModule} from 'primeng/floatlabel';
 import {CookieService} from 'ngx-cookie-service';
+import {ToastModule} from 'primeng/toast';
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [MenubarModule, FloatLabelModule],
+  imports: [MenubarModule, FloatLabelModule, ToastModule],
+  providers: [
+    MessageService,
+  ],
   templateUrl: './app.component.html',
   styleUrl: './app.component.css'
 })
 export class AppComponent{
-  items: MenuItem[] = []
 
-  constructor(private cookieService: CookieService) {
+  constructor() {
   }
 }

src/app/app.routes.ts

@@ -3,10 +3,15 @@ import {LoginComponent} from './login/login.component';
 import {HomeComponent} from './home/home.component';
 import {RegisterComponent} from './register/register.component';
 import {LogoutComponent} from './logout/logout.component';
+import {NotFoundComponent} from './not-found/not-found.component';
+import {authGuard} from './auth.guard';
+import {ProfileComponent} from './profile/profile.component';
 
 export const routes: Routes = [
   {path: '', component: HomeComponent},
-  {path: 'login', component: LoginComponent},
+  {path: 'login', component: LoginComponent, canActivate: [authGuard]},
-  {path: 'register', component: RegisterComponent},
+  {path: 'register', component: RegisterComponent, canActivate: [authGuard]},
-  {path: 'logout', component: LogoutComponent}
+  {path: 'logout', component: LogoutComponent},
+  {path: 'profile/:authorId', component: ProfileComponent},
+  {path: '**', component: NotFoundComponent}
 ];

src/app/auth.guard.ts

@@ -0,0 +1,13 @@
+import {CanActivateFn, Router} from '@angular/router';
+import {inject} from '@angular/core';
+import {CookieService} from 'ngx-cookie-service';
+
+export const authGuard: CanActivateFn = (route, state) => {
+  const router = inject(Router);
+  const cookieService = inject(CookieService);
+  if (cookieService.get("author") !== '') {
+    router.navigate(['/']);
+  }
+
+  return true;
+};

src/app/header/header.component.html

@@ -1,2 +1,2 @@
 <img src="assets/banner.png" height="494" width="1494"/>
-<p-menubar [model]="items" />
+<p-menubar [model]="items"></p-menubar>

src/app/header/header.component.ts

@@ -1,38 +1,64 @@
-import { Component } from '@angular/core';
+import {Component} from '@angular/core';
 import {CookieService} from 'ngx-cookie-service';
 import {MenuItem} from 'primeng/api';
 import {MenubarModule} from 'primeng/menubar';
-import {RouterOutlet} from '@angular/router';
+import {ToastModule} from 'primeng/toast';
+import {Author} from '../model/author';
 
 @Component({
   selector: 'app-header',
   standalone: true,
   imports: [
     MenubarModule,
-    RouterOutlet
+    ToastModule
   ],
   templateUrl: './header.component.html',
   styleUrl: './header.component.css'
 })
 export class HeaderComponent {
+  actualAuthor: Author | undefined;
   items: MenuItem[] = [];
+
   constructor(private cookieService: CookieService) {
     if (this.cookieService.get('author')) {
+      this.actualAuthor = JSON.parse(this.cookieService.get('author'));
       this.items = [
         {
           label: 'Accueil',
           icon: 'pi pi-home',
           routerLink: '/'
         },
+        {
+          label: 'Mes posts',
+          icon: 'pi pi-file-edit',
+          items: [
+            {
+              label: 'Ajouter un post',
+              icon: 'pi pi-plus',
+              routerLink: 'new-post'
+            },
+            {
+              label: 'Voir mes posts',
+              icon: 'pi pi-eye',
+              routerLink: ['posts', `${this.actualAuthor?.id}`]
+            }
+          ]
+        },
+        {
+          label: `${this.actualAuthor?.name.toUpperCase()}`,
+          icon: 'pi pi-user',
+          items: [
+            {
+              label: 'Voir mon profil',
+              icon: 'pi pi-user',
+              routerLink: [`/profile`, `${this.actualAuthor?.id}`]
+            },
             {
               label: 'Se déconnecter',
               icon: 'pi pi-sign-out',
               routerLink: '/logout'
-        },
+            }
-        {
+          ]
-          label: 'Mon profil',
-          icon: 'pi pi-user',
-          routerLink: '/me'
         }
       ];
     } else {
@@ -42,6 +68,10 @@ export class HeaderComponent {
           icon: 'pi pi-home',
           routerLink: '/'
         },
+        {
+          label: "S'authentifier",
+          icon: 'pi pi-sign-in',
+          items: [
             {
               label: 'Se connecter',
               icon: 'pi pi-sign-in',
@@ -52,6 +82,8 @@ export class HeaderComponent {
               icon: 'pi pi-user-plus',
               routerLink: '/register'
             }
+          ]
+        }
       ];
     }
   }

src/app/home/home.component.html

@@ -1,5 +1,4 @@
 <app-header></app-header>
-<p-toast></p-toast>
 <div class="main-content">
   <article>
     <img class="blog-img" src="data:image/jpeg;base64,image " alt="article image">
@@ -10,7 +9,7 @@
       beaucoup d'aspects du manga comme la mémoire humaine, la spontanéité des uns qui vient en opposition avec
       l'hypocrisie des autres et plein d'autres thèmes ! Disclaimer : Tout comme mon post sur
       "Persona 3 Reload - Episode Aigis", je spoil l'intégralité de l'oeuvre.</p>
-    <p-button label="Lire la suite"/>
+    <p-button (click)="successMessage('salut', 'grgtr')" label="Lire la suite"/>
     <div>
       <p-avatar label="G" shape="circle" styleClass="mr-2" size="large"/>
       <em>Guams</em>

src/app/home/home.component.ts

@@ -1,12 +1,11 @@
 import {Component, OnDestroy} from '@angular/core';
 import {AvatarModule} from 'primeng/avatar';
-import {Button, ButtonDirective} from 'primeng/button';
+import {Button} from 'primeng/button';
 import {AuthorService} from '../services/author.service';
 import {Author} from '../model/author';
 import {JsonPipe} from '@angular/common';
 import {Subscription} from 'rxjs';
-import {PostService} from '../services/post.service';
+import {MessageService} from 'primeng/api';
-import {Header, MessageService} from 'primeng/api';
 import {HeaderComponent} from '../header/header.component';
 import {ToastModule} from 'primeng/toast';
 import {CookieService} from 'ngx-cookie-service';
@@ -21,9 +20,6 @@ import {CookieService} from 'ngx-cookie-service';
     ToastModule,
     JsonPipe
   ],
-  providers: [
-    MessageService,
-  ],
   templateUrl: './home.component.html',
   styleUrl: './home.component.css'
 })
@@ -34,17 +30,13 @@ export class HomeComponent implements OnDestroy {
 
   constructor(
     private authorService: AuthorService,
-    private postService: PostService,
     private messageService: MessageService,
     private cookieService: CookieService) {
 
     if (this.cookieService.get('author')) {
       this.actualAuthor = JSON.parse(this.cookieService.get('author'));
-      if (this.cookieService.get("just-authenticated")) {
-        this.successMessage('Connecté avec succès', `Heureux de vous revoir ${this.actualAuthor?.name}`);
     }
-    }
+    this.subs.push(this.authorService.list()
-    this.subs.push(authorService.list()
       .subscribe({
         next: (authors: Author[]) => this.authors = authors,
         error: (err) => console.error(err.message),
@@ -56,7 +48,7 @@ export class HomeComponent implements OnDestroy {
       severity: 'success',
       summary: summary,
       detail: detail,
-      life: 1500,
+      life: 3000,
       closable: false
     });
   }

src/app/login/login.component.html

@@ -1,4 +1,3 @@
-<p-toast></p-toast>
 <app-header></app-header>
 <label for="username">Nom d'utilisateur</label>
 <input id="username" placeholder="Jean Zay" pInputText [(ngModel)]="name"/>

src/app/login/login.component.ts

@@ -1,4 +1,4 @@
-import {Component, CUSTOM_ELEMENTS_SCHEMA, OnDestroy} from '@angular/core';
+import {ChangeDetectorRef, Component, CUSTOM_ELEMENTS_SCHEMA, OnDestroy} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {InputTextModule} from 'primeng/inputtext';
 import {Button} from 'primeng/button';
@@ -24,10 +24,7 @@ import {Router} from '@angular/router';
     HeaderComponent
   ],
   templateUrl: './login.component.html',
-  styleUrl: './login.component.css',
+  styleUrl: './login.component.css'
-  providers: [
-    MessageService,
-  ]
 })
 export class LoginComponent implements OnDestroy {
   name: string = "";
@@ -46,13 +43,18 @@ export class LoginComponent implements OnDestroy {
       this.subs.push
       (
         this.authorService.login(this.name, this.password).pipe(
-          switchMap((tokenObj: any) => this.authorService.me(tokenObj.token)))
+          switchMap((tokenObj: any) => {
+            this.cookieService.set("token", tokenObj.token);
+            return this.authorService.me(tokenObj.token)
+          }))
           .subscribe({
             next: (author: Author) => {
               this.cookieService.set("author", JSON.stringify(author));
               this.cookieService.set("just-authenticated", "true");
               this.getAuthorCookie();
-              this.router.navigate(['/']);
+              this.router.navigate(['/']).then(() => {
+                this.successMessage('Connecté avec succès', 'Heureux de vous revoir ' + this.actualAuthor?.name)
+              });
             },
             error: (err) => this.failureMessage('Erreur de connexion', err.message)
           })
@@ -67,12 +69,22 @@ export class LoginComponent implements OnDestroy {
     this.actualAuthor = JSON.parse(this.cookieService.get("author"));
   }
 
+  successMessage(summary: string, detail: string): void {
+    this.messageService.add({
+      severity: 'success',
+      summary: summary,
+      detail: detail,
+      life: 3000,
+      closable: false
+    });
+  }
+
   failureMessage(summary: string, detail: string): void {
     this.messageService.add({
       severity: 'error',
       summary: summary,
       detail: detail,
-      life: 1500,
+      life: 3000,
       closable: false
     });
   }

src/app/logout/logout.component.ts

@@ -2,6 +2,7 @@ import {Component, OnInit} from '@angular/core';
 import {CookieService} from 'ngx-cookie-service';
 import {HeaderComponent} from '../header/header.component';
 import {Router} from '@angular/router';
+import {MessageService} from 'primeng/api';
 
 @Component({
   selector: 'app-logout',
@@ -15,10 +16,21 @@ import {Router} from '@angular/router';
 export class LogoutComponent implements OnInit{
 
   constructor(private cookiesService: CookieService,
+              private messageService: MessageService,
               private router: Router) { }
   ngOnInit(): void {
     this.cookiesService.deleteAll();
-    this.router.navigate(['/']);
+    this.router.navigate(['/']).then(() => this.successMessage('Déconnexion', 'Vous avez été deconnecté avec succès'));
+  }
+
+  successMessage(summary: string, detail: string): void {
+    this.messageService.add({
+      severity: 'success',
+      summary: summary,
+      detail: detail,
+      life: 3000,
+      closable: false
+    });
   }
 
 }

src/app/not-found/not-found.component.html

@@ -0,0 +1,3 @@
+<h1>Erreur 404</h1>
+<h2>Il semblerait que vous vous soyez trompé !</h2>
+<a routerLink="/">Revenir à la page d'accueil</a>

src/app/not-found/not-found.component.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import {RouterLink} from '@angular/router';
+
+@Component({
+  selector: 'app-not-found',
+  standalone: true,
+  imports: [
+    RouterLink
+  ],
+  templateUrl: './not-found.component.html',
+  styleUrl: './not-found.component.css'
+})
+export class NotFoundComponent {
+
+}

src/app/profile/profile.component.html

@@ -0,0 +1,14 @@
+<app-header></app-header>
+{{ concernedAuthor | json }}
+
+
+<p-card header='Profil de {{ concernedAuthor?.name }}' subheader="role : {{ concernedAuthor?.role }}">
+  <p class="m-0">
+    <p-avatar image="https://primefaces.org/cdn/primeng/images/demo/avatar/amyelsner.png" class="mr-2" size="xlarge" shape="circle" />
+    <p-button label="Voir les posts de l'utilisateur"></p-button>
+    @if (concernedAuthor?.id === actualAuthor?.id) {
+      <p-button label="Mettre à jour les données du profil"/>
+      <p-button label="Changer le mot de passe"/>
+    }
+  </p>
+</p-card>

src/app/profile/profile.component.ts

@@ -0,0 +1,47 @@
+import {Component, OnDestroy} from '@angular/core';
+import {HeaderComponent} from '../header/header.component';
+import {ActivatedRoute, Router} from '@angular/router';
+import {CookieService} from 'ngx-cookie-service';
+import {Author} from '../model/author';
+import {Subscription} from 'rxjs';
+import {AuthorService} from '../services/author.service';
+import {JsonPipe} from '@angular/common';
+import {AvatarModule} from 'primeng/avatar';
+import {CardModule} from 'primeng/card';
+import {Button} from 'primeng/button';
+
+@Component({
+  selector: 'app-profile',
+  standalone: true,
+  imports: [
+    HeaderComponent,
+    JsonPipe,
+    AvatarModule,
+    CardModule,
+    Button
+  ],
+  templateUrl: './profile.component.html',
+  styleUrl: './profile.component.css'
+})
+export class ProfileComponent implements OnDestroy{
+  actualAuthor: Author | undefined;
+  concernedAuthor: Author | undefined;
+  subs: Subscription[] = [];
+  constructor(private route: ActivatedRoute,
+              private authorService: AuthorService,
+              private cookieService: CookieService) {
+    this.route.paramMap.subscribe(params => {
+      this.subs.push(this.authorService.getAuthor(params.get('authorId')).subscribe(author => {
+        this.concernedAuthor = author;
+      }));
+    })
+    if (this.cookieService.get('author')) {
+      this.actualAuthor = JSON.parse(this.cookieService.get("author"));
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.subs.forEach(sub => sub.unsubscribe());
+  }
+
+}

src/app/services/author.service.ts

@@ -20,7 +20,14 @@ export class AuthorService {
 
   me(token: string): Observable<Author> {
     const headers = new HttpHeaders().set("Authorization", "Bearer " + token);
-    console.log(headers)
     return this.httpClient.get<Author>("http://localhost:8080/api/authors/me", {'headers': headers});
   }
+
+  getAuthor(id: string | null): Observable<Author> {
+    if (id) {
+      return this.httpClient.get<Author>("http://localhost:8080/api/authors/" + id);
+    } else {
+      throw new Error("Not Found");
+    }
+  }
 }