@cerema/cadriciel 0.5.0

package/_template/{{project}}-ihm/src/app/shared/core/storage/MyStorageService.ts

@@ -0,0 +1,17 @@
+import {Injectable} from '@angular/core';
+import {OAuthStorage} from 'angular-oauth2-oidc';
+
+@Injectable()
+export class MyStorageService implements OAuthStorage {
+  getItem(key: string): string | null {
+    return sessionStorage.getItem(key);
+  }
+
+  removeItem(key: string): void {
+    sessionStorage.removeItem(key);
+  }
+
+  setItem(key: string, data: string): void {
+    sessionStorage.setItem(key, data);
+  }
+}

package/_template/{{project}}-ihm/src/app/shared/entities/claims.model.ts

@@ -0,0 +1,9 @@
+export interface Claims {
+  name: string;
+  preferred_username: string;
+  department: string;
+  given_name: string;
+  family_name: string;
+  email: string;
+  adminDisplayName: string;
+}

package/_template/{{project}}-ihm/src/app/shared/entities/user.model.ts

@@ -0,0 +1,9 @@
+export interface User {
+  email: string;
+  nom: string;
+  prenom: string;
+  id: number;
+  idDirectionCourante: number;
+  roleActifList: string[];
+  nbDirections: number;
+}

package/_template/{{project}}-ihm/src/app/shared/enums/roles.enums.ts

@@ -0,0 +1,6 @@
+export enum Roles {
+  Admin{{projectID}} = 'ADMIN_{{projectUpper}}',
+  AdminSi = 'ADMIN_SI',
+  Operateur = 'OPERATEUR',
+  Consultant = 'CONSULTANT',
+}

package/_template/{{project}}-ihm/src/app/shared/service/user.service.spec.ts

@@ -0,0 +1,64 @@
+import {TestBed} from '@angular/core/testing';
+
+import {UserService} from './user.service';
+import {HttpClientTestingModule, HttpTestingController} from '@angular/common/http/testing';
+import {User} from '../entities/user.model';
+import {Roles} from '../enums/roles.enums';
+import {mockedAdmin{{projectID}}List, mockedUser} from '../constants/mocks/user-mocks.constants';
+
+describe('UserService', () => {
+  let service: UserService;
+  let httpMock: HttpTestingController;
+  let resultat: User | null;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [HttpClientTestingModule],
+    });
+    service = TestBed.inject(UserService);
+    httpMock = TestBed.inject(HttpTestingController);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+
+  it('should get current user', () => {
+    const valeurAttendue: User = {
+      nbDirections: 0,
+      email: '',
+      id: 0,
+      idDirectionCourante: 0,
+      roleActifList: [],
+    };
+    service.getCurrentUser().subscribe(res => {
+      resultat = res.body;
+    });
+    const testRequete = httpMock.expectOne({ method: 'GET' });
+    testRequete.flush(valeurAttendue);
+    expect(resultat).toEqual(valeurAttendue);
+  });
+
+  it('should return true when calling userHasRole with Admin{{projectID}}', () => {
+    service.currentUser = mockedUser;
+    const resultat = service.userHasRole(Roles.Admin{{projectID}});
+    expect(resultat).toBeTrue();
+  });
+
+  it('should return false when calling userHasRole with Consultant', () => {
+    service.currentUser = mockedUser;
+    const resultat = service.userHasRole(Roles.Consultant);
+    expect(resultat).toBeFalse();
+  });
+
+  it('should return all {{project}} admin of the active direction', () => {
+    let result: User[] = [];
+    const valeurAttendue = mockedAdmin{{projectID}}List;
+    service.getAllAdmin{{projectID}}().subscribe(res => {
+      result = res;
+    });
+    const testRequete = httpMock.expectOne({ method: 'GET' });
+    testRequete.flush(valeurAttendue);
+    expect(result).toEqual(valeurAttendue);
+  });
+});

package/_template/{{project}}-ihm/src/app/shared/service/user.service.ts

