aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--packages/demobank-ui/src/pages/WithdrawalConfirmationQuestion.tsx24
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`}