story-research-zapwall/components/CreateAccountModal.tsx
Nicolas Cantu 6efefdf8a4 Separate account creation buttons into two distinct actions
**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
2025-12-28 21:31:20 +01:00

161 lines
3.8 KiB
TypeScript

import { useState } from 'react'
import { nostrAuthService } from '@/lib/nostrAuth'
import { RecoveryStep, ImportStep, ChooseStep } from './CreateAccountModalSteps'
interface CreateAccountModalProps {
onSuccess: (npub: string) => void
onClose: () => void
initialStep?: Step
}
type Step = 'choose' | 'import' | 'recovery'
async function createAccountWithKey(key?: string) {
return await nostrAuthService.createAccount(key)
}
async function handleAccountCreation(
key: string | undefined,
setLoading: (loading: boolean) => void,
setError: (error: string | null) => void,
setRecoveryPhrase: (phrase: string[]) => void,
setNpub: (npub: string) => void,
setStep: (step: Step) => void,
errorMessage: string
) {
if (key !== undefined && !key.trim()) {
setError('Please enter a private key')
return
}
setLoading(true)
setError(null)
try {
const result = await createAccountWithKey(key?.trim())
setRecoveryPhrase(result.recoveryPhrase)
setNpub(result.npub)
setStep('recovery')
} catch (e) {
setError(e instanceof Error ? e.message : errorMessage)
} finally {
setLoading(false)
}
}
function useAccountCreation(initialStep: Step = 'choose') {
const [step, setStep] = useState<Step>(initialStep)
const [importKey, setImportKey] = useState('')
const [loading, setLoading] = useState(false)
const [error, setError] = useState<string | null>(null)
const [recoveryPhrase, setRecoveryPhrase] = useState<string[]>([])
const [npub, setNpub] = useState('')
const handleGenerate = async () => {
await handleAccountCreation(undefined, setLoading, setError, setRecoveryPhrase, setNpub, setStep, 'Failed to create account')
}
const handleImport = async () => {
await handleAccountCreation(importKey, setLoading, setError, setRecoveryPhrase, setNpub, setStep, 'Failed to import key')
}
return {
step,
setStep,
importKey,
setImportKey,
loading,
error,
setError,
recoveryPhrase,
npub,
handleGenerate,
handleImport,
}
}
function handleImportBack(setStep: (step: Step) => void, setError: (error: string | null) => void, setImportKey: (key: string) => void) {
setStep('choose')
setError(null)
setImportKey('')
}
function renderStep(
step: Step,
recoveryPhrase: string[],
npub: string,
importKey: string,
setImportKey: (key: string) => void,
loading: boolean,
error: string | null,
handleContinue: () => void,
handleImport: () => void,
setStep: (step: Step) => void,
setError: (error: string | null) => void,
handleGenerate: () => void,
onClose: () => void
) {
if (step === 'recovery') {
return <RecoveryStep recoveryPhrase={recoveryPhrase} npub={npub} onContinue={handleContinue} />
}
if (step === 'import') {
return (
<ImportStep
importKey={importKey}
setImportKey={setImportKey}
loading={loading}
error={error}
onImport={handleImport}
onBack={() => handleImportBack(setStep, setError, setImportKey)}
/>
)
}
return (
<ChooseStep
loading={loading}
error={error}
onGenerate={handleGenerate}
onImport={() => setStep('import')}
onClose={onClose}
/>
)
}
export function CreateAccountModal({ onSuccess, onClose, initialStep = 'choose' }: CreateAccountModalProps) {
const {
step,
setStep,
importKey,
setImportKey,
loading,
error,
setError,
recoveryPhrase,
npub,
handleGenerate,
handleImport,
} = useAccountCreation(initialStep)
const handleContinue = () => {
onSuccess(npub)
onClose()
}
return renderStep(
step,
recoveryPhrase,
npub,
importKey,
setImportKey,
loading,
error,
handleContinue,
handleImport,
setStep,
setError,
handleGenerate,
onClose
)
}