story-research-zapwall/features/account-creation-buttons-separation.md

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