fix missing ShouldBeSameUser

3 files changed, 43 insertions, 115 deletions

diff --git a/packages/demobank-ui/src/pages/OperationState/index.ts b/packages/demobank-ui/src/pages/OperationState/index.ts
index 0776bbed5..15b4efaac 100644
--- a/packages/demobank-ui/src/pages/OperationState/index.ts
+++ b/packages/demobank-ui/src/pages/OperationState/index.ts
@@ -83,6 +83,7 @@ export namespace State {
   }
   export interface NeedConfirmation {
     status: "need-confirmation",
+    account: string,
     onAbort: undefined | (() => Promise<TalerCoreBankErrorsByMethod<"abortWithdrawalById"> | undefined>);
     onConfirm: undefined | (() => Promise<TalerCoreBankErrorsByMethod<"confirmWithdrawalById"> | undefined>);
     error: undefined;
diff --git a/packages/demobank-ui/src/pages/OperationState/state.ts b/packages/demobank-ui/src/pages/OperationState/state.ts
index 57ede87a7..defca6f13 100644
--- a/packages/demobank-ui/src/pages/OperationState/state.ts
+++ b/packages/demobank-ui/src/pages/OperationState/state.ts
@@ -211,6 +211,7 @@ export function useComponentState({ currency, onClose }: Props): utils.Recursive
     return {
       status: "need-confirmation",
       error: undefined,
+      account: data.username,
       onAbort: !creds ? undefined : doAbort,
       busy: !!busy,
       onConfirm: !creds ? undefined : doConfirm
diff --git a/packages/demobank-ui/src/pages/OperationState/views.tsx b/packages/demobank-ui/src/pages/OperationState/views.tsx
index a3b30c179..b1f09ba2a 100644
--- a/packages/demobank-ui/src/pages/OperationState/views.tsx
+++ b/packages/demobank-ui/src/pages/OperationState/views.tsx
@@ -15,18 +15,15 @@
  */
 
 import { TranslatedString, stringifyWithdrawUri } from "@gnu-taler/taler-util";
-import { notifyInfo, useLocalNotification, useTranslationContext } from "@gnu-taler/web-util/browser";
+import { Attention, LocalNotificationBanner, ShowInputErrorLabel, notifyInfo, useLocalNotification, useTranslationContext } from "@gnu-taler/web-util/browser";
 import { Fragment, VNode, h } from "preact";
 import { useEffect, useMemo, useState } from "preact/hooks";
 import { QR } from "../../components/QR.js";
-import { ShowInputErrorLabel } from "@gnu-taler/web-util/browser";
 import { usePreferences } from "../../hooks/preferences.js";
 import { undefinedIfEmpty } from "../../utils.js";
-import { State } from "./index.js";
-import { LocalNotificationBanner } from "@gnu-taler/web-util/browser";
-import { ErrorLoading } from "@gnu-taler/web-util/browser";
-import { Attention } from "@gnu-taler/web-util/browser";
+import { ShouldBeSameUser } from "../WithdrawalConfirmationQuestion.js";
 import { assertUnreachable } from "../WithdrawalOperationPage.js";
+import { State } from "./index.js";
 
 export function InvalidPaytoView({ payto, onClose }: State.InvalidPayto) {
   return (
@@ -44,7 +41,7 @@ export function InvalidReserveView({ reserve, onClose }: State.InvalidReserve) {
   );
 }
 
-export function NeedConfirmationView({ error, onAbort: doAbort, onConfirm: doConfirm, busy }: State.NeedConfirmation) {
+export function NeedConfirmationView({ error, onAbort: doAbort, onConfirm: doConfirm, busy, account }: State.NeedConfirmation) {
   const { i18n } = useTranslationContext()
   const [settings] = usePreferences()
   const [notification, notify, errorHandler] = useLocalNotification()
@@ -150,52 +147,44 @@ export function NeedConfirmationView({ error, onAbort: doAbort, onConfirm: doCon
           <i18n.Translate>Confirm the withdrawal operation</i18n.Translate>
         </h3>
         <div class="mt-3 text-sm leading-6">
+          <ShouldBeSameUser username={account}>
+            <form
+              class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl md:col-span-2"
+              autoCapitalize="none"
+              autoCorrect="off"
+              onSubmit={e => {
+                e.preventDefault()
+              }}
+            >
+              <div class="px-4 py-6 sm:p-8">
+                <label for="withdraw-amount">{i18n.str`What is`}&nbsp;
+                  <em>
+                    {captchaNumbers.a}&nbsp;+&nbsp;{captchaNumbers.b}
+                  </em>
+                  ?
+                </label>
+                <div class="mt-2">
+                  <div class="relative rounded-md shadow-sm">
+                    <input
+                      type="text"
+                      // class="block w-full rounded-md border-0 py-1.5 pl-16 text-gray-900 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"
+                      aria-describedby="answer"
+                      autoFocus
+                      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={captchaAnswer ?? ""}
+                      required
 
-          <form
-            class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl md:col-span-2"
-            autoCapitalize="none"
-            autoCorrect="off"
-            onSubmit={e => {
-              e.preventDefault()
-            }}
-          >
-            <div class="px-4 py-6 sm:p-8">
-              <label for="withdraw-amount">{i18n.str`What is`}&nbsp;
-                <em>
-                  {captchaNumbers.a}&nbsp;+&nbsp;{captchaNumbers.b}
-                </em>
-                ?
-              </label>
-              <div class="mt-2">
-                <div class="relative rounded-md shadow-sm">
-                  <input
-                    type="text"
-                    // class="block w-full rounded-md border-0 py-1.5 pl-16 text-gray-900 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"
-                    aria-describedby="answer"
-                    autoFocus
-                    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={captchaAnswer ?? ""}
-                    required
-
-                    name="answer"
-                    id="answer"
-                    autocomplete="off"
-                    onChange={(e): void => {
-                      setCaptchaAnswer(e.currentTarget.value)
-                    }}
-                  />
+                      name="answer"
+                      id="answer"
+                      autocomplete="off"
+                      onChange={(e): void => {
+                        setCaptchaAnswer(e.currentTarget.value)
+                      }}
+                    />
+                  </div>
+                  <ShowInputErrorLabel message={errors?.answer} isDirty={captchaAnswer !== undefined} />
                 </div>
-                <ShowInputErrorLabel message={errors?.answer} isDirty={captchaAnswer !== undefined} />
               </div>
-            </div>
-            {!doAbort || !doConfirm ?
-              <Attention type="warning" title={i18n.str`not logged in`}>
-                <i18n.Translate>
-                  You need to log in as pepito to complete the operation
-                </i18n.Translate>
-              </Attention>
-              :
-
               <div class="flex items-center justify-between gap-x-6 border-t border-gray-900/10 px-4 py-4 sm:px-8">
                 <button type="button" class="text-sm font-semibold leading-6 text-gray-900"
                   onClick={(e) => {
@@ -215,71 +204,8 @@ export function NeedConfirmationView({ error, onAbort: doAbort, onConfirm: doCon
                   <i18n.Translate>Transfer</i18n.Translate>
                 </button>
               </div>
-            }
-          </form>
-        </div>
-        <div class="px-4 mt-4 ">
-          {/* <div class="w-full">
-          <div class="px-4 sm:px-0 text-sm">
-            <p><i18n.Translate>Wire transfer details</i18n.Translate></p>
-          </div>
-          <div class="mt-6 border-t border-gray-100">
-            <dl class="divide-y divide-gray-100">
-              {((): VNode => {
-                switch (details.account.targetType) {
-                  case "iban": {
-                    const p = details.account as PaytoUriIBAN
-                    const name = p.params["receiver-name"]
-                    return <Fragment>
-                      <div class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
-                        <dt class="text-sm font-medium leading-6 text-gray-900">Exchange account</dt>
-                        <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">{p.iban}</dd>
-                      </div>
-                      {name &&
-                        <div class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
-                          <dt class="text-sm font-medium leading-6 text-gray-900">Exchange name</dt>
-                          <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">{p.params["receiver-name"]}</dd>
-                        </div>
-                      }
-                    </Fragment>
-                  }
-                  case "x-taler-bank": {
-                    const p = details.account as PaytoUriTalerBank
-                    const name = p.params["receiver-name"]
-                    return <Fragment>
-                      <div class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
-                        <dt class="text-sm font-medium leading-6 text-gray-900">Exchange account</dt>
-                        <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">{p.account}</dd>
-                      </div>
-                      {name &&
-                        <div class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
-                          <dt class="text-sm font-medium leading-6 text-gray-900">Exchange name</dt>
-                          <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">{p.params["receiver-name"]}</dd>
-                        </div>
-                      }
-                    </Fragment>
-                  }
-                  default:
-                    return <div class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
-                      <dt class="text-sm font-medium leading-6 text-gray-900">Exchange account</dt>
-                      <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">{details.account.targetPath}</dd>
-                    </div>
-
-                }
-              })()}
-              <div class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
-                <dt class="text-sm font-medium leading-6 text-gray-900">Withdrawal identification</dt>
-                <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0 break-words">{details.reserve}</dd>
-              </div>
-              <div class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
-                <dt class="text-sm font-medium leading-6 text-gray-900">Amount</dt>
-                <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">To be added</dd>
-                // {/* Amounts.stringifyValue(details.amount) 
-              </div>
-            </dl>
-          </div>
-        </div> */}
-
+            </form>
+          </ShouldBeSameUser>
         </div>
       </div>
     </div>