Nicolas Cantu
6efefdf8a4
**Motivations:** - Improve UI clarity by displaying two distinct buttons instead of one combined button - Reduce the number of clicks needed to access the import functionality - Allow users to directly choose their desired action without an intermediate step **Evolutions:** - Added optional 'initialStep' prop to CreateAccountModal to initialize modal at 'import' or 'choose' step - Refactored NoAccountView to display two separate buttons: 'Générer un nouveau compte' and 'Importer une clé existante' - Extracted buttons into separate NoAccountActionButtons component to respect function line limit - Removed unused 'connected' parameter from AuthorPresentationFormView **Pages affectées:** - components/CreateAccountModal.tsx - components/AuthorPresentationEditor.tsx - features/account-creation-buttons-separation.md
54 lines
2.4 KiB
Markdown
54 lines
2.4 KiB
Markdown
# Account Creation Buttons Separation
|
|
|
|
**Date**: December 2024
|
|
**Auteur**: Équipe 4NK
|
|
|
|
## Objectif
|
|
|
|
Remplacer le bouton unique "Créer un compte ou importer une clé" par deux boutons distincts "Générer un nouveau compte" et "Importer une clé existante" pour améliorer la clarté de l'interface utilisateur.
|
|
|
|
## Motivations
|
|
|
|
- Améliorer la clarté de l'interface utilisateur
|
|
- Permettre aux utilisateurs de choisir directement l'action souhaitée sans étape intermédiaire
|
|
- Réduire le nombre de clics nécessaires pour accéder à la fonctionnalité d'import
|
|
|
|
## Modifications
|
|
|
|
### Composants modifiés
|
|
|
|
1. **components/CreateAccountModal.tsx** :
|
|
- Ajout d'une prop optionnelle `initialStep` pour permettre d'initialiser la modal directement au step 'import' ou 'choose'
|
|
- Modification du hook `useAccountCreation` pour accepter un paramètre `initialStep` avec valeur par défaut 'choose'
|
|
|
|
2. **components/AuthorPresentationEditor.tsx** :
|
|
- Refactorisation du composant `NoAccountView` pour afficher deux boutons distincts
|
|
- Extraction des boutons dans un composant séparé `NoAccountActionButtons` pour respecter la limite de lignes de fonction (max-lines-per-function)
|
|
- Ajout de la gestion d'état pour déterminer quel step de la modal afficher
|
|
- Suppression du paramètre `connected` inutilisé dans `AuthorPresentationFormView`
|
|
|
|
### Structure du code
|
|
|
|
- `NoAccountActionButtons` : Composant réutilisable pour les boutons d'action
|
|
- `NoAccountView` : Gère l'état de la modal et détermine quel step afficher
|
|
|
|
## Modalités de déploiement
|
|
|
|
Aucun déploiement spécial nécessaire. Les modifications sont purement frontend et seront déployées avec la prochaine version de l'application.
|
|
|
|
## Modalités d'analyse
|
|
|
|
### Vérifications à effectuer
|
|
|
|
1. Tester que le bouton "Générer un nouveau compte" ouvre la modal avec le step 'choose'
|
|
2. Tester que le bouton "Importer une clé existante" ouvre directement la modal avec le step 'import'
|
|
3. Vérifier que le comportement de la modal reste inchangé une fois ouverte
|
|
4. Vérifier que les autres usages de `CreateAccountModal` (dans `ConnectButton.tsx`) fonctionnent correctement avec la prop optionnelle
|
|
|
|
### Points d'attention
|
|
|
|
- La prop `initialStep` est optionnelle et rétrocompatible
|
|
- Le composant `NoAccountActionButtons` respecte la limite de lignes de fonction
|
|
- La fonction `NoAccountView` respecte la limite de 40 lignes après refactorisation
|
|
|