139 lines
5.4 KiB
Markdown
139 lines
5.4 KiB
Markdown
# Récapitulatif des modifications - Session du 15 octobre 2025
|
|
|
|
## 📋 Modifications effectuées
|
|
|
|
### 1. ✅ Correction : Déconnexion automatique lors du changement de mot de passe
|
|
|
|
**Problème** : Les utilisateurs étaient automatiquement déconnectés après avoir créé/modifié leur mot de passe sur la page Sécurité.
|
|
|
|
**Cause** : Utilisation de l'Admin API Supabase (`admin.auth.admin.updateUserById()`) qui invalide toutes les sessions actives par défaut.
|
|
|
|
**Solution** : Remplacement par `supabase.auth.updateUser()` qui préserve la session active.
|
|
|
|
**Fichiers modifiés** :
|
|
- `/app/api/auth/password-update/route.ts`
|
|
|
|
**Documentation** : `FIX_PASSWORD_DECONNEXION.md`
|
|
|
|
---
|
|
|
|
### 2. ✅ Correction : Encadrés 2FA trop grands sur la page de connexion
|
|
|
|
**Problème** : Les 6 encadrés pour saisir le code 2FA étaient trop larges et prenaient toute la largeur disponible.
|
|
|
|
**Cause** : Utilisation de `flex-1` + `justify-between` au lieu de largeurs fixes.
|
|
|
|
**Solution** : Alignement du style sur celui des inputs OTP avec largeurs fixes de 3rem et `justify-center`.
|
|
|
|
**Fichiers modifiés** :
|
|
- `/app/signin/page.tsx` (ligne 557)
|
|
|
|
**Documentation** : `FIX_2FA_INPUT_SIZE.md`
|
|
|
|
---
|
|
|
|
### 3. ✅ Modification : Email de confirmation de mot de passe modifié
|
|
|
|
**Demande** : Modifier le bouton de l'email pour qu'il pointe vers `paie.odentas.fr` au lieu de `/compte/securite`, et changer le nom de la plateforme.
|
|
|
|
**Modifications** :
|
|
- **Texte du bouton** : "Gérer ma sécurité" → "Accès à l'Espace Paie"
|
|
- **URL du bouton** : `${BASE_URL}/compte/securite` → `https://paie.odentas.fr`
|
|
- **Nom de la plateforme** : "Odentas Paie" → "Espace Paie Odentas"
|
|
|
|
**Fichiers modifiés** :
|
|
- `/lib/emailMigrationHelpers.ts` (fonction `sendPasswordChangedEmail`)
|
|
- `/lib/emailTemplateService.ts` (template `password-changed`, ligne 181)
|
|
|
|
---
|
|
|
|
### 4. ✅ Désactivation : Lien "Simulateur de paie" dans la sidebar
|
|
|
|
**Demande** : Désactiver l'accès au simulateur via la sidebar sans toucher à la page simulateur elle-même.
|
|
|
|
**Solution** : Remplacement du lien `<Link>` par un composant `<DisabledMenuItem>` avec tooltip explicatif.
|
|
|
|
**Fichiers modifiés** :
|
|
- `/components/Sidebar.tsx` (ligne 388-395)
|
|
|
|
**Message du tooltip** : "Le simulateur de paie est temporairement désactivé."
|
|
|
|
---
|
|
|
|
### 5. ✅ Redesign : Simulateur de paie (compact et moderne)
|
|
|
|
**Demande** : Revoir le design du simulateur pour le rendre plus compact tout en restant moderne et cohérent avec l'Espace Paie.
|
|
|
|
**Modifications principales** :
|
|
|
|
#### Page React (`/app/(app)/simulateur/page.tsx`) :
|
|
- En-tête compact avec badge gradient indigo/violet
|
|
- Titre réduit de `text-3xl` à `text-2xl`
|
|
- Layout responsive optimisé : `xl:grid-cols-[1fr_340px]`
|
|
- Ordre inversé sur mobile (formulaire en premier)
|
|
- Cards sidebar plus compactes (`p-5` au lieu de `p-6`)
|
|
- Sticky sidebar à `xl:top-20` au lieu de `lg:top-24`
|
|
- Hauteur iframe réduite de 1200px à 1100px
|
|
- Bordures subtiles avec transparence (`/80`)
|
|
- Gradient sur la card d'avertissement
|
|
|
|
#### Formulaire HTML (`/public/simulateur-embed.html`) :
|
|
- **Design system moderne** aligné sur l'Espace Paie
|
|
- **Palette indigo/slate** cohérente
|
|
- **Inputs redessinés** : Border 1.5px, border-radius 8px, focus state avec anneau indigo
|
|
- **Bouton gradient** : `linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)` avec ombre colorée
|
|
- **Radio buttons en cards** : Design moderne avec états hover/selected
|
|
- **Tableaux modernisés** : Border-radius, hover states, gradients verts pour résultats
|
|
- **Sections groupées** : Background clair avec bordures subtiles
|
|
- **Calendrier Flatpickr** : Thème indigo cohérent
|
|
|
|
**Gains** :
|
|
- Compacité : -100px de hauteur, -20% d'espace vertical
|
|
- Cohérence : Palette identique au reste de l'application
|
|
- Modernité : Gradients, transitions, micro-interactions
|
|
- Lisibilité : Meilleure hiérarchie visuelle
|
|
|
|
**Documentation** : `SIMULATEUR_REDESIGN.md`
|
|
|
|
---
|
|
|
|
## 📊 Statistiques
|
|
|
|
- **Fichiers modifiés** : 6
|
|
- **Corrections de bugs** : 2
|
|
- **Améliorations UX** : 3
|
|
- **Documents créés** : 4
|
|
|
|
## 🎯 Impact utilisateur
|
|
|
|
1. **Sécurité** : Plus de déconnexion intempestive après changement de mot de passe ✅
|
|
2. **Authentification** : Interface 2FA plus lisible et mieux dimensionnée ✅
|
|
3. **Communication** : Email de confirmation plus clair avec accès direct ✅
|
|
4. **Navigation** : Simulateur désactivé proprement avec feedback utilisateur ✅
|
|
5. **Design** : Simulateur plus compact, moderne et cohérent avec l'app ✅
|
|
|
|
## 🔧 Technologies utilisées
|
|
|
|
- **Next.js 14** (App Router)
|
|
- **React** (Hooks, usePageTitle)
|
|
- **TypeScript**
|
|
- **Tailwind CSS** (Utility-first CSS)
|
|
- **Supabase Auth** (Authentication)
|
|
- **Lucide Icons** (Iconographie moderne)
|
|
- **Python** (Scripts de correction ponctuels)
|
|
|
|
## ✅ Tests recommandés
|
|
|
|
1. Tester le changement de mot de passe et vérifier qu'on reste connecté
|
|
2. Tester la saisie du code 2FA et vérifier les dimensions des encadrés
|
|
3. Recevoir l'email de confirmation et tester le lien du bouton
|
|
4. Vérifier que le simulateur est bien désactivé dans la sidebar avec le tooltip
|
|
5. Tester le simulateur en direct et vérifier le nouveau design
|
|
6. Tester la responsivité du simulateur sur mobile/tablet
|
|
|
|
## 📝 Notes importantes
|
|
|
|
- Toutes les modifications préservent la compatibilité avec le code existant
|
|
- Aucune breaking change introduite
|
|
- Les fonctionnalités JavaScript du simulateur restent inchangées
|
|
- L'accessibilité est préservée (labels, aria-labels, focus states)
|