@@ -0,0 +1,46 @@
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpResponse } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { User } from '../entities/user.model';
+import { Roles } from '../enums/roles.enums';
+import { ApplicationConfigService } from '../core/config/application-config.service';
+import { Claims } from "../entities/claims.model";
+
+@Injectable({
+  providedIn: 'root',
+})
+export class UserService {
+  get currentUser(): User {
+    return this._currentUser;
+  }
+
+  set currentUser(value: User) {
+    this._currentUser = value;
+  }
+
+  private _currentUser!: User;
+
+  constructor(private httpClient: HttpClient, private applicationConfigService: ApplicationConfigService) {}
+
+  getCurrentUser(): Observable<HttpResponse<User>> {
+    const url = '/user';
+    return this.httpClient.get<User>(this.applicationConfigService.getEndpointFor(url), { observe: 'response' });
+  }
+
+  userHasRole(...roles: Roles[]): boolean {
+    return roles.some(role => this.currentUser.roleActifList.indexOf(role) >= 0);
+  }
+
+  getAllAdmin{{projectID}}(): Observable<User[]> {
+    return this.httpClient.get<User[]>(this.applicationConfigService.getEndpointFor('/users/admin-{{project}}'));
+  }
+
+  getAllAdmin{{projectID}}WithoutAuthentication(): Observable<User[]> {
+    return this.httpClient.get<User[]>(this.applicationConfigService.getEndpointForApiOpen('/users/admin-{{project}}'));
+  }
+
+  addInfoFromClaims(identityClaims: Claims) {
+    this._currentUser.nom = identityClaims.family_name;
+    this._currentUser.prenom = identityClaims.given_name;
+  }
+}

package/_template/{{project}}-ihm/src/app/shared/shared.module.ts

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IndicComponent } from './components/indic/indic.component';
+
+@NgModule({
+  declarations: [
+    IndicComponent
+  ],
+  imports: [CommonModule],
+  exports: [
+    IndicComponent
+  ],
+})
+export class SharedModule {
+}

package/_template/{{project}}-ihm/src/app/{{project}}/components/auth/accessdenied/accessdenied-routing.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { AccessdeniedComponent } from './accessdenied.component';
+
+@NgModule({
+  imports: [RouterModule.forChild([
+    {path: '', component: AccessdeniedComponent}
+  ])],
+  exports: [RouterModule]
+})
+export class AccessdeniedRoutingModule {
+}

package/_template/{{project}}-ihm/src/app/{{project}}/components/auth/accessdenied/accessdenied.component.html

@@ -0,0 +1,11 @@
+<div class="surface-ground h-screen w-screen flex align-items-center justify-content-center">
+  <div class="surface-card py-7 px-5 sm:px-7 shadow-2 flex flex-column w-11 sm:w-30rem" style="border-radius:14px">
+    <h1 class="font-bold text-2xl mt-0 mb-2">ACCESS DENIED</h1>
+    <p class="text-color-secondary mb-4">You are not authorized to access this resource..</p>
+    <img src="../../../../../assets/{{project}}/images/auth/access-denied.svg" alt="access-denied"
+         class="mb-4 align-self-center">
+    <button [routerLink]="['/']" pButton pRipple label="Go to Dashboard"></button>
+  </div>
+</div>
+
+<app-config [minimal]="true"></app-config>

package/_template/{{project}}-ihm/src/app/{{project}}/components/auth/accessdenied/accessdenied.component.ts

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  templateUrl: './accessdenied.component.html'
+})
+export class AccessdeniedComponent {
+}

package/_template/{{project}}-ihm/src/app/{{project}}/components/auth/accessdenied/accessdenied.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AccessdeniedRoutingModule } from './accessdenied-routing.module';
+import { AccessdeniedComponent } from './accessdenied.component'
+import { ButtonModule } from 'primeng/button';
+import { AppConfigModule } from 'src/app/layout/config/config.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    AccessdeniedRoutingModule,
+    ButtonModule,
+    AppConfigModule
+  ],
+  declarations: [AccessdeniedComponent]
+})
+export class AccessdeniedModule {
+}

