fix #8522

1 files changed, 48 insertions, 4 deletions

diff --git a/packages/bank-ui/src/pages/SolveChallengePage.tsx b/packages/bank-ui/src/pages/SolveChallengePage.tsx
index 528cc12df..592379dfa 100644
--- a/packages/bank-ui/src/pages/SolveChallengePage.tsx
+++ b/packages/bank-ui/src/pages/SolveChallengePage.tsx
@@ -49,6 +49,8 @@ import { undefinedIfEmpty } from "../utils.js";
 import { RenderAmount } from "./PaytoWireTransferForm.js";
 import { OperationNotFound } from "./WithdrawalQRCode.js";
 
+const TAN_PREFIX = "T-";
+const TAN_REGEX = /^([Tt](-)?)?[0-9]*$/;
 export function SolveChallengePage({
   onChallengeCompleted,
   routeClose,
@@ -82,7 +84,11 @@ export function SolveChallengePage({
 
   const ch = bankState.currentChallenge;
   const errors = undefinedIfEmpty({
-    code: !code ? i18n.str`Required` : undefined,
+    code: !code
+      ? i18n.str`Required`
+      : !TAN_REGEX.test(code)
+        ? i18n.str`Confirmation codes are numerical, possibly beginning with 'T-.'`
+        : undefined,
   });
 
   async function startChallenge() {
@@ -133,11 +139,12 @@ export function SolveChallengePage({
 
   async function completeChallenge() {
     if (!creds || !code) return;
+    const tan = code.toUpperCase().startsWith(TAN_PREFIX)
+      ? code.substring(TAN_PREFIX.length)
+      : code;
     await handleError(async () => {
       {
-        const resp = await api.confirmChallenge(creds, ch.id, {
-          tan: code,
-        });
+        const resp = await api.confirmChallenge(creds, ch.id, { tan });
         if (resp.type === "fail") {
           setCode("");
           switch (resp.case) {
@@ -303,6 +310,17 @@ export function SolveChallengePage({
                         class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
                         value={code ?? ""}
                         required
+                        onPaste={(e) => {
+                          e.preventDefault();
+                          const pasted = e.clipboardData?.getData("text/plain");
+                          if (!pasted) return;
+                          if (pasted.toUpperCase().startsWith(TAN_PREFIX)) {
+                            const sub = pasted.substring(TAN_PREFIX.length);
+                            setCode(sub);
+                            return;
+                          }
+                          setCode(pasted);
+                        }}
                         name="answer"
                         id="answer"
                         autocomplete="off"
@@ -316,6 +334,32 @@ export function SolveChallengePage({
                       isDirty={code !== undefined}
                     />
                   </div>
+                  <p class="mt-2 text-sm text-gray-500">
+                    {((ch: TalerCorebankApi.TanChannel): VNode => {
+                      switch (ch) {
+                        case TalerCorebankApi.TanChannel.SMS:
+                          return (
+                            <i18n.Translate>
+                              You should have received a code in your phone.
+                            </i18n.Translate>
+                          );
+                        case TalerCorebankApi.TanChannel.EMAIL:
+                          return (
+                            <i18n.Translate>
+                              You should have received a code in your email.
+                            </i18n.Translate>
+                          );
+                        default:
+                          assertUnreachable(ch);
+                      }
+                    })(ch.info.tan_channel)}
+                  </p>
+                  <p class="mt-2 text-sm text-gray-500">
+                    <i18n.Translate>
+                      The confirmation code starts with "{TAN_PREFIX}" followed
+                      by numbers.
+                    </i18n.Translate>
+                  </p>
                 </div>
                 <div class="flex items-center justify-between border-gray-900/10 px-4 py-4 ">
                   <div />