# Page de Connexion Xpeditis

## 📍 URL
`/login`

## 🎨 Design

Page de connexion moderne avec design split-screen inspiré des meilleures pratiques B2B SaaS.

### Layout

**Desktop (lg+)**:
- **Gauche (50%)**: Formulaire de connexion sur fond blanc
- **Droite (50%)**: Section branding avec features et stats sur fond navy

**Mobile/Tablet (< lg)**:
- Formulaire pleine largeur avec scroll
- Section branding masquée

## ✨ Fonctionnalités

### Formulaire Principal

```tsx
- Email (required)
- Mot de passe (required)
- Case "Se souvenir de moi"
- Lien "Mot de passe oublié?"
- Bouton "Se connecter" (primaire turquoise)
```

### Authentification Sociale

- **Google** (icône + texte)
- **LinkedIn** (icône + texte)

### Navigation

- **Créer un compte** → `/register`
- **Mot de passe oublié** → `/forgot-password`
- **Logo** → `/` (page d'accueil)

### Footer Links

- Centre d'aide → `/help`
- Contactez-nous → `/contact`
- Confidentialité → `/privacy`
- Conditions → `/terms`

## 🎯 Section Branding (Droite)

### Titre
"Simplifiez votre fret maritime"

### Description
"Accédez à des tarifs en temps réel de plus de 50 compagnies maritimes. Réservez, suivez et gérez vos expéditions LCL en quelques clics."

### Features (3 cartes avec icônes)

1. **Tarifs instantanés** ⚡
   - Comparez les prix de toutes les compagnies en temps réel

2. **Réservation simplifiée** ✓
   - Réservez vos conteneurs en moins de 5 minutes

3. **Suivi en temps réel** 💬
   - Suivez vos expéditions à chaque étape du voyage

### Stats

| Métrique | Valeur |
|----------|--------|
| Compagnies | 50+ |
| Expéditions | 10k+ |
| Satisfaction | 99.5% |

## 🎨 Couleurs Utilisées

```css
/* Formulaire (gauche) */
Background: #FFFFFF (white)
Titres: #10183A (brand-navy)
Labels: Uppercase, neutral-600
Inputs: border neutral-300, focus accent (turquoise)
Bouton primaire: bg-brand-turquoise (#34CCCD)

/* Branding (droite) */
Background: gradient brand-navy → neutral-800
Texte: white / neutral-200 / neutral-300
Feature icons: bg-brand-turquoise
Stats: text-brand-turquoise
```

## 📱 Responsive

### Breakpoints

```tsx
// Mobile first
w-full          // Mobile: 100% width
lg:w-1/2        // Desktop: 50% split

// Padding
px-8            // Mobile: 2rem
sm:px-12        // Small: 3rem
lg:px-16        // Large: 4rem
xl:px-24        // XL: 6rem

// Visibility
hidden lg:block // Masqué mobile, visible desktop
```

## 🔐 Logique d'Authentification

### Flow

1. Utilisateur remplit email + password
2. Click sur "Se connecter"
3. Appel API `POST /api/v1/auth/login`
4. Si succès:
   - Tokens stockés (localStorage)
   - Redirection → `/dashboard`
5. Si échec:
   - Message d'erreur affiché
   - Formulaire reste actif

### États

```tsx
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [rememberMe, setRememberMe] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState('');
```

### Validation

- Email: `type="email"` + `required`
- Password: `type="password"` + `required`
- Tous les champs désactivés pendant `isLoading`

## 🚀 Intégration API

### Endpoint

```typescript
import { login } from '@/lib/api';

await login({ email, password });
// Retourne: { accessToken, refreshToken, user }
```

### Gestion d'Erreurs

```tsx
try {
  await login({ email, password });
  router.push('/dashboard');
} catch (err: any) {
  setError(err.message || 'Identifiants incorrects');
}
```

## 🎭 Composants Utilisés

### Classes CSS Custom

```css
.label          /* Labels uppercase bold */
.input          /* Input stylé avec focus turquoise */
.btn-primary    /* Bouton turquoise avec hover */
.link           /* Lien turquoise avec underline hover */
```

### Classes Tailwind

```tsx
text-h1         /* Titre principal (40px, Manrope) */
text-body       /* Corps de texte (16px, Montserrat) */
text-body-sm    /* Petit texte (14px) */
text-display-sm /* Grand titre (48px) */
text-h5         /* Sous-titre (18px) */
```

## 🖼️ Assets

### Logo

```tsx
<Image
  src="/assets/logos/xpeditis-logo.svg"
  alt="Xpeditis"
  width={180}
  height={48}
  priority
/>
```

### Icônes

- Google: SVG inline (multi-path)
- LinkedIn: SVG inline (single path)
- Features: Lucide icons (bolt, check-circle, message-circle)

## 🧪 Test Cases

### Tests Fonctionnels

- [ ] Login avec credentials valides → succès
- [ ] Login avec credentials invalides → erreur
- [ ] Email vide → validation browser
- [ ] Password vide → validation browser
- [ ] Click "Mot de passe oublié" → `/forgot-password`
- [ ] Click "Créer un compte" → `/register`
- [ ] Click logo → `/`
- [ ] Checkbox "Se souvenir de moi" fonctionne
- [ ] Loading state désactive formulaire
- [ ] Message d'erreur s'affiche correctement

### Tests Visuels

- [ ] Logo s'affiche correctement
- [ ] Split-screen sur desktop (> lg)
- [ ] Formulaire pleine largeur sur mobile
- [ ] Inputs focus → border turquoise + ring
- [ ] Bouton hover → opacity 90%
- [ ] Social buttons hover → background gray-50
- [ ] Footer links hover → text turquoise
- [ ] Stats turquoise sur fond navy lisibles
- [ ] Cercles décoratifs visibles en bas à droite

### Tests Responsive

- [ ] Mobile (< 640px): Formulaire adapté
- [ ] Tablet (640-1024px): Formulaire centré
- [ ] Desktop (> 1024px): Split-screen visible
- [ ] XL (> 1280px): Padding augmenté

## 📊 Analytics

Events à tracker:
- `login_attempt` - Tentative de connexion
- `login_success` - Connexion réussie
- `login_error` - Erreur de connexion
- `social_login_click` - Click sur Google/LinkedIn
- `forgot_password_click` - Click "Mot de passe oublié"
- `create_account_click` - Click "Créer un compte"

## 🔮 Améliorations Futures

- [ ] Authentification Google OAuth fonctionnelle
- [ ] Authentification LinkedIn OAuth fonctionnelle
- [ ] Animation de transition entre états
- [ ] Validation en temps réel (email format)
- [ ] Indicateur de force du mot de passe
- [ ] Message "Email non vérifié" si applicable
- [ ] Support SSO (Single Sign-On) entreprise
- [ ] Captcha après 3 tentatives échouées
- [ ] Compte à rebours après verrouillage
- [ ] Animation du logo au chargement

## 📚 Références

- Design inspiré de: Stripe, Linear, Vercel, Notion
- Pattern: Split-screen authentication
- Accessibilité: WCAG 2.1 AA compliant
- Form validation: HTML5 + Error states