package/_template/{{project}}-ihm/src/app/{{project}}/components/auth/auth-routing.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+@NgModule({
+  imports: [RouterModule.forChild([
+    {path: 'error', loadChildren: () => import('./error/error.module').then(m => m.ErrorModule)},
+    {path: 'access', loadChildren: () => import('./accessdenied/accessdenied.module').then(m => m.AccessdeniedModule)},
+    {path: 'login', loadChildren: () => import('./login/login.module').then(m => m.LoginModule)},
+    {path: '**', redirectTo: '/notfound'}
+  ])],
+  exports: [RouterModule]
+})
+export class AuthRoutingModule {
+}

package/_template/{{project}}-ihm/src/app/{{project}}/components/auth/auth.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AuthRoutingModule } from './auth-routing.module';
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule,
+    AuthRoutingModule
+  ]
+})
+export class AuthModule {
+}

package/_template/{{project}}-ihm/src/app/{{project}}/components/auth/error/error-routing.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { ErrorComponent } from './error.component';
+
+@NgModule({
+  imports: [RouterModule.forChild([
+    {path: '', component: ErrorComponent}
+  ])],
+  exports: [RouterModule]
+})
+export class ErrorRoutingModule {
+}

package/_template/{{project}}-ihm/src/app/{{project}}/components/auth/error/error.component.html

@@ -0,0 +1,10 @@
+<div class="surface-ground h-screen w-screen flex align-items-center justify-content-center">
+  <div class="surface-card py-7 px-5 sm:px-7 shadow-2 flex flex-column w-11 sm:w-30rem" style="border-radius:14px">
+    <h1 class="font-bold text-2xl mt-0 mb-2">ERROR</h1>
+    <p class="text-color-secondary mb-4">Unexpected error happened. Resource is not available.</p>
+    <img src="../../../../../assets/{{project}}/images/auth/error.svg" alt="error" class="mb-4 align-self-center">
+    <button [routerLink]="['/']" pButton pRipple label="Go to Dashboard"></button>
+  </div>
+</div>
+
+<app-config [minimal]="true"></app-config>

package/_template/{{project}}-ihm/src/app/{{project}}/components/auth/error/error.component.ts

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  templateUrl: './error.component.html'
+})
+export class ErrorComponent {
+}

package/_template/{{project}}-ihm/src/app/{{project}}/components/auth/error/error.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ErrorRoutingModule } from './error-routing.module';
+import { ErrorComponent } from './error.component';
+import { ButtonModule } from 'primeng/button';
+import { AppConfigModule } from 'src/app/layout/config/config.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    ErrorRoutingModule,
+    ButtonModule,
+    AppConfigModule
+  ],
+  declarations: [ErrorComponent]
+})
+export class ErrorModule {
+}

package/_template/{{project}}-ihm/src/app/{{project}}/components/auth/login/login-routing.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { LoginComponent } from './login.component';
+
+@NgModule({
+  imports: [RouterModule.forChild([
+    {path: '', component: LoginComponent}
+  ])],
+  exports: [RouterModule]
+})
+export class LoginRoutingModule {
+}

package/_template/{{project}}-ihm/src/app/{{project}}/components/auth/login/login.component.html

@@ -0,0 +1,15 @@
+<div class="flex h-screen w-screen align-items-center justify-content-center">
+  <div *ngIf="!canNavigate" class="card">
+    <h5>Votre utilisateur n'a pas de droit dans l'application. Veuillez contacter l'administrateur.</h5>
+    <div class="flex justify-content-center col-12">
+      <button pButton pRipple label="Contacter l'administrateur" (click)="contacterAdministrateur()">
+        <i class="pi pi-envelope mr-3"></i>
+      </button>
+    </div>
+  </div>
+  <div *ngIf="canNavigate">
+    <img src="/assets/layout/images/SpinnerCerema.svg">
+  </div>
+</div>
+
+<app-config [minimal]="true"></app-config>

