# Prompt p01 — Login Web (Next.js 15)
*Contextes requis : ctx-global.md + ctx-web-nextjs.md + ctx-laravel-bff.md*

---

## Profil & Accès
- **Qui** : Tous les profils Web (CEO, DG, CFO, Trésorier, Comptable, Resp. Commercial, Resp. Opérations, Resp. RH, GPR, GCG, Auditeur, Administrateur, Gérant en mode web)
- **Accès** : Page publique — redirige vers /dashboard si déjà authentifié

## Fichier à créer
```
app/(auth)/login/page.tsx
app/(auth)/layout.tsx         ← Layout centré (sans sidebar)
components/auth/LoginForm.tsx
components/auth/OtpModal.tsx
```

## Spec UX condensée

### Écran principal
```
┌─────────────────────────────────────────────────────┐
│          Logo FlowUp (centré, 120px)                │
│          "FlowUp ERP" + "FEBI ITC SA"               │
│                                                     │
│  ┌─────────────────────────────────────────────┐    │
│  │ Adresse email                               │    │
│  │ [ input email ]                             │    │
│  │                                             │    │
│  │ Mot de passe                                │    │
│  │ [ input password ] [👁]                     │    │
│  │                                             │    │
│  │ [  Se connecter  ]  ← btn bg-blue           │    │
│  │                                             │    │
│  │ Mot de passe oublié ?                       │    │
│  └─────────────────────────────────────────────┘    │
│                                                     │
│  Fond : gradient doux navy → bleu (ou blanc cassé)  │
└─────────────────────────────────────────────────────┘
```

### Modal OTP (profils sensibles : CEO, CFO, ADM, AUD)
```
Dialog centré, max-w-sm
Titre : "Vérification OTP"
Sous-titre : "Code envoyé au +224 6XX XX XX XX"
[ 6 cases OTP ] ← auto-avance, numérique
[ Valider le code ]
[ Renvoyer le code ] ← disabled 60s puis réactivé
```

### États à gérer
- Loading : bouton disabled + spinner "Connexion en cours..."
- Erreur identifiants : alerte inline rouge sous le formulaire
- Compte bloqué : alerte spéciale + message "Contactez l'administrateur"
- 3 tentatives → message de blocage (pas de retry)
- OTP expiré → "Code expiré, renvoyez un nouveau code"
- OTP invalide → "Code incorrect (X tentatives restantes)"

## Endpoints BFF
```
POST /api/auth/login
  Body : { email, password }
  Réponse OK   : { token, user, otp_required?, session_id? }
  Réponse 401  : { error: { message } }
  Réponse 423  : compte bloqué

POST /api/auth/otp-verify
  Body : { session_id, code }
  Réponse OK   : { token, user }
  Réponse 422  : code invalide

POST /api/auth/otp-resend
  Body : { session_id }
```

## Règles spécifiques
- RGCO-01 : Token stocké en httpOnly cookie (withCredentials: true sur axios)
- RGCO-02 : Rediriger vers /dashboard après auth réussie
- RGCO-03 : Page /login redirige vers /dashboard si token valide (middleware.ts)
- RGCO-04 : "Mot de passe oublié" → envoi SMS au téléphone associé au compte
- RGCO-05 : Après blocage compte → SMS envoyé au CEO
- RGCO-06 : Toggle visibilité mot de passe (icône œil)

## Tâche Claude
Génère la page de login web complète pour FlowUp ERP en Next.js 15 TypeScript avec :
1. `app/(auth)/login/page.tsx` — page principale (form email/password)
2. `app/(auth)/layout.tsx` — layout centré fond gray-50
3. `components/auth/LoginForm.tsx` — formulaire React Hook Form + Zod
4. `components/auth/OtpModal.tsx` — dialog 6 cases OTP avec timer 60s

Charte : palette navy/blue, Inter font, bouton CTA bg-blue text-white.
Pas de logo placeholder (utilise texte "FlowUp" stylé en bold navy).