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 ++++++++++------------
 .../src/pages/account/UpdateAccountPassword.tsx    | 67 ++++++++--------
 .../demobank-ui/src/pages/admin/AccountForm.tsx    | 44 +++++------
 .../demobank-ui/src/pages/admin/AccountList.tsx    |  2 +-
 .../src/pages/admin/CreateNewAccount.tsx           |  4 +-
 5 files changed, 101 insertions(+), 104 deletions(-)

(limited to 'packages/demobank-ui/src')

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>
   );
diff --git a/packages/demobank-ui/src/pages/account/UpdateAccountPassword.tsx b/packages/demobank-ui/src/pages/account/UpdateAccountPassword.tsx
index 0e04ae088..d15420b84 100644
--- a/packages/demobank-ui/src/pages/account/UpdateAccountPassword.tsx
+++ b/packages/demobank-ui/src/pages/account/UpdateAccountPassword.tsx
@@ -172,6 +172,40 @@ export function UpdateAccountPassword({
         >
           <div class="px-4 py-6 sm:p-8">
             <div class="grid max-w-2xl grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
+            {accountIsTheCurrentUser ? (
+                <div class="sm:col-span-5">
+                  <label
+                    class="block text-sm font-medium leading-6 text-gray-900"
+                    for="password"
+                  >
+                    {i18n.str`Current password`}
+                  </label>
+                  <div class="mt-2">
+                    <input
+                      type="password"
+                      class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 data-[error=true]:ring-red-500 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                      name="current"
+                      id="current-password"
+                      data-error={!!errors?.current && current !== undefined}
+                      value={current ?? ""}
+                      onChange={(e) => {
+                        setCurrent(e.currentTarget.value);
+                      }}
+                      autocomplete="off"
+                    />
+                    <ShowInputErrorLabel
+                      message={errors?.current}
+                      isDirty={current !== undefined}
+                    />
+                  </div>
+                  <p class="mt-2 text-sm text-gray-500">
+                    <i18n.Translate>
+                      Your current password, for security
+                    </i18n.Translate>
+                  </p>
+                </div>
+              ) : undefined}
+              
               <div class="sm:col-span-5">
                 <label
                   class="block text-sm font-medium leading-6 text-gray-900"
@@ -231,39 +265,6 @@ export function UpdateAccountPassword({
                 </p>
               </div>
 
-              {accountIsTheCurrentUser ? (
-                <div class="sm:col-span-5">
-                  <label
-                    class="block text-sm font-medium leading-6 text-gray-900"
-                    for="password"
-                  >
-                    {i18n.str`Current password`}
-                  </label>
-                  <div class="mt-2">
-                    <input
-                      type="password"
-                      class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 data-[error=true]:ring-red-500 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
-                      name="current"
-                      id="current-password"
-                      data-error={!!errors?.current && current !== undefined}
-                      value={current ?? ""}
-                      onChange={(e) => {
-                        setCurrent(e.currentTarget.value);
-                      }}
-                      autocomplete="off"
-                    />
-                    <ShowInputErrorLabel
-                      message={errors?.current}
-                      isDirty={current !== undefined}
-                    />
-                  </div>
-                  <p class="mt-2 text-sm text-gray-500">
-                    <i18n.Translate>
-                      Your current password, for security
-                    </i18n.Translate>
-                  </p>
-                </div>
-              ) : undefined}
             </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">
diff --git a/packages/demobank-ui/src/pages/admin/AccountForm.tsx b/packages/demobank-ui/src/pages/admin/AccountForm.tsx
index de30d473d..c63d602b7 100644
--- a/packages/demobank-ui/src/pages/admin/AccountForm.tsx
+++ b/packages/demobank-ui/src/pages/admin/AccountForm.tsx
@@ -370,27 +370,29 @@ export function AccountForm<PurposeType extends keyof ChangeByPurposeType>({
             </p>
           </div>
 
-          <TextField
-            id="internal-account"
-            label={i18n.str`Internal account`}
-            help={
-              purpose === "create"
-                ? i18n.str`If empty a random account id will be assigned`
-                : i18n.str`Share this id to receive bank transfers`
-            }
-
-            error={errors?.payto_uri}
-            onChange={(e) => {
-              form.payto_uri = e as PaytoString;
-              updateForm(structuredClone(form));
-            }}
-            rightIcons={<CopyButton
-              class="p-2 rounded-full  text-black shadow-sm  focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 "
-              getContent={() => form.payto_uri ?? defaultValue.payto_uri ?? ""}
-            />}
-            value={(form.payto_uri ?? defaultValue.payto_uri) as PaytoString}
-            disabled={!editableAccount}
-          />
+          {purpose === "create" ? undefined :
+            <TextField
+              id="internal-account"
+              label={i18n.str`Internal account`}
+              help={
+                purpose === "create"
+                  ? i18n.str`If empty a random account id will be assigned`
+                  : i18n.str`Share this id to receive bank transfers`
+              }
+
+              error={errors?.payto_uri}
+              onChange={(e) => {
+                form.payto_uri = e as PaytoString;
+                updateForm(structuredClone(form));
+              }}
+              rightIcons={<CopyButton
+                class="p-2 rounded-full  text-black shadow-sm  focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 "
+                getContent={() => form.payto_uri ?? defaultValue.payto_uri ?? ""}
+              />}
+              value={(form.payto_uri ?? defaultValue.payto_uri) as PaytoString}
+              disabled={!editableAccount}
+            />
+          }
 
           <div class="sm:col-span-5">
             <label
diff --git a/packages/demobank-ui/src/pages/admin/AccountList.tsx b/packages/demobank-ui/src/pages/admin/AccountList.tsx
index 4e3f4afe3..36e417171 100644
--- a/packages/demobank-ui/src/pages/admin/AccountList.tsx
+++ b/packages/demobank-ui/src/pages/admin/AccountList.tsx
@@ -74,7 +74,7 @@ export function AccountList({
             </h1>
             <p class="mt-2 text-sm text-gray-700">
               <i18n.Translate>
-                A list of all business account in the bank.
+                A list of all bank accounts.
               </i18n.Translate>
             </p>
           </div>
diff --git a/packages/demobank-ui/src/pages/admin/CreateNewAccount.tsx b/packages/demobank-ui/src/pages/admin/CreateNewAccount.tsx
index 8773df50a..6b4307417 100644
--- a/packages/demobank-ui/src/pages/admin/CreateNewAccount.tsx
+++ b/packages/demobank-ui/src/pages/admin/CreateNewAccount.tsx
@@ -70,7 +70,7 @@ export function CreateNewAccount({
       const resp = await api.createAccount(token, submitAccount);
       if (resp.type === "ok") {
         notifyInfo(
-          i18n.str`Account created with password "${submitAccount.password}". The user must change the password on the next login.`,
+          i18n.str`Account created with password "${submitAccount.password}".`,
         );
         onCreateSuccess();
       } else {
@@ -179,7 +179,7 @@ export function CreateNewAccount({
 
       <div class="px-4 sm:px-0">
         <h2 class="text-base font-semibold leading-7 text-gray-900">
-          <i18n.Translate>New business account</i18n.Translate>
+          <i18n.Translate>New bank account</i18n.Translate>
         </h2>
       </div>
       <AccountForm
-- 
cgit v1.2.3