# Spécification – Pages d'Authentification ESTAIR
> Pages reprises **telles quelles** depuis Vuexy v2, avec adaptations textuelles et branchement Keycloak uniquement.  
> Aucune modification de layout, de style, ni de composants UI.

---

## Structure commune aux 3 pages

**Layout split-screen 2 colonnes (layout `AuthV2` de Vuexy) :**

```
┌──────────────────────────┬─────────────────────────┐
│                          │                         │
│   PANNEAU GAUCHE (2/3)   │   PANNEAU DROIT (1/3)   │
│   Illustration 3D        │   Formulaire            │
│   + éléments décoratifs  │                         │
│                          │                         │
└──────────────────────────┴─────────────────────────┘
```

- **Fond gauche :** gris très clair (`#f4f5fa`), cercle décoratif gris clair centré derrière l'illustration
- **Fond droit :** blanc pur
- **Logo** `Vuexy` → remplacer par logo **ESTAIR** (coin haut gauche, au-dessus du panneau gauche)
- **Bouton "Buy Now"** (Vuexy demo) → **supprimer**
- **Bannière "Claude is active"** → artefact de la démo, absente en prod

---

## Page 1 – Login
> Fichier Vuexy : `pages/authentication/login-v2`  
> Route ESTAIR : `/login`

### Panneau gauche
| Élément | Valeur Vuexy | Valeur ESTAIR |
|---------|-------------|---------------|
| Illustration 3D | Personnage masculin violet + 2 cards KPI flottantes | **Identique** (garder tel quel) |
| Cards KPI | Profit / Order | **Identique** |

