diff options
| -rw-r--r-- | packages/demobank-ui/src/pages/WithdrawalConfirmationQuestion.tsx | 24 |
1 files changed, 15 insertions, 9 deletions
diff --git a/packages/demobank-ui/src/pages/WithdrawalConfirmationQuestion.tsx b/packages/demobank-ui/src/pages/WithdrawalConfirmationQuestion.tsx index 9fdd8ad59..747e8c516 100644 --- a/packages/demobank-ui/src/pages/WithdrawalConfirmationQuestion.tsx +++ b/packages/demobank-ui/src/pages/WithdrawalConfirmationQuestion.tsx @@ -16,7 +16,7 @@ import { Logger } from "@gnu-taler/taler-util"; import { Fragment, h, VNode } from "preact"; -import { StateUpdater } from "preact/hooks"; +import { StateUpdater, useMemo, useState } from "preact/hooks"; import { useBackendContext } from "../context/backend.js"; import { PageStateType, usePageContext } from "../context/pageState.js"; import { @@ -36,11 +36,15 @@ export function WithdrawalConfirmationQuestion(): VNode { const { pageState, pageStateSetter } = usePageContext(); const backend = useBackendContext(); const { i18n } = useTranslationContext(); - const captchaNumbers = { - a: Math.floor(Math.random() * 10), - b: Math.floor(Math.random() * 10), - }; - let captchaAnswer = ""; + + const captchaNumbers = useMemo(() => { + return { + a: Math.floor(Math.random() * 10), + b: Math.floor(Math.random() * 10), + }; + }, [pageState.withdrawalId]); + + const [captchaAnswer, setCaptchaAnswer] = useState<string | undefined>(); return ( <Fragment> @@ -68,11 +72,12 @@ export function WithdrawalConfirmationQuestion(): VNode { <input name="answer" id="answer" + value={captchaAnswer ?? ""} type="text" autoFocus required onInput={(e): void => { - captchaAnswer = e.currentTarget.value; + setCaptchaAnswer(e.currentTarget.value); }} /> </p> @@ -86,7 +91,7 @@ export function WithdrawalConfirmationQuestion(): VNode { captchaAnswer == (captchaNumbers.a + captchaNumbers.b).toString() ) { - confirmWithdrawalCall( + await confirmWithdrawalCall( backend.state, pageState.withdrawalId, pageStateSetter, @@ -98,9 +103,10 @@ export function WithdrawalConfirmationQuestion(): VNode { ...prevState, error: { - title: i18n.str`Answer is wrong.`, + title: i18n.str`The answer "${captchaAnswer}" to "${captchaNumbers.a} + ${captchaNumbers.b}" is wrong.`, }, })); + setCaptchaAnswer(undefined); }} > {i18n.str`Confirm`} |