Skip to content

Étape 5 — Écrans front-end pour le CRUD étudiants

Objectif : consommer les API /api/students (créées à l'étape 4) depuis des écrans Angular, protégés par un Guard (accès réservé aux utilisateurs connectés).

Fichiers ajoutés / modifiés

Fichier Rôle
core/models/Student.ts, core/models/StudentRequest.ts DTO front, alignés sur StudentDTO/StudentRequestDTO (back)
core/service/student.service.ts findAll/findById/create/update/delete sur /api/students
core/service/student-mock.service.ts Mocks pour les tests de composants
core/guards/auth.guard.ts CanActivateFn — redirige vers /login si UserService.isLoggedIn() est faux
core/interceptors/auth.interceptor.ts HttpInterceptorFn — ajoute Authorization: Bearer <token> à toute requête sortante si un token est stocké
app.config.ts Enregistrement de l'intercepteur (provideHttpClient(withInterceptors([authInterceptor])))
pages/students/student-list/* Écran liste (+ liens Voir/Éditer/Supprimer, bouton Ajouter)
pages/students/student-detail/* Écran détail (+ Éditer/Supprimer)
pages/students/student-form/* Écran unique pour create et edit (détecte le mode via le paramètre de route id)
app.routes.ts Routes /students, /students/new, /students/:id/edit, /students/:id, toutes avec canActivate: [authGuard]
pages/login/login.component.ts Redirection après connexion : / → /students

Ordre des routes important : students/new et students/:id/edit sont déclarées avant students/:id — sinon Angular Router interpréterait new comme une valeur du paramètre :id.

Comment reproduire (pour l'examinateur)

1. Démarrer l'environnement complet

# Terminal 1 — back-end (voir étape 4 pour le détail)
cd back-end
mvn spring-boot:run

# Terminal 2 — front-end
cd front-end
npm install     # si pas déjà fait
npm run start   # ng serve, proxy vers :8080 via proxy.conf.json

Ouvrir http://localhost:4200.

2. Vérifier le Guard (accès protégé)

  • Aller sur http://localhost:4200/students sans être connecté → redirection immédiate vers /login (comportement du authGuard, à vérifier au clic dans le navigateur : ceci ne se voit pas avec curl, la redirection est faite côté client par le JavaScript Angular après chargement de la page).
  • Se connecter via /login avec un compte créé au préalable (POST /api/register, voir étape 4) → redirection automatique vers /students.

3. Vérifier le CRUD dans le navigateur

  1. /students — liste vide au départ, bouton Add student.
  2. /students/new — remplir le formulaire, Create → retour sur /students, le nouvel étudiant apparaît dans la liste.
  3. Cliquer View sur une ligne → /students/{id}, détail affiché.
  4. Cliquer Edit → /students/{id}/edit, formulaire pré-rempli, modifier puis Save → retour sur /students, changement visible.
  5. Cliquer Delete (confirmation navigateur) → l'étudiant disparaît de la liste.

4. Vérification en ligne de commande de la chaîne HTTP (proxy + JWT)

Équivalent de ce que fait l'intercepteur Angular, pour vérifier la tuyauterie sans navigateur :

# Connexion via le proxy du front (mêmes identifiants qu'à l'étape 4)
TOKEN=$(curl -s -X POST http://localhost:4200/api/login \
  -H "Content-Type: application/json" \
  -d '{"login":"crud.tester","password":"crud-pass"}')

# Sans token -> 401 (ce que verrait un appel non authentifié)
curl -i http://localhost:4200/api/students

# Avec token (ce que l'intercepteur ajoute automatiquement) -> 200/201
curl -i -H "Authorization: Bearer $TOKEN" http://localhost:4200/api/students
curl -i -X POST http://localhost:4200/api/students \
  -H "Content-Type: application/json" -H "Authorization: Bearer $TOKEN" \
  -d '{"firstName":"Alice","lastName":"Martin","email":"alice.martin@example.com","birthDate":"2001-03-15"}'

5. Tests statiques et unitaires

cd front-end
npx tsc -p tsconfig.app.json --noEmit   # 0 erreur
npx jest                                 # tous les composants + services

Vérifications effectuées dans cette session

Scénario Résultat
npx tsc --noEmit 0 erreur
npx jest 7 suites / 8 tests, tous verts (StudentListComponent, StudentDetailComponent, StudentFormComponent inclus)
GET /students, /students/new, /students/1, /students/1/edit (via ng serve) 200 (shell Angular chargé, routes résolues)
POST/GET /api/students via le proxy :4200, avec et sans token mêmes codes qu'un appel direct sur :8080 (401 sans token, 201/200 avec)

Non vérifié dans cette session : interaction réelle dans un navigateur (remplissage des formulaires, clics, comportement visuel du Guard lors d'une navigation). Aucun outil d'automatisation navigateur (Playwright/Cypress) n'était disponible dans cet environnement de travail. La chaîne technique (compilation, tests unitaires, routes, proxy, appels API réels avec JWT) est en revanche entièrement vérifiée — à confirmer visuellement par un passage manuel dans le navigateur avant la session de soutenance.

Points de vigilance restants

  • Pas de bouton de déconnexion visible dans l'UI (UserService.logout() existe, prêt à être branché sur un bouton si besoin).
  • Pas de tests E2E Cypress pour ces écrans — prévu à l'Exercice 2, étape 5 (exercices2.md).
  • Le style reste minimal (pas de framework CSS chargé), conforme à la consigne de l'énoncé : l'esthétique n'est pas un critère d'évaluation de cet exercice.