From 6efefdf8a462d65b69831ff63ac644badc417ecb Mon Sep 17 00:00:00 2001 From: Nicolas Cantu Date: Sun, 28 Dec 2025 21:31:20 +0100 Subject: [PATCH] Separate account creation buttons into two distinct actions MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit **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 --- components/AuthorPresentationEditor.tsx | 57 +++++++++++++++---- components/CreateAccountModal.tsx | 9 +-- .../account-creation-buttons-separation.md | 53 +++++++++++++++++ 3 files changed, 103 insertions(+), 16 deletions(-) create mode 100644 features/account-creation-buttons-separation.md diff --git a/components/AuthorPresentationEditor.tsx b/components/AuthorPresentationEditor.tsx index f97f4c7..eb08b37 100644 --- a/components/AuthorPresentationEditor.tsx +++ b/components/AuthorPresentationEditor.tsx @@ -193,8 +193,44 @@ function useAuthorPresentationState(pubkey: string | null) { return { loading, error, success, draft, setDraft, validationError, handleSubmit } } +function NoAccountActionButtons({ + onGenerate, + onImport, +}: { + onGenerate: () => void + onImport: () => void +}) { + return ( +
+ + +
+ ) +} + function NoAccountView() { const [showCreateModal, setShowCreateModal] = useState(false) + const [modalStep, setModalStep] = useState<'choose' | 'import'>('choose') + + const handleOpenModal = (step: 'choose' | 'import') => { + setModalStep(step) + setShowCreateModal(true) + } + + const handleModalClose = () => { + setShowCreateModal(false) + setModalStep('choose') + } return (
@@ -202,16 +238,15 @@ function NoAccountView() {

Créez un compte ou importez votre clé secrète pour commencer

- + handleOpenModal('choose')} + onImport={() => handleOpenModal('import')} + /> {showCreateModal && ( setShowCreateModal(false)} - onClose={() => setShowCreateModal(false)} + onSuccess={handleModalClose} + onClose={handleModalClose} + initialStep={modalStep} /> )}
@@ -221,11 +256,9 @@ function NoAccountView() { function AuthorPresentationFormView({ pubkey, - connected, profile, }: { pubkey: string | null - connected: boolean profile: { name?: string; pubkey: string } | null }) { const state = useAuthorPresentationState(pubkey) @@ -262,7 +295,7 @@ function useAutoLoadPubkey(accountExists: boolean | null, pubkey: string | null, } export function AuthorPresentationEditor() { - const { connected, pubkey, profile, accountExists, connect } = useNostrAuth() + const { pubkey, profile, accountExists, connect } = useNostrAuth() useAutoLoadPubkey(accountExists, pubkey ?? null, connect) - return + return } diff --git a/components/CreateAccountModal.tsx b/components/CreateAccountModal.tsx index fcab9cd..bda9618 100644 --- a/components/CreateAccountModal.tsx +++ b/components/CreateAccountModal.tsx @@ -5,6 +5,7 @@ import { RecoveryStep, ImportStep, ChooseStep } from './CreateAccountModalSteps' interface CreateAccountModalProps { onSuccess: (npub: string) => void onClose: () => void + initialStep?: Step } type Step = 'choose' | 'import' | 'recovery' @@ -41,8 +42,8 @@ async function handleAccountCreation( } } -function useAccountCreation() { - const [step, setStep] = useState('choose') +function useAccountCreation(initialStep: Step = 'choose') { + const [step, setStep] = useState(initialStep) const [importKey, setImportKey] = useState('') const [loading, setLoading] = useState(false) const [error, setError] = useState(null) @@ -121,7 +122,7 @@ function renderStep( ) } -export function CreateAccountModal({ onSuccess, onClose }: CreateAccountModalProps) { +export function CreateAccountModal({ onSuccess, onClose, initialStep = 'choose' }: CreateAccountModalProps) { const { step, setStep, @@ -134,7 +135,7 @@ export function CreateAccountModal({ onSuccess, onClose }: CreateAccountModalPro npub, handleGenerate, handleImport, - } = useAccountCreation() + } = useAccountCreation(initialStep) const handleContinue = () => { onSuccess(npub) diff --git a/features/account-creation-buttons-separation.md b/features/account-creation-buttons-separation.md new file mode 100644 index 0000000..aaf9718 --- /dev/null +++ b/features/account-creation-buttons-separation.md @@ -0,0 +1,53 @@ +# 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 +