269 lines
6.6 KiB
Markdown
269 lines
6.6 KiB
Markdown
# 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
|