Fin section 17 : authentification

src/app/app-routing.module.ts

@@ -1,9 +1,11 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { LoginComponent } from './login/login.component';
 import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
 
 const routes: Routes = [
-  { path: '', redirectTo: 'pokemons', pathMatch: 'full' },
+  { path: '', redirectTo: 'login', pathMatch: 'full' },
+  { path: 'login', component: LoginComponent },
   { path: '**', component: PageNotFoundComponent },
 ];
 

src/app/app.module.ts

@@ -9,9 +9,10 @@ import { AppComponent } from './app.component';
 import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
 import { PokemonModule } from './pokemon/pokemon.module';
 import { InMemoryDataService } from './in-memory-data.service';
+import { LoginComponent } from './login/login.component';
 
 @NgModule({
-  declarations: [AppComponent, PageNotFoundComponent],
+  declarations: [AppComponent, PageNotFoundComponent, LoginComponent],
   imports: [
     BrowserModule,
     FormsModule,

src/app/auth.guard.ts

@@ -0,0 +1,17 @@
+import { Injectable } from '@angular/core';
+import { CanActivate, Router } from '@angular/router';
+import { AuthService } from './auth.service';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class AuthGuard implements CanActivate {
+  constructor(private authService: AuthService, private router: Router) {}
+  canActivate() {
+    if (this.authService.isLoggedIn) {
+      return true;
+    }
+    this.router.navigate(['/login']);
+    return false;
+  }
+}

src/app/auth.service.ts

@@ -0,0 +1,22 @@
+import { Injectable } from '@angular/core';
+import { delay, Observable, of, tap } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class AuthService {
+  isLoggedIn: boolean = false;
+  redirectUrl: string;
+
+  login(name: string, password: string): Observable<boolean> {
+    const isLoggedIn = name === 'pikachu' && password === 'pikachu';
+    return of(isLoggedIn).pipe(
+      delay(1000),
+      tap((isLoggedIn) => (this.isLoggedIn = isLoggedIn))
+    );
+  }
+
+  logout() {
+    this.isLoggedIn = false;
+  }
+}

src/app/login/login.component.html

@@ -0,0 +1,43 @@
+<div class="row">
+  <div class="col s12 m4 offset-m4">
+    <div class="card hoverable">
+      <div class="card-content center">
+        <span class="card-title">Page de connexion</span>
+        <p>
+          <em>{{ message }}</em>
+        </p>
+      </div>
+      <form #loginForm="ngForm">
+        <div>
+          <label for="name">Name</label>
+          <input
+            type="text"
+            id="name"
+            [(ngModel)]="name"
+            name="name"
+            required
+          />
+        </div>
+        <div>
+          <label for="password">Password</label>
+          <input
+            type="password"
+            id="password"
+            [(ngModel)]="password"
+            name="password"
+            required
+          />
+        </div>
+      </form>
+      <div class="card-action center">
+        <a
+          (click)="login()"
+          class="waves-effect waves-light btn"
+          *ngIf="!auth.isLoggedIn"
+          >Se connecter</a
+        >
+        <a (click)="logout()" *ngIf="auth.isLoggedIn">Se déconnecter</a>
+      </div>
+    </div>
+  </div>
+</div>

src/app/login/login.component.ts

@@ -0,0 +1,44 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { AuthService } from '../auth.service';
+
+@Component({
+  selector: 'app-login',
+  templateUrl: './login.component.html',
+})
+export class LoginComponent implements OnInit {
+  message: string = 'Vous êtes déconnecté. (pikachu/pikachu)';
+  name: string;
+  password: string;
+  auth: AuthService;
+
+  constructor(private authService: AuthService, private router: Router) {}
+
+  ngOnInit() {
+    this.auth = this.authService;
+  }
+
+  setMessage() {
+    if (this.auth.isLoggedIn) {
+      this.message = 'Vous êtes connecté.';
+    } else {
+      this.message = 'Identifiant ou mot de passe incorrect.';
+    }
+  }
+
+  login() {
+    this.message = 'Tentative de connexion en cours.';
+    this.auth.login(this.name, this.password).subscribe((isLoggedIn) => {
+      this.setMessage();
+      if (isLoggedIn) {
+        this.password = '';
+        this.router.navigate(['/pokemons']);
+      }
+    });
+  }
+
+  logout() {
+    this.auth.logout();
+    this.message = 'Vous êtes déconnecté.';
+  }
+}

src/app/pokemon/pokemon.module.ts

@@ -13,12 +13,29 @@ import { EditPokemonComponent } from './edit-pokemon/edit-pokemon.component';
 import { AddPokemonComponent } from './add-pokemon/add-pokemon.component';
 import { SearchPokemonComponent } from './search-pokemon/search-pokemon.component';
 import { LoaderComponent } from './loader/loader.component';
+import { AuthGuard } from '../auth.guard';
 
 const pokemonRoutes: Routes = [
-  { path: 'edit/pokemon/:id', component: EditPokemonComponent },
-  { path: 'pokemon/add', component: AddPokemonComponent },
-  { path: 'pokemon/:id', component: DetailPokemonComponent },
-  { path: 'pokemons', component: ListPokemonComponent },
+  {
+    path: 'edit/pokemon/:id',
+    component: EditPokemonComponent,
+    canActivate: [AuthGuard],
+  },
+  {
+    path: 'pokemon/add',
+    component: AddPokemonComponent,
+    canActivate: [AuthGuard],
+  },
+  {
+    path: 'pokemon/:id',
+    component: DetailPokemonComponent,
+    canActivate: [AuthGuard],
+  },
+  {
+    path: 'pokemons',
+    component: ListPokemonComponent,
+    canActivate: [AuthGuard],
+  },
 ];
 
 @NgModule({