### Panneau droit
| Élément | Valeur Vuexy | Valeur ESTAIR |
|---------|-------------|---------------|
| Titre | `Welcome to Vuexy! 👋` | `Bienvenue sur ESTAIR 👋` |
| Sous-titre | `Please sign-in to your account and start the adventure` | `Connectez-vous à votre espace de gestion` |
| Label champ 1 | `Email or Username` | `Identifiant` |
| Placeholder champ 1 | `johndoe@email.com` | `Votre identifiant Keycloak` |
| Icône champ 1 | person outline | **Identique** |
| Label champ 2 | `Password` | `Mot de passe` |
| Icône champ 2 | lock + toggle show/hide | **Identique** |
| Checkbox | `Remember me` | `Se souvenir de moi` |
| Lien | `Forgot Password?` | `Mot de passe oublié ?` → route `/forgot-password` |
| Bouton principal | `Login` (violet, pleine largeur) | `Se connecter` |
| Lien bas | `New on our platform? Create an account` | **Supprimer** (pas d'auto-inscription sur ESTAIR) |
| Section "or" + icônes sociales | Facebook / Twitter / GitHub / Google | **Supprimer** |

### Branchement Keycloak
```
Action du bouton "Se connecter"
→ NE PAS faire un POST classique email/password
→ Rediriger vers Keycloak Authorization Code Flow :
  GET {KEYCLOAK_URL}/realms/{REALM}/protocol/openid-connect/auth
    ?client_id={CLIENT_ID}
    &redirect_uri={APP_URL}/auth/callback
    &response_type=code
    &scope=openid profile email
```

> Le formulaire login Vuexy devient donc un **bouton de redirection Keycloak** plutôt qu'un formulaire natif. Deux options selon la config Keycloak :
> - **Option A (recommandée)** : Remplacer le formulaire par un unique bouton `Se connecter avec ESTAIR` qui déclenche le redirect OAuth2 → Keycloak gère son propre écran de login
> - **Option B** : Conserver le formulaire Vuexy et faire un `Direct Access Grant` (username/password) → moins sécurisé, déconseillé sauf si Keycloak est configuré en conséquence

**Callback route :** `GET /auth/callback?code=…`
→ Échanger le `code` contre un `access_token` + `refresh_token` via POST Keycloak token endpoint  
→ Stocker les tokens (httpOnly cookie ou Pinia store selon stratégie SSR/SPA)  
→ Rediriger vers `/dashboard`

---

## Page 2 – Mot de passe oublié
> Fichier Vuexy : `pages/authentication/forgot-password-v2`  
> Route ESTAIR : `/forgot-password`

### Panneau gauche
| Élément | Valeur Vuexy | Valeur ESTAIR |
|---------|-------------|---------------|
| Illustration 3D | Personnage féminin rose + icônes ⚙ et ✕ | **Identique** |

### Panneau droit
| Élément | Valeur Vuexy | Valeur ESTAIR |
|---------|-------------|---------------|
| Titre | `Forgot Password? 🔒` | `Mot de passe oublié ? 🔒` |
| Sous-titre | `Enter your email and we'll send you instructions to reset your password` | `Saisissez votre email et nous vous enverrons les instructions de réinitialisation` |
| Label champ | `Email` | `Email` |
| Placeholder | `johndoe@email.com` | `Votre adresse email` |
| Bouton principal | `Send Reset Link` (violet, pleine largeur) | `Envoyer le lien de réinitialisation` |
| Lien retour | `‹ Back to login` | `‹ Retour à la connexion` → route `/login` |

### Branchement Keycloak
```
Action du bouton "Envoyer le lien"
→ POST {KEYCLOAK_URL}/realms/{REALM}/login-actions/reset-credentials
    (ou utiliser l'API Admin Keycloak : PUT /users/{id}/execute-actions-email)

Flux recommandé :
1. Frontend POST /api/auth/forgot-password { email }
2. Backend appelle Keycloak Admin API pour déclencher l'email de reset
3. Keycloak envoie l'email avec lien → pointe vers /reset-password?token=…
4. Frontend affiche confirmation : "Email envoyé si le compte existe"
```

---

## Page 3 – Réinitialisation du mot de passe
> Fichier Vuexy : `pages/authentication/reset-password-v2`  
> Route ESTAIR : `/reset-password`

### Panneau gauche
| Élément | Valeur Vuexy | Valeur ESTAIR |
|---------|-------------|---------------|
| Illustration 3D | Personnage masculin roux avec smartphone + icônes 🔑 et 🔒 | **Identique** |

### Panneau droit
| Élément | Valeur Vuexy | Valeur ESTAIR |
|---------|-------------|---------------|
| Titre | `Reset Password 🔒` | `Nouveau mot de passe 🔒` |
| Sous-titre | `Your new password must be different from previously used passwords` | `Votre nouveau mot de passe doit être différent des mots de passe précédemment utilisés` |
| Label champ 1 | `New Password` | `Nouveau mot de passe` |
| Icône champ 1 | lock + toggle show/hide | **Identique** |
| Label champ 2 | `Confirm Password` | `Confirmer le mot de passe` |
| Icône champ 2 | lock + toggle show/hide | **Identique** |
| Bouton principal | `Set New Password` (violet, pleine largeur) | `Définir le nouveau mot de passe` |
| Lien retour | `‹ Back to login` | `‹ Retour à la connexion` → route `/login` |

### Branchement Keycloak
```
Cette page est atteinte via le lien envoyé par email (token Keycloak dans l'URL)

Route : /reset-password?token={keycloak_action_token}

Action du bouton "Définir le nouveau mot de passe"
→ POST {KEYCLOAK_URL}/realms/{REALM}/login-actions/action-token
    ?key={token}
    &client_id={CLIENT_ID}
  avec body : { newPassword, confirmPassword }

Ou déléguer entièrement à Keycloak :
→ Le lien email pointe directement vers l'interface Keycloak native de reset
→ Après reset réussi, Keycloak redirige vers /login avec message de succès
```

---

## Récapitulatif des modifications

| Page | Modifs texte | Modifs layout | Modifs fonctionnelles |
|------|-------------|---------------|----------------------|
| Login | Titre + sous-titre + labels + supprimer social login | ❌ aucune | Branchement Keycloak OIDC |
| Forgot Password | Titre + sous-titre + labels | ❌ aucune | Appel API Keycloak reset |
| Reset Password | Titre + sous-titre + labels | ❌ aucune | Appel token Keycloak |

---

## Variables d'environnement requises

```env
KEYCLOAK_URL=https://auth.estair.yourdomain.com
KEYCLOAK_REALM=estair
KEYCLOAK_CLIENT_ID=estair-app
APP_URL=https://estair.yourdomain.com
```

---

## Fichiers Vuexy à copier tels quels (sans modification)

```
src/pages/authentication/login-v2.vue          → renommer en login.vue
src/pages/authentication/forgot-password-v2.vue → renommer en forgot-password.vue
src/pages/authentication/reset-password-v2.vue  → renommer en reset-password.vue
```

Les composants internes (`AuthV2Layout`, illustrations 3D, champs de formulaire Vuexy) sont **réutilisés sans modification**.