67 lines
2.5 KiB
Markdown
67 lines
2.5 KiB
Markdown
# Correction : Encadrés 2FA trop grands sur la page de connexion
|
|
|
|
## 🐛 Problème
|
|
|
|
Sur la page de connexion (`/signin`), lors de la saisie du code 2FA (authentification à deux facteurs), les encadrés pour les 6 chiffres étaient beaucoup trop grands par rapport aux encadrés utilisés pour le code OTP par email.
|
|
|
|
## 🔍 Cause
|
|
|
|
Les inputs du 2FA utilisaient la classe CSS `flex-1` qui les rendait extensibles pour remplir tout l'espace disponible, combiné avec `justify-between` au lieu de `justify-center`.
|
|
|
|
**Code problématique** :
|
|
```tsx
|
|
<div className="flex justify-between gap-1 sm:gap-2">
|
|
<input
|
|
className="flex-1 h-12 sm:h-14 text-center text-xl sm:text-2xl font-mono border-2 border-[#6366f1]/40 rounded-xl bg-white/30 text-[#171424] focus:outline-none focus:ring-2 focus:ring-[#6366f1] shadow-md transition"
|
|
/>
|
|
</div>
|
|
```
|
|
|
|
## ✅ Solution
|
|
|
|
Alignement du style des inputs 2FA sur celui des inputs OTP en utilisant :
|
|
- Des largeurs fixes (`w-12 sm:w-14` + style inline `width: 3rem`)
|
|
- `justify-center` au lieu de `justify-between`
|
|
- Les mêmes classes de style pour une apparence cohérente
|
|
|
|
### Changements apportés
|
|
|
|
**Fichier** : `/app/signin/page.tsx`
|
|
|
|
#### Avant :
|
|
```tsx
|
|
<div className="flex justify-between gap-1 sm:gap-2">
|
|
<input
|
|
className="flex-1 h-12 sm:h-14 text-center text-xl sm:text-2xl font-mono border-2 border-[#6366f1]/40 rounded-xl bg-white/30 text-[#171424] focus:outline-none focus:ring-2 focus:ring-[#6366f1] shadow-md transition"
|
|
/>
|
|
</div>
|
|
```
|
|
|
|
#### Après :
|
|
```tsx
|
|
<div className="flex justify-center gap-1 sm:gap-2">
|
|
<input
|
|
className="w-12 sm:w-14 h-14 sm:h-16 text-center text-2xl sm:text-3xl rounded-xl sm:rounded-2xl bg-white/70 border-2 border-[#6366f1]/40 text-[#171424] placeholder-[#171424]/40 focus:outline-none focus:ring-2 focus:ring-[#6366f1]/40 shadow-lg transition flex-shrink-0"
|
|
style={{ fontWeight: 700, letterSpacing: "0.1em", width: "3rem", minWidth: "3rem", maxWidth: "3rem" }}
|
|
/>
|
|
</div>
|
|
```
|
|
|
|
## 🎯 Améliorations
|
|
|
|
- ✅ Encadrés 2FA de taille fixe (3rem / ~48px)
|
|
- ✅ Cohérence visuelle entre OTP et 2FA
|
|
- ✅ Centrés sur la page au lieu d'être étirés
|
|
- ✅ Même espacement et style que les inputs OTP
|
|
- ✅ Meilleure lisibilité et UX
|
|
|
|
## 📸 Différences visuelles
|
|
|
|
### Avant
|
|
- Inputs 2FA : Largeur flexible (trop large)
|
|
- Distribution : `justify-between` (étalés sur toute la largeur)
|
|
|
|
### Après
|
|
- Inputs 2FA : Largeur fixe de 3rem chacun
|
|
- Distribution : `justify-center` (centrés et groupés)
|
|
- Style identique aux inputs OTP pour cohérence
|