package/_template/{{project}}-ihm/src/app/{{project}}/components/auth/login/login.component.ts

@@ -0,0 +1,46 @@
+import { Component, Inject, OnDestroy, OnInit } from '@angular/core';
+import { LayoutService } from 'src/app/layout/service/app.layout.service';
+import { Subscription } from "rxjs";
+import { OAuthService } from "angular-oauth2-oidc";
+import { Router } from "@angular/router";
+import { UserService } from "../../../../shared/service/user.service";
+import { DOCUMENT } from "@angular/common";
+
+@Component({
+  templateUrl: './login.component.html'
+})
+export class LoginComponent implements OnInit, OnDestroy {
+  private eventSubscription: Subscription | undefined;
+  canNavigate = true;
+
+  constructor(private layoutService: LayoutService, private oauthService: OAuthService, private router: Router,
+              private userService: UserService,
+              @Inject(DOCUMENT) private document: Document) {
+  }
+
+  ngOnInit(): void {
+    this.eventSubscription = this.oauthService.events.subscribe(async ({type}) => {
+      if (type === 'token_received' || type === 'token_refreshed') {
+        this.router.navigateByUrl('/').catch(reason => {
+          this.canNavigate = false;
+        });
+      }
+    });
+  }
+
+  login(): void {
+    this.oauthService.initLoginFlow();
+  }
+
+  ngOnDestroy(): void {
+    this.eventSubscription?.unsubscribe();
+  }
+
+  contacterAdministrateur(): void {
+    console.log("récup liste admin")
+    this.userService.getAllAdmin{{projectID}}WithoutAuthentication().subscribe(value => {
+      const emailList = value.map(admin => admin.email).join(';');
+      this.document.location.href = `mailto:${emailList}?subject={{projectUpper}} : `;
+    });
+  }
+}

package/_template/{{project}}-ihm/src/app/{{project}}/components/auth/login/login.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { LoginRoutingModule } from './login-routing.module';
+import { LoginComponent } from './login.component';
+import { AppConfigModule } from 'src/app/layout/config/config.module';
+import { ProgressSpinnerModule } from "primeng/progressspinner";
+import { ButtonModule } from "primeng/button";
+import { RippleModule } from "primeng/ripple";
+
+@NgModule({
+  imports: [
+    CommonModule,
+    LoginRoutingModule,
+    AppConfigModule,
+    ProgressSpinnerModule,
+    ButtonModule,
+    RippleModule,
+  ],
+  declarations: [LoginComponent]
+})
+export class LoginModule {
+}

package/_template/{{project}}-ihm/src/app/{{project}}/components/auth/logout/logout/logout.component.html

@@ -0,0 +1,8 @@
+<div class="flex h-screen w-screen align-items-center justify-content-center">
+  <div class="block font-bold text-center p-4 border-round mb-3">Vous êtes bien déconnecté !</div>
+  <div class="block font-bold text-center p-4 border-round mb-3">
+    <button class="block" [routerLink]="['/']" pButton pRipple label="Se reconnecter"></button>
+  </div>
+</div>
+
+<app-config [minimal]="true"></app-config>

package/_template/{{project}}-ihm/src/app/{{project}}/components/auth/logout/logout/logout.component.scss

@@ -0,0 +1,21 @@
+.conteneur {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.card {
+  width: auto;
+  height: auto;
+}
+
+.card-header {
+  text-align: center;
+}
+
+.card-body {
+  padding: 1rem 1.5rem;
+}
+

package/_template/{{project}}-ihm/src/app/{{project}}/components/auth/logout/logout/logout.component.spec.ts

@@ -0,0 +1,26 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LogoutComponent } from './logout.component';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+
+describe('DeconnexionComponent', () => {
+  let component: LogoutComponent;
+  let fixture: ComponentFixture<LogoutComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [LogoutComponent],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LogoutComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/_template/{{project}}-ihm/src/app/{{project}}/components/auth/logout/logout/logout.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-deconnexion',
+  templateUrl: './logout.component.html',
+  styleUrls: ['./logout.component.scss']
+})
+export class LogoutComponent implements OnInit {
+
+  constructor() {
+  }
+
+  ngOnInit(): void {
+  }
+}

