**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
161 lines
3.8 KiB
TypeScript
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
|
|
)
|
|
}
|