fix unhandled input

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`}