package/_template/{{project}}-ihm/src/app/{{project}}/components/auth/logout/logout.module.ts

@@ -0,0 +1,27 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { LogoutComponent } from './logout/logout.component';
+import { RouterModule } from '@angular/router';
+import { InplaceModule } from "primeng/inplace";
+import { RippleModule } from "primeng/ripple";
+import { SharedModule } from "../../../../shared/shared.module";
+import { AppConfigModule } from "../../../../layout/config/config.module";
+
+@NgModule({
+  declarations: [LogoutComponent],
+  imports: [
+    CommonModule,
+    SharedModule,
+    RouterModule.forChild([
+      {
+        path: '',
+        component: LogoutComponent,
+      },
+    ]),
+    InplaceModule,
+    RippleModule,
+    AppConfigModule,
+  ],
+})
+export class LogoutModule {
+}

package/_template/{{project}}-ihm/src/app/{{project}}/components/documentation/architecture/architecture.component.html

@@ -0,0 +1,132 @@
+<div class="card">
+  <h2>Architecture</h2>
+  <h3>Organisation du Backend</h3>
+  <h4>De l'utilisation des bons objets pour transférer les données.</h4>
+  <p> Il existe plusieurs types d'objets permettant de transférer des données entre les différentes couches de
+    l'application. Nous distinguons :</p>
+  <ul pl-5 line-height-3>
+    <li>Les <b>DTO</b> : Data Transfert Object</li>
+    <li>Les <b>QO</b> : Query Object</li>
+  </ul>
+  <h5>DTO</h5>
+  <p>Les DTO sont indispensables lors de la récupération des données provenant du frontend. Ils sont un élément clé de
+    la sécurité, car ils permettent de restreindre les données reçues. En effet, nous utilisons par commodité une
+    librairie permettant de faire du mapping automatisé : mapstruct. Elle évite les fastidieuses fonctions de transfert
+    de données entre les différents objets du Backend.</p>
+  <p>Avec une telle librairie, si nous acceptons en entrée des objets contenant l'intégralité des données contenues en
+    base nous nous exposons alors à la faille suivante : l'utilisateur malicieux peut envoyer des données en utilisant
+    simplement les bons champs correspondants à l'objet entité utilisé finalement pour l'enregistrement en base.
+  </p>
+  <p>Il faut donc soit procéder au transfert des données de manière manuelle en prenant soin de n'enregistrer que les
+    éléments autorisés, soit utiliser une librairie de mapping automatique en passant par des objets contenants
+    uniquement les données que l'on souhaite autoriser.
+  </p>
+
+  <h6>Mapping</h6>
+
+  <p>Nous recommandons l'usage de <b>mapstruct</b>, car il est facile à configurer, offre de nombreuses possibilités de
+    paramétrage et est l'une des librairies les plus rapides disponibles. Le critère performance est important, parce
+    que le Backend passe beaucoup de temps à transférer des données entre les différents objets. Cette librairie génère
+    automatiquement les mappers à partir d'interfaces contenant des annotations. C'est une des raisons pour lesquelles
+    sa performance est bonne, il y a moins de choses à faire lors de l'exécution.</p>
+
+  <p>Mapstruct se présente sous la forme d'un plugin Maven, qui lors de la phase de build va générer l'implémentation
+    des mappers que nous auront décrit soit via des interfaces, soit via des classes abstraites. Les classes seront
+    générées dans le répertoire : <i>target/generated-sources/annotations/</i>. Il est parfaitement possible de les
+    consulter pour voir les détails de l'implémentation.</p>
+
+  <app-indic type="astuce">
+    A chaque modification d'un mapper, il faut relancer un mvn compile pour forcer la génération.
+  </app-indic>
+
+  <p>Le mapper le plus simple est le suivant. Une simple interface suffit.</p>
+
+  <app-code [code]="codeMapperSimple"></app-code>
+
+  <p>Pour la première fonction `toDTO`, tous les champs de même nom seront copiés de la source, ici la Gare, dans la
+    destination, ici la GareDTO, qui sera un nouvel objet créé et retourné.</p>
+
+  <p>Lorsque le nom des champs ne correspond pas, il suffit de l'indiquer dans une annotation :</p>
+
+  <app-code [code]="codeMapperTarget"></app-code>
+
+  <p>Pour pouvoir injecter le mapper dans le reste de l'application, il faut ajouter cette option, ou la configurer par
+    défaut dans le paramétrage global.</p>
+
+  <app-code [code]="codeMapperComponentModel"></app-code>
+
+  <p>Dans certains cas, on veut pouvoir ajouter des comportements ou injecter des services dans le mapper. Dans ce cas,
+    on peut passer par une classe abstraite.</p>
+
+  <app-code [code]="codeExpression"></app-code>
+
+  <app-indic type="danger">
+    Il faut bien mettre le service en protected, car la classe générée va hériter de la classe abstraite et devra
+    pouvoir accéder à ce champ.
+  </app-indic>
+
+  <app-indic type="astuce">
+    Les méthodes déclarées abstract seront générées automatiquement, mais il est possible de définir des méthodes
+    concrètes si l'on souhaite fournir une implémentation spécifique. On peut mixer les deux.
+  </app-indic>
+
+  <h6>JSON</h6>
+
+  <p>Les DTO sont amenés à être sérialisés en JSON pour le transfert au niveau de l'API. Nous utilisons la librairie
+    Jackson pour faciliter ce travail</p>
+
+  <p>Il est possible de modifier le nom des propriétés lors de la sérialisation</p>
+
+  <app-code [code]="codeJSonProperty"></app-code>
+
+  <p>Pour certains type de données, il est nécessaire de spécifier la classe permettant de séerialiser et désérialiser
+    la donnée</p>
+
+  <app-code [code]="codeJSonSerialize"></app-code>
+
+  <h6>Validation</h6>
+
+  <p>Les objets DTO sont en première ligne : ils reçoivent les données provenant de l'extérieur. Une règle d'or de
+    sécurité consiste à considérer toutes les entrées comme potentiellement compromises. Il est donc nécessaire de
+    valider chacune de ces entrées.</p>
+
+  <p>On utilise le validator Hibernate pour faciliter ces vérifications.</p>
+
+  <p>On ajoute @Validated sur la classe du Controller.</p>
+
+  <app-code [code]="codeValid"></app-code>
+
+  <p>On ajoute un @Valid sur le DTO en argument de la function qui récupère le paramètre.</p>
+
+  <app-code [code]="codeValidDto"></app-code>
+
+  <p>On peut ensuite ajouter les annotations de validation sur les champs :</p>
+
+  <app-code [code]="codeValidChamp"></app-code>
+
+  <p>Voir
+    <a href="https://docs.jboss.org/hibernate/validator/8.0/reference/en-US/html_single/#section-builtin-constraints">
+      la liste des annotations disponibles</a>.
+  </p>
+
+  <p>Les plus courantes sont :</p>
+
+  <app-code [code]="codeValidCourant"></app-code>
+
+  <h6>Documentation</h6>
+
+  <p>Les objets DTO font partis du contrat de l'interface de l'API, puisqu'ils servent à l'échange des données vers
+    l'extérieur. Il faut donc les documenter.</p>
+
+  <p>On utilise les annotations swagger pour générer automatiquement cette documentation.</p>
+
+  <app-code [code]="codeDoc"></app-code>
+
+  <h5>QO</h5>
+
+  <p>Les Query Object (QO) sont des objets de transfert permettant de gérer les critères de recherche. Ils sont très
+    similaires aux DTO ci-dessus, mais ne nécessitent généralement pas de mapping.</p>
+  <p>Il faut toutefois les valider et les documenter, car ils sont une entrée de l'API. Les mêmes principes s'appliquent
+    que pour les DTO.</p>
+
+</div>