381 lines
11 KiB
TypeScript
381 lines
11 KiB
TypeScript
import { useState, useCallback, useEffect, type FormEvent } from 'react'
|
|
import { useNostrAuth } from '@/hooks/useNostrAuth'
|
|
import { useAuthorPresentation } from '@/hooks/useAuthorPresentation'
|
|
import { ArticleField } from './ArticleField'
|
|
import { ArticleFormButtons } from './ArticleFormButtons'
|
|
import { CreateAccountModal } from './CreateAccountModal'
|
|
import { RecoveryStep } from './CreateAccountModalSteps'
|
|
import { UnlockAccountModal } from './UnlockAccountModal'
|
|
import { ImageUploadField } from './ImageUploadField'
|
|
import { PresentationFormHeader } from './PresentationFormHeader'
|
|
import { t } from '@/lib/i18n'
|
|
|
|
interface AuthorPresentationDraft {
|
|
authorName: string
|
|
presentation: string
|
|
contentDescription: string
|
|
mainnetAddress: string
|
|
pictureUrl?: string
|
|
}
|
|
|
|
const ADDRESS_PATTERN = /^(1|3|bc1)[a-zA-Z0-9]{25,62}$/
|
|
|
|
function SuccessNotice() {
|
|
return (
|
|
<div className="border border-neon-green/50 rounded-lg p-6 bg-neon-green/10">
|
|
<h3 className="text-lg font-semibold text-neon-green mb-2">{t('presentation.success')}</h3>
|
|
<p className="text-cyber-accent">
|
|
{t('presentation.successMessage')}
|
|
</p>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function ValidationError({ message }: { message: string | null }) {
|
|
if (!message) {
|
|
return null
|
|
}
|
|
return (
|
|
<div className="bg-red-500/10 border border-red-500/50 rounded-lg p-3">
|
|
<p className="text-sm text-red-400">{message}</p>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function PresentationField({
|
|
draft,
|
|
onChange,
|
|
}: {
|
|
draft: AuthorPresentationDraft
|
|
onChange: (next: AuthorPresentationDraft) => void
|
|
}) {
|
|
return (
|
|
<ArticleField
|
|
id="presentation"
|
|
label={t('presentation.field.presentation')}
|
|
value={draft.presentation}
|
|
onChange={(value) => onChange({ ...draft, presentation: value as string })}
|
|
required
|
|
type="textarea"
|
|
rows={6}
|
|
placeholder={t('presentation.field.presentation.placeholder')}
|
|
helpText={t('presentation.field.presentation.help')}
|
|
/>
|
|
)
|
|
}
|
|
|
|
function ContentDescriptionField({
|
|
draft,
|
|
onChange,
|
|
}: {
|
|
draft: AuthorPresentationDraft
|
|
onChange: (next: AuthorPresentationDraft) => void
|
|
}) {
|
|
return (
|
|
<ArticleField
|
|
id="contentDescription"
|
|
label={t('presentation.field.contentDescription')}
|
|
value={draft.contentDescription}
|
|
onChange={(value) => onChange({ ...draft, contentDescription: value as string })}
|
|
required
|
|
type="textarea"
|
|
rows={6}
|
|
placeholder={t('presentation.field.contentDescription.placeholder')}
|
|
helpText={t('presentation.field.contentDescription.help')}
|
|
/>
|
|
)
|
|
}
|
|
|
|
function MainnetAddressField({
|
|
draft,
|
|
onChange,
|
|
}: {
|
|
draft: AuthorPresentationDraft
|
|
onChange: (next: AuthorPresentationDraft) => void
|
|
}) {
|
|
return (
|
|
<ArticleField
|
|
id="mainnetAddress"
|
|
label={t('presentation.field.mainnetAddress')}
|
|
value={draft.mainnetAddress}
|
|
onChange={(value) => onChange({ ...draft, mainnetAddress: value as string })}
|
|
required
|
|
type="text"
|
|
placeholder={t('presentation.field.mainnetAddress.placeholder')}
|
|
helpText={t('presentation.field.mainnetAddress.help')}
|
|
/>
|
|
)
|
|
}
|
|
|
|
function AuthorNameField({
|
|
draft,
|
|
onChange,
|
|
}: {
|
|
draft: AuthorPresentationDraft
|
|
onChange: (next: AuthorPresentationDraft) => void
|
|
}) {
|
|
return (
|
|
<ArticleField
|
|
id="authorName"
|
|
label={t('presentation.field.authorName')}
|
|
value={draft.authorName}
|
|
onChange={(value) => onChange({ ...draft, authorName: value as string })}
|
|
required
|
|
type="text"
|
|
placeholder={t('presentation.field.authorName.placeholder')}
|
|
helpText={t('presentation.field.authorName.help')}
|
|
/>
|
|
)
|
|
}
|
|
|
|
function PictureField({
|
|
draft,
|
|
onChange,
|
|
}: {
|
|
draft: AuthorPresentationDraft
|
|
onChange: (next: AuthorPresentationDraft) => void
|
|
}) {
|
|
return (
|
|
<ImageUploadField
|
|
id="picture"
|
|
value={draft.pictureUrl}
|
|
onChange={(url) => onChange({ ...draft, pictureUrl: url })}
|
|
/>
|
|
)
|
|
}
|
|
|
|
const PresentationFields = ({
|
|
draft,
|
|
onChange,
|
|
}: {
|
|
draft: AuthorPresentationDraft
|
|
onChange: (next: AuthorPresentationDraft) => void
|
|
}) => (
|
|
<div className="space-y-4">
|
|
<AuthorNameField draft={draft} onChange={onChange} />
|
|
<PictureField draft={draft} onChange={onChange} />
|
|
<PresentationField draft={draft} onChange={onChange} />
|
|
<ContentDescriptionField draft={draft} onChange={onChange} />
|
|
<MainnetAddressField draft={draft} onChange={onChange} />
|
|
</div>
|
|
)
|
|
|
|
function PresentationForm({
|
|
draft,
|
|
setDraft,
|
|
validationError,
|
|
error,
|
|
loading,
|
|
handleSubmit,
|
|
userName,
|
|
}: {
|
|
draft: AuthorPresentationDraft
|
|
setDraft: (next: AuthorPresentationDraft) => void
|
|
validationError: string | null
|
|
error: string | null
|
|
loading: boolean
|
|
handleSubmit: (e: FormEvent<HTMLFormElement>) => Promise<void>
|
|
userName: string
|
|
}) {
|
|
return (
|
|
<form
|
|
onSubmit={(e: FormEvent<HTMLFormElement>) => {
|
|
void handleSubmit(e)
|
|
}}
|
|
className="border border-neon-cyan/20 rounded-lg p-6 bg-cyber-dark space-y-4"
|
|
>
|
|
<PresentationFormHeader userName={userName} />
|
|
<PresentationFields draft={draft} onChange={setDraft} />
|
|
<ValidationError message={validationError ?? error} />
|
|
<ArticleFormButtons loading={loading} />
|
|
</form>
|
|
)
|
|
}
|
|
|
|
function useAuthorPresentationState(pubkey: string | null, existingAuthorName?: string) {
|
|
const { loading, error, success, publishPresentation } = useAuthorPresentation(pubkey)
|
|
const [draft, setDraft] = useState<AuthorPresentationDraft>({
|
|
authorName: existingAuthorName ?? '',
|
|
presentation: '',
|
|
contentDescription: '',
|
|
mainnetAddress: '',
|
|
})
|
|
const [validationError, setValidationError] = useState<string | null>(null)
|
|
|
|
// Update authorName when profile changes
|
|
useEffect(() => {
|
|
if (existingAuthorName && existingAuthorName !== draft.authorName) {
|
|
setDraft((prev) => ({ ...prev, authorName: existingAuthorName }))
|
|
}
|
|
}, [existingAuthorName])
|
|
|
|
const handleSubmit = useCallback(
|
|
async (e: FormEvent<HTMLFormElement>) => {
|
|
e.preventDefault()
|
|
const address = draft.mainnetAddress.trim()
|
|
if (!ADDRESS_PATTERN.test(address)) {
|
|
setValidationError(t('presentation.validation.invalidAddress'))
|
|
return
|
|
}
|
|
if (!draft.authorName.trim()) {
|
|
setValidationError('Author name is required')
|
|
return
|
|
}
|
|
setValidationError(null)
|
|
await publishPresentation(draft)
|
|
},
|
|
[draft, publishPresentation]
|
|
)
|
|
|
|
return { loading, error, success, draft, setDraft, validationError, handleSubmit }
|
|
}
|
|
|
|
function NoAccountActionButtons({
|
|
onGenerate,
|
|
onImport,
|
|
}: {
|
|
onGenerate: () => void
|
|
onImport: () => void
|
|
}) {
|
|
return (
|
|
<div className="flex flex-col gap-3 w-full max-w-xs">
|
|
<button
|
|
onClick={onGenerate}
|
|
className="px-6 py-2 bg-neon-cyan/20 hover:bg-neon-cyan/30 text-neon-cyan rounded-lg font-medium transition-all border border-neon-cyan/50 hover:shadow-glow-cyan"
|
|
>
|
|
Générer un nouveau compte
|
|
</button>
|
|
<button
|
|
onClick={onImport}
|
|
className="px-6 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg font-medium transition-colors"
|
|
>
|
|
Importer une clé existante
|
|
</button>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function NoAccountView() {
|
|
const [showImportModal, setShowImportModal] = useState(false)
|
|
const [showRecoveryStep, setShowRecoveryStep] = useState(false)
|
|
const [showUnlockModal, setShowUnlockModal] = useState(false)
|
|
const [recoveryPhrase, setRecoveryPhrase] = useState<string[]>([])
|
|
const [npub, setNpub] = useState('')
|
|
const [generating, setGenerating] = useState(false)
|
|
const [error, setError] = useState<string | null>(null)
|
|
|
|
const handleGenerate = async () => {
|
|
setGenerating(true)
|
|
setError(null)
|
|
try {
|
|
const { nostrAuthService } = await import('@/lib/nostrAuth')
|
|
const result = await nostrAuthService.createAccount()
|
|
setRecoveryPhrase(result.recoveryPhrase)
|
|
setNpub(result.npub)
|
|
setShowRecoveryStep(true)
|
|
} catch (e) {
|
|
setError(e instanceof Error ? e.message : 'Failed to create account')
|
|
} finally {
|
|
setGenerating(false)
|
|
}
|
|
}
|
|
|
|
const handleRecoveryContinue = () => {
|
|
setShowRecoveryStep(false)
|
|
setShowUnlockModal(true)
|
|
}
|
|
|
|
const handleUnlockSuccess = () => {
|
|
setShowUnlockModal(false)
|
|
setRecoveryPhrase([])
|
|
setNpub('')
|
|
}
|
|
|
|
return (
|
|
<div className="border border-neon-cyan/20 rounded-lg p-6 bg-cyber-dark/50">
|
|
<div className="flex flex-col items-center gap-4">
|
|
<p className="text-center text-cyber-accent mb-2">
|
|
Créez un compte ou importez votre clé secrète pour commencer
|
|
</p>
|
|
{error && <p className="text-sm text-red-400">{error}</p>}
|
|
<NoAccountActionButtons
|
|
onGenerate={handleGenerate}
|
|
onImport={() => setShowImportModal(true)}
|
|
/>
|
|
{generating && (
|
|
<p className="text-cyber-accent text-sm">Génération du compte...</p>
|
|
)}
|
|
{showImportModal && (
|
|
<CreateAccountModal
|
|
onSuccess={() => {
|
|
setShowImportModal(false)
|
|
setShowUnlockModal(true)
|
|
}}
|
|
onClose={() => setShowImportModal(false)}
|
|
initialStep="import"
|
|
/>
|
|
)}
|
|
{showRecoveryStep && (
|
|
<RecoveryStep
|
|
recoveryPhrase={recoveryPhrase}
|
|
npub={npub}
|
|
onContinue={handleRecoveryContinue}
|
|
/>
|
|
)}
|
|
{showUnlockModal && (
|
|
<UnlockAccountModal
|
|
onSuccess={handleUnlockSuccess}
|
|
onClose={() => setShowUnlockModal(false)}
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function AuthorPresentationFormView({
|
|
pubkey,
|
|
profile,
|
|
}: {
|
|
pubkey: string | null
|
|
profile: { name?: string; pubkey: string } | null
|
|
}) {
|
|
const state = useAuthorPresentationState(pubkey, profile?.name)
|
|
|
|
if (!pubkey) {
|
|
return <NoAccountView />
|
|
}
|
|
if (state.success) {
|
|
return <SuccessNotice />
|
|
}
|
|
|
|
// Get user name or fallback to shortened pubkey
|
|
const userName = profile?.name ?? (pubkey ? `${pubkey.substring(0, 16)}...` : t('presentation.fallback.user'))
|
|
|
|
return (
|
|
<PresentationForm
|
|
draft={state.draft}
|
|
setDraft={state.setDraft}
|
|
validationError={state.validationError}
|
|
error={state.error}
|
|
loading={state.loading}
|
|
handleSubmit={state.handleSubmit}
|
|
userName={userName}
|
|
/>
|
|
)
|
|
}
|
|
|
|
function useAutoLoadPubkey(accountExists: boolean | null, pubkey: string | null, connect: () => Promise<void>) {
|
|
useEffect(() => {
|
|
if (accountExists === true && !pubkey) {
|
|
void connect()
|
|
}
|
|
}, [accountExists, pubkey, connect])
|
|
}
|
|
|
|
export function AuthorPresentationEditor() {
|
|
const { pubkey, profile, accountExists, connect } = useNostrAuth()
|
|
useAutoLoadPubkey(accountExists, pubkey ?? null, connect)
|
|
return <AuthorPresentationFormView pubkey={pubkey ?? null} profile={profile} />
|
|
}
|