46 lines
1.6 KiB
TypeScript
46 lines
1.6 KiB
TypeScript
import { WordInputWithAutocomplete } from './WordInputWithAutocomplete'
|
|
|
|
export function UnlockAccountForm(params: {
|
|
words: string[]
|
|
onWordChange: (index: number, value: string) => void
|
|
onPaste: () => void
|
|
}): React.ReactElement {
|
|
return (
|
|
<div className="mb-4">
|
|
<WordInputsGrid words={params.words} onWordChange={params.onWordChange} />
|
|
<button
|
|
type="button"
|
|
onClick={params.onPaste}
|
|
className="mt-2 text-sm text-gray-600 hover:text-gray-800 underline"
|
|
>
|
|
Coller depuis le presse-papiers
|
|
</button>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function WordInputsGrid(params: { words: string[]; onWordChange: (index: number, value: string) => void }): React.ReactElement {
|
|
return (
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<WordInputSlot index={0} value={params.words[0] ?? ''} onWordChange={params.onWordChange} />
|
|
<WordInputSlot index={1} value={params.words[1] ?? ''} onWordChange={params.onWordChange} />
|
|
<WordInputSlot index={2} value={params.words[2] ?? ''} onWordChange={params.onWordChange} />
|
|
<WordInputSlot index={3} value={params.words[3] ?? ''} onWordChange={params.onWordChange} />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function WordInputSlot(params: { index: number; value: string; onWordChange: (index: number, value: string) => void }): React.ReactElement {
|
|
const onFocus = (): void => {}
|
|
const onBlur = (): void => {}
|
|
return (
|
|
<WordInputWithAutocomplete
|
|
index={params.index}
|
|
value={params.value}
|
|
onChange={(value) => params.onWordChange(params.index, value)}
|
|
onFocus={onFocus}
|
|
onBlur={onBlur}
|
|
/>
|
|
)
|
|
}
|