From 59b6c934c54ed5995061a41b2edaa635d465f49a Mon Sep 17 00:00:00 2001
From: Sebastian <sebasjm@gmail.com>
Date: Wed, 21 Feb 2024 14:28:44 -0300
Subject: fix #8453

---
 .../demobank-ui/src/pages/SolveChallengePage.tsx   | 88 ++++++++++------------
 1 file changed, 41 insertions(+), 47 deletions(-)

(limited to 'packages/demobank-ui/src/pages/SolveChallengePage.tsx')

diff --git a/packages/demobank-ui/src/pages/SolveChallengePage.tsx b/packages/demobank-ui/src/pages/SolveChallengePage.tsx
index c7cd7e660..5ac622795 100644
--- a/packages/demobank-ui/src/pages/SolveChallengePage.tsx
+++ b/packages/demobank-ui/src/pages/SolveChallengePage.tsx
@@ -35,7 +35,7 @@ import {
 } from "@gnu-taler/web-util/browser";
 import { format } from "date-fns";
 import { Fragment, VNode, h } from "preact";
-import { useState } from "preact/hooks";
+import { useEffect, useState } from "preact/hooks";
 import { ErrorLoadingWithDebug } from "../components/ErrorLoadingWithDebug.js";
 import { useBankCoreApiContext } from "../context/config.js";
 import { useWithdrawalDetails } from "../hooks/access.js";
@@ -92,6 +92,10 @@ export function SolveChallengePage({
         newCh.info = resp.body;
         updateBankState("currentChallenge", newCh);
       } else {
+        const newCh = structuredClone(ch);
+        newCh.sent = AbsoluteTime.now();
+        newCh.info = undefined;
+        updateBankState("currentChallenge", newCh);
         switch (resp.case) {
           case HttpStatusCode.NotFound:
             return notify({
@@ -262,7 +266,7 @@ export function SolveChallengePage({
             }}
           />
           {ch.info && (
-            <div class="mt-3 text-sm leading-6">
+            <div class="mt-2">
               <form
                 class="bg-white shadow-sm ring-1 ring-gray-900/5"
                 autoCapitalize="none"
@@ -271,7 +275,7 @@ export function SolveChallengePage({
                   e.preventDefault();
                 }}
               >
-                <div class="px-4 py-6 sm:p-8">
+                <div class="px-4 py-4">
                   <label for="withdraw-amount">
                     <i18n.Translate>Enter the confirmation code</i18n.Translate>
                   </label>
@@ -299,14 +303,8 @@ export function SolveChallengePage({
                     />
                   </div>
                 </div>
-                <div class="flex items-center justify-between gap-x-6 border-t border-gray-900/10 px-4 py-4 sm:px-8">
-                  <a
-                    href={routeClose.url({})}
-                    name="cancel"
-                    class="inline-flex items-center rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-500"
-                  >
-                    <i18n.Translate>Cancel</i18n.Translate>
-                  </a>
+                <div class="flex items-center justify-between border-gray-900/10 px-4 py-4 ">
+                 <div />
                   <button
                     type="submit"
                     name="confirm"
@@ -341,45 +339,16 @@ function ChallengeDetails({
   const { i18n, dateLocale } = useTranslationContext();
   const { config } = useBankCoreApiContext();
 
+  const firstTime = AbsoluteTime.isNever(challenge.sent)
+  useEffect(() => {
+    if (firstTime) {
+      onStart()
+    }
+  },[])
   return (
     <div class="px-4 mt-4 ">
       <div class="w-full">
-        <div class="flex justify-between">
-          <button
-            type="button"
-            name="cancel"
-            class="text-sm font-semibold leading-6 text-gray-900"
-            onClick={onCancel}
-          >
-            <i18n.Translate>Cancel</i18n.Translate>
-          </button>
-          {challenge.info ? (
-            <button
-              type="submit"
-              name="send again"
-              class="disabled:opacity-50 disabled:cursor-default cursor-pointer rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
-              onClick={(e) => {
-                onStart();
-                e.preventDefault();
-              }}
-            >
-              <i18n.Translate>Send again</i18n.Translate>
-            </button>
-          ) : (
-            <button
-              type="submit"
-              name="send code"
-              class="disabled:opacity-50 disabled:cursor-default cursor-pointer rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
-              onClick={(e) => {
-                onStart();
-                e.preventDefault();
-              }}
-            >
-              <i18n.Translate>Send code</i18n.Translate>
-            </button>
-          )}
-        </div>
-        <div class="mt-6 border-t border-gray-100">
+        <div class="border-gray-100">
           <h2 class="text-base font-semibold leading-7 text-gray-900">
             <span
               class="text-sm text-black font-semibold leading-6 "
@@ -588,6 +557,31 @@ function ChallengeDetails({
             )}
           </dl>
         </div>
+        <div class="mt-6 mb-4 flex justify-between">
+          <button
+            type="button"
+            name="cancel"
+            class="text-sm font-semibold leading-6 text-gray-900"
+            onClick={onCancel}
+          >
+            <i18n.Translate>Cancel</i18n.Translate>
+          </button>
+          {challenge.info ? (
+            <button
+              type="submit"
+              name="send again"
+              class="disabled:opacity-50 disabled:cursor-default cursor-pointer rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+              onClick={(e) => {
+                onStart();
+                e.preventDefault();
+              }}
+            >
+              <i18n.Translate>Send again</i18n.Translate>
+            </button>
+          ) : (
+            <div> sending code ...</div>
+          )}
+        </div>
       </div>
     </div>
   );
-- 
cgit v1.2.3