36 lines
1.6 KiB
TypeScript
36 lines
1.6 KiB
TypeScript
import { useState } from 'react'
|
|
import type { UnlockAccountModalProps } from './types'
|
|
import { UnlockAccountButtons } from './UnlockAccountButtons'
|
|
import { UnlockAccountForm } from './UnlockAccountForm'
|
|
import { useUnlockAccountController } from './useUnlockAccountController'
|
|
|
|
export function UnlockAccountModal(params: UnlockAccountModalProps): React.ReactElement {
|
|
const [words, setWords] = useState<string[]>(['', '', '', ''])
|
|
const [loading, setLoading] = useState(false)
|
|
const [error, setError] = useState<string | null>(null)
|
|
|
|
const controller = useUnlockAccountController({
|
|
words,
|
|
setWords,
|
|
setLoading,
|
|
setError,
|
|
onSuccess: params.onSuccess,
|
|
onClose: params.onClose,
|
|
})
|
|
|
|
return (
|
|
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
|
<div className="bg-white rounded-lg p-6 max-w-md w-full mx-4">
|
|
<h2 className="text-2xl font-bold mb-4">Déverrouiller votre compte</h2>
|
|
<p className="text-gray-600 mb-6">
|
|
Entrez vos 4 mots-clés de récupération (dictionnaire BIP39) pour déverrouiller votre compte. Ces mots déchiffrent la clé de chiffrement
|
|
(KEK) stockée dans l'API Credentials, qui déchiffre ensuite votre clé privée.
|
|
</p>
|
|
<UnlockAccountForm words={words} onWordChange={controller.handleWordChange} onPaste={controller.handlePaste} />
|
|
{error ? <p className="text-sm text-red-600 mb-4">{error}</p> : null}
|
|
<UnlockAccountButtons loading={loading} words={words} onUnlock={controller.handleUnlock} onClose={params.onClose} />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|