# PdfEditor — Frontend (Angular)

Application web d'édition de PDF auto-hébergée. Frontend Angular (standalone
components, routing, lazy-loading) consommant l'API REST décrite dans
`../docs/API.md`. L'API est toujours appelée en chemin **relatif** `/api/...`,
afin que le proxy nginx (prod) comme le proxy Angular (dev) fonctionnent sans
configuration d'URL.

## Prérequis

- Node.js 20+ (testé avec Node 22/24) et npm.
- Angular CLI (`npm install -g @angular/cli`) ou via `npx ng`.

## Installation

```bash
npm install
```

> Le fichier `package-lock.json` n'est pas fourni : il sera généré au premier
> `npm install`. Pensez à le commiter ensuite (le Dockerfile l'utilise via
> `npm ci` s'il est présent).

## Développement local (`ng serve` + proxy)

Le backend est exposé en local sur `http://localhost:8081` par
`../docker-compose.local.yml`. Le fichier `proxy.conf.json` redirige `/api`
vers ce port.

1. Démarrer la base + le backend :

   ```bash
   # à la racine du dépôt
   docker compose -f docker-compose.local.yml up --build db backend
   ```

2. Lancer le serveur de dev Angular (utilise automatiquement le proxy) :

   ```bash
   npm start
   # équivaut à : ng serve --proxy-config proxy.conf.json
   ```

3. Ouvrir http://localhost:4200.

## Build de production

```bash
npm run build
# Sortie : dist/pdfeditor-frontend/browser
```

## Docker

`Dockerfile` (multi-stage : build Angular puis service nginx) et `nginx.conf`
(SPA + proxy `/api` -> `http://backend:8080`) sont prévus pour
`../docker-compose.yml` et `../docker-compose.local.yml` (service `frontend`,
exposé sur le port 80 de l'image).

```bash
# build local de l'image (depuis le dossier frontend)
docker build -t pdfeditor-frontend .
```

## Architecture

```
src/app/
├── core/                 # services transverses
│   ├── auth.service.ts       # login/register/refresh/logout + état utilisateur
│   ├── auth.interceptor.ts   # Bearer + refresh automatique sur 401
│   ├── auth.guard.ts         # garde des routes protégées
│   ├── documents.service.ts  # CRUD /api/documents
│   └── models.ts             # types alignés sur le contrat d'API
└── features/
    ├── auth/             # pages login + register
    ├── dashboard/        # liste des documents sauvegardés
    └── editor/           # éditeur PDF (cœur du produit)
        ├── editor.component.*       # orchestration (drag&drop, toolbar, export)
        ├── page-layer.component.ts  # rendu d'une page + couche d'annotations
        ├── pdf.service.ts           # rendu pdf.js + export pdf-lib
        ├── signature-dialog.component.ts
        └── annotation.model.ts
```

## Librairies clés

- **pdfjs-dist** : rendu des pages PDF dans un `<canvas>` (navigation, zoom).
- **pdf-lib** : aplatissement des annotations dans le PDF à l'export.
- **signature_pad** : capture de la signature à main levée.
- Couche d'annotations : **DOM/CSS maison** (pas de fabric/konva) — éléments
  simples, édition de texte et rendu d'images natifs, dépendance évitée.

## Authentification

- `access_token` conservé **en mémoire** (perdu au rechargement, restauré par
  un refresh) ; `refresh_token` persisté dans `localStorage`.
- L'intercepteur ajoute le Bearer et, sur `401`, tente un `/api/auth/refresh`
  unique (les requêtes concurrentes attendent puis sont rejouées).