Skip to content

Étape 3 — Implémentation de l'écran de connexion (front-end)

Objectif de l'étape : ajouter un écran de connexion Angular qui consomme POST /api/login (corrigé à l'étape 2) et récupère un JWT.

Fichiers ajoutés / modifiés

Fichier Rôle
core/models/Login.ts DTO front { login, password }, aligné sur LoginRequestDTO (back)
core/service/user.service.ts Ajout de login(), logout(), getToken(), isLoggedIn()
core/service/user-mock.service.ts Mocks correspondants, pour les tests de composants
pages/login/login.component.{ts,html,css,spec.ts} Nouvel écran (formulaire réactif)
app.routes.ts Ajout de la route /login
pages/register/register.component.ts Redirection vers /login après inscription réussie (résolution du TODO laissé à l'étape 1)

Détails d'implémentation

  • UserService.login() : POST /api/login avec responseType: 'text' — le back-end renvoie le JWT en texte brut (ResponseEntity.ok(String), pas de sérialisation JSON), pas un objet { token: ... }. Le token est stocké dans localStorage (auth_token) via un tap() sur la réponse.
  • LoginComponent : même structure que RegisterComponent (FormBuilder réactif, Validators.required), avec trois états explicites gérés dans le template :
  • loading — désactive le bouton et affiche « Logging in... » pendant l'appel HTTP ;
  • errorMessage — affiché dans un bandeau si l'API répond en erreur (lu depuis error.error?.message, le champ renvoyé par RestExceptionHandler côté back, ex. "Invalid credentials") ;
  • succès — redirection vers / via Router.navigateByUrl.
  • Suit le même style que RegisterComponent (pas de MaterialModule utilisé dans le template, classes CSS type Bootstrap sans framework CSS chargé — cohérent avec le reste du starter code ; l'esthétique n'est pas un critère de cet exercice).

Vérifications effectuées

Back-end (mvn spring-boot:run) et front-end (ng serve, proxy vers localhost:8080 via proxy.conf.json) lancés en parallèle :

Scénario Requête Résultat
Chargement de l'écran GET http://localhost:4200/login 200 OK
Connexion avec identifiants valides, via le proxy front POST http://localhost:4200/api/login 200 OK + JWT identique à un appel direct sur :8080
Connexion avec mauvais mot de passe, via le proxy front idem 400 Bad Request + {"message":"Invalid credentials", ...} — correspond au message affiché par errorMessage dans LoginComponent

Tests unitaires Jest : LoginComponent, RegisterComponent (mis à jour pour injecter Router) et UserService — 5/5 passent.

Vérification statique : npx tsc -p tsconfig.app.json --noEmit sans erreur.

Non vérifié dans cette session : interaction réelle dans un navigateur (remplissage du formulaire, clic sur le bouton) — aucun outil d'automatisation navigateur (Playwright/Cypress) n'était disponible dans cet environnement. La chaîne HTTP (route, proxy, appel API, gestion des réponses succès/erreur attendues par le composant) est en revanche entièrement vérifiée bout en bout.

Points de vigilance restants

  • Pas encore de Guard Angular sur les routes (prévu étape 5, une fois les écrans CRUD étudiants en place).
  • Pas de bouton de déconnexion / affichage de l'état connecté pour l'instant (UserService.logout() existe déjà, prêt à être branché).