From b3c747151bb3f50d28bf6205cafa4b7dd6ae2b1c Mon Sep 17 00:00:00 2001
From: Sebastian <sebasjm@gmail.com>
Date: Thu, 21 Sep 2023 09:41:07 -0300
Subject: more ui

---
 packages/demobank-ui/src/components/Transactions/state.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/demobank-ui/src/components/Transactions/state.ts')

diff --git a/packages/demobank-ui/src/components/Transactions/state.ts b/packages/demobank-ui/src/components/Transactions/state.ts
index 09c039055..d2a512b08 100644
--- a/packages/demobank-ui/src/components/Transactions/state.ts
+++ b/packages/demobank-ui/src/components/Transactions/state.ts
@@ -61,7 +61,7 @@ export function useComponentState({ account }: Props): State {
         return;
       }
 
-      const negative = anyItem.direction === "DBIT";
+      const negative = anyItem.direction === "DEBIT";
       const counterpart = negative ? anyItem.creditorIban : anyItem.debtorIban;
 
       let date = anyItem.date ? parseInt(anyItem.date, 10) : 0;
-- 
cgit v1.2.3


From 4041a76a58503572c6fe8edc87658afc946a11e0 Mon Sep 17 00:00:00 2001
From: Sebastian <sebasjm@gmail.com>
Date: Mon, 25 Sep 2023 11:58:17 -0300
Subject: more ui: pagination

---
 packages/demobank-ui/src/components/Routing.tsx    |  3 +-
 .../src/components/Transactions/index.ts           |  2 +
 .../src/components/Transactions/state.ts           | 52 ++++++----------------
 .../src/components/Transactions/views.tsx          | 25 ++++++++++-
 packages/demobank-ui/src/declaration.d.ts          | 41 ++++++++---------
 packages/demobank-ui/src/hooks/access.ts           | 23 ++++++----
 packages/demobank-ui/src/hooks/backend.ts          | 18 +++++---
 .../demobank-ui/src/pages/AccountPage/state.ts     |  2 +-
 packages/demobank-ui/src/pages/BankFrame.tsx       | 17 +++++--
 packages/demobank-ui/src/pages/HomePage.tsx        |  5 +--
 packages/demobank-ui/src/pages/LoginForm.tsx       | 41 ++++++++++++++---
 .../src/pages/WithdrawalConfirmationQuestion.tsx   |  5 ++-
 packages/demobank-ui/src/pages/admin/Account.tsx   |  2 +-
 .../demobank-ui/src/pages/admin/AccountList.tsx    |  5 +--
 packages/demobank-ui/src/pages/admin/Home.tsx      |  8 ++--
 packages/demobank-ui/src/pages/business/Home.tsx   |  8 ++--
 16 files changed, 151 insertions(+), 106 deletions(-)

(limited to 'packages/demobank-ui/src/components/Transactions/state.ts')

diff --git a/packages/demobank-ui/src/components/Routing.tsx b/packages/demobank-ui/src/components/Routing.tsx
index 2710069c2..05af1719b 100644
--- a/packages/demobank-ui/src/components/Routing.tsx
+++ b/packages/demobank-ui/src/components/Routing.tsx
@@ -17,7 +17,7 @@
 import { createHashHistory } from "history";
 import { VNode, h } from "preact";
 import { Route, Router, route } from "preact-router";
-import { useEffect } from "preact/hooks";
+import { useEffect, useErrorBoundary } from "preact/hooks";
 import { BankFrame } from "../pages/BankFrame.js";
 import { BusinessAccount } from "../pages/business/Home.js";
 import { HomePage, WithdrawalOperationPage } from "../pages/HomePage.js";
@@ -27,6 +27,7 @@ import { useBackendContext } from "../context/backend.js";
 import { LoginForm } from "../pages/LoginForm.js";
 import { AdminHome } from "../pages/admin/Home.js";
 import { bankUiSettings } from "../settings.js";
+import { notifyError } from "@gnu-taler/web-util/browser";
 
 export function Routing(): VNode {
   const history = createHashHistory();
diff --git a/packages/demobank-ui/src/components/Transactions/index.ts b/packages/demobank-ui/src/components/Transactions/index.ts
index 46b38ce74..9df1a70e5 100644
--- a/packages/demobank-ui/src/components/Transactions/index.ts
+++ b/packages/demobank-ui/src/components/Transactions/index.ts
@@ -46,6 +46,8 @@ export namespace State {
     status: "ready";
     error: undefined;
     transactions: Transaction[];
+    onPrev?: () => void;
+    onNext?: () => void;
   }
 }
 
diff --git a/packages/demobank-ui/src/components/Transactions/state.ts b/packages/demobank-ui/src/components/Transactions/state.ts
index d2a512b08..30c48aa45 100644
--- a/packages/demobank-ui/src/components/Transactions/state.ts
+++ b/packages/demobank-ui/src/components/Transactions/state.ts
@@ -14,7 +14,7 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-import { AbsoluteTime, Amounts } from "@gnu-taler/taler-util";
+import { AbsoluteTime, Amounts, parsePaytoUri } from "@gnu-taler/taler-util";
 import { useTransactions } from "../../hooks/access.js";
 import { Props, State, Transaction } from "./index.js";
 
@@ -34,45 +34,19 @@ export function useComponentState({ account }: Props): State {
   }
 
   const transactions = result.data.transactions
-    .map((item: unknown) => {
-      if (
-        !item ||
-        typeof item !== "object" ||
-        !("direction" in item) ||
-        !("creditorIban" in item) ||
-        !("debtorIban" in item) ||
-        !("date" in item) ||
-        !("subject" in item) ||
-        !("currency" in item) ||
-        !("amount" in item)
-      ) {
-        //not valid
-        return;
-      }
-      const anyItem = item as any;
-      if (
-        !(typeof anyItem.creditorIban === "string") ||
-        !(typeof anyItem.debtorIban === "string") ||
-        !(typeof anyItem.date === "string") ||
-        !(typeof anyItem.subject === "string") ||
-        !(typeof anyItem.currency === "string") ||
-        !(typeof anyItem.amount === "string")
-      ) {
-        return;
-      }
+    .map((tx) => {
 
-      const negative = anyItem.direction === "DEBIT";
-      const counterpart = negative ? anyItem.creditorIban : anyItem.debtorIban;
+      const negative = tx.direction === "debit";
+      const cp = parsePaytoUri(negative ? tx.creditor_payto_uri : tx.debtor_payto_uri);
+      const counterpart = (cp === undefined || !cp.isKnown ? undefined :
+        cp.targetType === "iban" ? cp.iban : 
+        cp.targetType === "x-taler-bank" ? cp.account :
+        cp.targetType === "bitcoin" ? `${cp.targetPath.substring(0, 6)}...` : undefined) ??
+        "unkown";
 
-      let date = anyItem.date ? parseInt(anyItem.date, 10) : 0;
-      if (isNaN(date) || !isFinite(date)) {
-        date = 0;
-      }
-      const when: AbsoluteTime = !date
-        ? AbsoluteTime.never()
-        : AbsoluteTime.fromMilliseconds(date);
-      const amount = Amounts.parse(`${anyItem.currency}:${anyItem.amount}`);
-      const subject = anyItem.subject;
+      const when = AbsoluteTime.fromMilliseconds(tx.date / 1000);
+      const amount = Amounts.parse(tx.amount);
+      const subject = tx.subject;
       return {
         negative,
         counterpart,
@@ -87,5 +61,7 @@ export function useComponentState({ account }: Props): State {
     status: "ready",
     error: undefined,
     transactions,
+    onNext: result.isReachingEnd ? undefined : result.loadMore,
+    onPrev: result.isReachingStart ? undefined : result.loadMorePrev,
   };
 }
diff --git a/packages/demobank-ui/src/components/Transactions/views.tsx b/packages/demobank-ui/src/components/Transactions/views.tsx
index e34120e34..f8b2e3113 100644
--- a/packages/demobank-ui/src/components/Transactions/views.tsx
+++ b/packages/demobank-ui/src/components/Transactions/views.tsx
@@ -30,7 +30,7 @@ export function LoadingUriView({ error }: State.LoadingUriError): VNode {
   );
 }
 
-export function ReadyView({ transactions }: State.Ready): VNode {
+export function ReadyView({ transactions, onNext, onPrev }: State.Ready): VNode {
   const { i18n } = useTranslationContext();
   if (!transactions.length) return <div />
   const txByDate = transactions.reduce((prev, cur) => {
@@ -50,7 +50,7 @@ export function ReadyView({ transactions }: State.Ready): VNode {
           <h1 class="text-base font-semibold leading-6 text-gray-900"><i18n.Translate>Latest transactions</i18n.Translate></h1>
         </div>
       </div>
-      <div class="-mx-4 mt-5 ring-1 ring-gray-300 sm:mx-0 sm:rounded-lg min-w-fit bg-white">
+      <div class="-mx-4 mt-5 ring-1 ring-gray-300 sm:mx-0 rounded-lg min-w-fit bg-white">
         <table class="min-w-full divide-y divide-gray-300">
           <thead>
             <tr>
@@ -89,9 +89,30 @@ export function ReadyView({ transactions }: State.Ready): VNode {
                   </tr>)
                 })}
               </Fragment>
+
             })}
           </tbody>
+
         </table>
+       
+       <nav class="flex items-center justify-between border-t border-gray-200 bg-white px-4 py-3 sm:px-6 rounded-lg" aria-label="Pagination">
+          <div class="flex flex-1 justify-between sm:justify-end">
+            <button
+              class="relative disabled:bg-gray-100 disabled:text-gray-500 inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline-offset-0"
+              disabled={!onPrev}
+              onClick={onPrev}
+            >
+              <i18n.Translate>First page</i18n.Translate>
+            </button>
+            <button
+              class="relative disabled:bg-gray-100 disabled:text-gray-500 ml-3 inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline-offset-0"
+              disabled={!onNext}
+              onClick={onNext}
+            >
+              <i18n.Translate>Next</i18n.Translate>
+            </button>
+          </div>
+        </nav>
       </div>
     </div>
   );
diff --git a/packages/demobank-ui/src/declaration.d.ts b/packages/demobank-ui/src/declaration.d.ts
index 0c083a939..8d729c1f7 100644
--- a/packages/demobank-ui/src/declaration.d.ts
+++ b/packages/demobank-ui/src/declaration.d.ts
@@ -194,28 +194,25 @@ namespace SandboxBackend {
     }
 
     interface BankAccountTransactionInfo {
-      creditorIban: string;
-      creditorBic: string; // Optional
-      creditorName: string;
+      creditor_payto_uri: string;
+      debtor_payto_uri: string;
 
-      debtorIban: string;
-      debtorBic: string;
-      debtorName: string;
+      amount: Amount;
+      direction: "debit" | "credit";
 
-      amount: number;
-      currency: string;
       subject: string;
 
       // Transaction unique ID.  Matches
       // $transaction_id from the URI.
-      uid: string;
-      direction: "DBIT" | "CRDT";
-      date: string; // milliseconds since the Unix epoch
+      row_id: number;
+      date: number;
+      // date: Timestamp;
     }
+
     interface CreateBankAccountTransactionCreate {
       // Address in the Payto format of the wire transfer receiver.
       // It needs at least the 'message' query string parameter.
-      paytoUri: string;
+      payto_uri: string;
 
       // Transaction amount (in the $currency:x.y format), optional.
       // However, when not given, its value must occupy the 'amount'
@@ -326,32 +323,32 @@ namespace SandboxBackend {
     interface AccountMinimalData {
       // Username
       username: string;
-    
+
       // Legal name of the account owner.
       name: string;
-    
+
       // current balance of the account
       balance: Balance;
-    
+
       // Number indicating the max debit allowed for the requesting user.
       debit_threshold: Amount;
     }
-    
+
     interface AccountData {
       // Legal name of the account owner.
       name: string;
-    
+
       // Available balance on the account.
       balance: Balance;
-    
+
       // payto://-URI of the account.
       payto_uri: string;
-    
+
       // Number indicating the max debit allowed for the requesting user.
       debit_threshold: Amount;
-    
+
       contact_data?: ChallengeContactData;
-    
+
       // 'payto' address pointing the bank account
       // where to send cashouts.  This field is optional
       // because not all the accounts are required to participate
@@ -360,7 +357,7 @@ namespace SandboxBackend {
       // be done via the access API.
       cashout_payto_uri?: string;
     }
-    
+
   }
 
   namespace Circuit {
diff --git a/packages/demobank-ui/src/hooks/access.ts b/packages/demobank-ui/src/hooks/access.ts
index 2f6848af8..20fd64bfa 100644
--- a/packages/demobank-ui/src/hooks/access.ts
+++ b/packages/demobank-ui/src/hooks/access.ts
@@ -255,7 +255,7 @@ export function useTransactionDetails(
 }
 
 interface PaginationFilter {
-  page: number;
+  // page: number;
 }
 
 export function usePublicAccounts(
@@ -275,7 +275,7 @@ export function usePublicAccounts(
   } = useSWR<
     HttpResponseOk<SandboxBackend.CoreBank.PublicAccountsResponse>,
     RequestError<SandboxBackend.SandboxError>
-  >([`public-accounts`, args?.page, PAGE_SIZE], paginatedFetcher);
+  >([`public-accounts`, page, PAGE_SIZE], paginatedFetcher);
 
   const [lastAfter, setLastAfter] = useState<
     HttpResponse<
@@ -334,7 +334,7 @@ export function useTransactions(
 > {
   const { paginatedFetcher } = useAuthenticatedBackend();
 
-  const [page, setPage] = useState(1);
+  const [start, setStart] = useState<string>();
 
   const {
     data: afterData,
@@ -344,7 +344,7 @@ export function useTransactions(
     HttpResponseOk<SandboxBackend.CoreBank.BankAccountTransactionsResponse>,
     RequestError<SandboxBackend.SandboxError>
   >(
-    [`accounts/${account}/transactions`, args?.page, PAGE_SIZE],
+    [`accounts/${account}/transactions`, start, PAGE_SIZE],
     paginatedFetcher, {
     refreshInterval: 0,
     refreshWhenHidden: false,
@@ -374,19 +374,24 @@ export function useTransactions(
   // if the query returns less that we ask, then we have reach the end or beginning
   const isReachingEnd =
     afterData && afterData.data.transactions.length < PAGE_SIZE;
-  const isReachingStart = false;
+  const isReachingStart = start == undefined;
 
   const pagination = {
     isReachingEnd,
     isReachingStart,
     loadMore: () => {
       if (!afterData || isReachingEnd) return;
-      if (afterData.data.transactions.length < MAX_RESULT_SIZE) {
-        setPage(page + 1);
-      }
+      // if (afterData.data.transactions.length < MAX_RESULT_SIZE) {
+      // console.log("load more", page)
+      const l = afterData.data.transactions[afterData.data.transactions.length-1]
+      setStart(String(l.row_id));
+      // }
     },
     loadMorePrev: () => {
-      null;
+      if (!afterData || isReachingStart) return;
+      // if (afterData.data.transactions.length < MAX_RESULT_SIZE) {
+      setStart(undefined)
+      // }
     },
   };
 
diff --git a/packages/demobank-ui/src/hooks/backend.ts b/packages/demobank-ui/src/hooks/backend.ts
index e6a3a1c0c..3d5bfa360 100644
--- a/packages/demobank-ui/src/hooks/backend.ts
+++ b/packages/demobank-ui/src/hooks/backend.ts
@@ -159,7 +159,7 @@ interface useBackendType {
   fetcher: <T>(endpoint: string) => Promise<HttpResponseOk<T>>;
   multiFetcher: <T>(endpoint: string[][]) => Promise<HttpResponseOk<T>[]>;
   paginatedFetcher: <T>(
-    args: [string, number, number],
+    args: [string, string | undefined, number],
   ) => Promise<HttpResponseOk<T>>;
   sandboxAccountsFetcher: <T>(
     args: [string, number, number, string],
@@ -188,13 +188,15 @@ export function usePublicBackend(): useBackendType {
     [baseUrl],
   );
   const paginatedFetcher = useCallback(
-    function fetcherImpl<T>([endpoint, page, size]: [
+    function fetcherImpl<T>([endpoint, start, size]: [
       string,
-      number,
+      string | undefined,
       number,
     ]): Promise<HttpResponseOk<T>> {
+      const delta = -1 * size //descending order
+      const params = start ? { delta, start } : {delta}
       return requestHandler<T>(baseUrl, endpoint, {
-        params: { page: page || 1, size },
+        params,
       });
     },
     [baseUrl],
@@ -280,14 +282,16 @@ export function useAuthenticatedBackend(): useBackendType {
     [baseUrl, creds],
   );
   const paginatedFetcher = useCallback(
-    function fetcherImpl<T>([endpoint, page = 1, size]: [
+    function fetcherImpl<T>([endpoint, start, size]: [
       string,
-      number,
+      string | undefined,
       number,
     ]): Promise<HttpResponseOk<T>> {
+      const delta = -1 * size //descending order
+      const params = start ? { delta, start } : {delta}
       return requestHandler<T>(baseUrl, endpoint, {
         token: creds,
-        params: { delta: size, start: size * page },
+        params,
       });
     },
     [baseUrl, creds],
diff --git a/packages/demobank-ui/src/pages/AccountPage/state.ts b/packages/demobank-ui/src/pages/AccountPage/state.ts
index a23d3b569..c212e7484 100644
--- a/packages/demobank-ui/src/pages/AccountPage/state.ts
+++ b/packages/demobank-ui/src/pages/AccountPage/state.ts
@@ -49,7 +49,7 @@ export function useComponentState({ account, goToBusinessAccount, goToConfirmOpe
       };
     }
     if (result.status === HttpStatusCode.Unauthorized) {
-      notifyError(i18n.str`Require login`, undefined);
+      notifyError(i18n.str`Authorization denied`, i18n.str`Maybe the session has expired, login again.`);
       return {
         status: "error-user-not-found",
         error: result,
diff --git a/packages/demobank-ui/src/pages/BankFrame.tsx b/packages/demobank-ui/src/pages/BankFrame.tsx
index 39ca09f1b..c4f872679 100644
--- a/packages/demobank-ui/src/pages/BankFrame.tsx
+++ b/packages/demobank-ui/src/pages/BankFrame.tsx
@@ -15,9 +15,9 @@
  */
 
 import { Amounts, Logger, PaytoUriIBAN, TranslatedString, parsePaytoUri, stringifyPaytoUri } from "@gnu-taler/taler-util";
-import { useNotifications, useTranslationContext } from "@gnu-taler/web-util/browser";
+import { notifyError, useNotifications, useTranslationContext } from "@gnu-taler/web-util/browser";
 import { ComponentChildren, Fragment, h, VNode } from "preact";
-import { StateUpdater, useEffect, useState } from "preact/hooks";
+import { StateUpdater, useEffect, useErrorBoundary, useState } from "preact/hooks";
 import { LangSelectorLikePy as LangSelector } from "../components/LangSelector.js";
 import { useBackendContext } from "../context/backend.js";
 import { useBusinessAccountDetails } from "../hooks/circuit.js";
@@ -50,6 +50,15 @@ export function BankFrame({
   const [settings, updateSettings] = useSettings();
   const [open, setOpen] = useState(false)
 
+  const [error, resetError] = useErrorBoundary();
+
+  useEffect(() => {
+    if (error) {
+      notifyError(i18n.str`Internal error, please report.`, (error instanceof Error ? error.message : String(error)) as TranslatedString)
+      resetError()
+    }
+  }, [error])
+
   const demo_sites = [];
   for (const i in bankUiSettings.demoSites)
     demo_sites.push(
@@ -355,7 +364,9 @@ function StatusBanner(): VNode {
                 </div>
                 <div class="ml-3 flex-1 md:flex md:justify-between">
                   <p class="text-sm font-medium text-red-800">{n.message.title}</p>
-                  <p class="mt-3 text-sm md:ml-6 md:mt-0">
+                </div>
+                <div>
+                  <p class="text-sm">
                     <button type="button" class="inline-flex font-semibold items-center rounded bg-white px-2 py-1 text-xs text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
                       onClick={(e) => {
                         e.preventDefault();
diff --git a/packages/demobank-ui/src/pages/HomePage.tsx b/packages/demobank-ui/src/pages/HomePage.tsx
index fb30c1218..d945d80d1 100644
--- a/packages/demobank-ui/src/pages/HomePage.tsx
+++ b/packages/demobank-ui/src/pages/HomePage.tsx
@@ -68,7 +68,7 @@ export function HomePage({
       account={account}
       goToConfirmOperation={goToConfirmOperation}
       goToBusinessAccount={goToBusinessAccount}
-      onLoadNotOk={handleNotOkResult(i18n, onRegister)}
+      onLoadNotOk={handleNotOkResult(i18n)}
     />
   );
 }
@@ -112,7 +112,6 @@ export function WithdrawalOperationPage({
 
 export function handleNotOkResult(
   i18n: ReturnType<typeof useTranslationContext>["i18n"],
-  onRegister?: () => void,
 ): <T>(
   result:
     | HttpResponsePaginated<T, SandboxBackend.SandboxError>
@@ -133,7 +132,7 @@ export function handleNotOkResult(
         case ErrorType.CLIENT: {
           if (result.status === HttpStatusCode.Unauthorized) {
             notifyError(i18n.str`Wrong credentials`, undefined);
-            return <LoginForm onRegister={onRegister} />;
+            return <LoginForm />;
           }
           const errorData = result.payload;
           notify({
diff --git a/packages/demobank-ui/src/pages/LoginForm.tsx b/packages/demobank-ui/src/pages/LoginForm.tsx
index f1ba439ac..f579678f2 100644
--- a/packages/demobank-ui/src/pages/LoginForm.tsx
+++ b/packages/demobank-ui/src/pages/LoginForm.tsx
@@ -24,6 +24,7 @@ import { useCredentialsChecker } from "../hooks/useCredentialsChecker.js";
 import { bankUiSettings } from "../settings.js";
 import { undefinedIfEmpty } from "../utils.js";
 
+
 /**
  * Collect and submit login data.
  */
@@ -35,7 +36,6 @@ export function LoginForm({ onRegister }: { onRegister?: () => void }): VNode {
   const { i18n } = useTranslationContext();
   const { requestNewLoginToken, refreshLoginToken } = useCredentialsChecker();
 
-  // const testLogin = useCredentialsCheckerOld();
   const ref = useRef<HTMLInputElement>(null);
   useEffect(function focusInput() {
     ref.current?.focus();
@@ -120,6 +120,13 @@ export function LoginForm({ onRegister }: { onRegister?: () => void }): VNode {
     setBusy(undefined)
   }
 
+  /**
+   * Register form may be shown in the initialization step.
+   * If this is an error when usgin the app the registration
+   * callback is not set
+   */
+  const isSessionExpired = !onRegister
+
   return (
     <Fragment>
       <h1 class="nav"></h1>
@@ -128,9 +135,9 @@ export function LoginForm({ onRegister }: { onRegister?: () => void }): VNode {
       )} */}
 
       <div class="flex min-h-full flex-col justify-center">
-        <div class="sm:mx-auto sm:w-full sm:max-w-sm">
+        {/* <div class="sm:mx-auto sm:w-full sm:max-w-sm">
           <h2 class="text-center text-2xl font-bold leading-9 tracking-tight text-gray-900">{i18n.str`Welcome to ${bankUiSettings.bankName}!`}</h2>
-        </div>
+        </div> */}
 
         <div class="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
           <form class="space-y-6" noValidate
@@ -151,8 +158,9 @@ export function LoginForm({ onRegister }: { onRegister?: () => void }): VNode {
                   type="text"
                   name="username"
                   id="username"
-                  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"
+                  class="block w-full disabled:bg-gray-200 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={username ?? ""}
+                  disabled={isSessionExpired}
                   enterkeyhint="next"
                   placeholder="identification"
                   autocomplete="username"
@@ -194,7 +202,28 @@ export function LoginForm({ onRegister }: { onRegister?: () => void }): VNode {
               </div>
             </div>
 
-            <div>
+            {isSessionExpired ? <div class="flex justify-between">
+              <button type="submit"
+                class="rounded-md bg-white-600 px-3 py-1.5 text-sm font-semibold leading-6 text-black shadow-sm hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-600"
+                onClick={(e) => {
+                  e.preventDefault()
+                  doLogin()
+                }}
+              >
+                <i18n.Translate>Cancel</i18n.Translate>
+              </button>
+              
+              <button type="submit"
+                class="rounded-md bg-indigo-600 disabled:bg-gray-300 px-3 py-1.5 text-sm font-semibold leading-6 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"
+                disabled={!!errors}
+                onClick={(e) => {
+                  e.preventDefault()
+                  doLogin()
+                }}
+              >
+                <i18n.Translate>Renew session</i18n.Translate>
+              </button>
+            </div> : <div>
               <button type="submit"
                 class="flex w-full justify-center rounded-md bg-indigo-600 disabled:bg-gray-300 px-3 py-1.5 text-sm font-semibold leading-6 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"
                 disabled={!!errors}
@@ -205,7 +234,7 @@ export function LoginForm({ onRegister }: { onRegister?: () => void }): VNode {
               >
                 <i18n.Translate>Log in</i18n.Translate>
               </button>
-            </div>
+            </div>}
           </form>
 
           {bankUiSettings.allowRegistrations && onRegister &&
diff --git a/packages/demobank-ui/src/pages/WithdrawalConfirmationQuestion.tsx b/packages/demobank-ui/src/pages/WithdrawalConfirmationQuestion.tsx
index 30fcbdff7..d160a88b3 100644
--- a/packages/demobank-ui/src/pages/WithdrawalConfirmationQuestion.tsx
+++ b/packages/demobank-ui/src/pages/WithdrawalConfirmationQuestion.tsx
@@ -317,8 +317,9 @@ export function WithdrawalConfirmationQuestion({
                   </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) */}
+                    <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
+                      {Amounts.stringifyValue(details.amount)}
+                    </dd>
                   </div>
                 </dl>
               </div>
diff --git a/packages/demobank-ui/src/pages/admin/Account.tsx b/packages/demobank-ui/src/pages/admin/Account.tsx
index 8ea59cdcb..521bc8eb3 100644
--- a/packages/demobank-ui/src/pages/admin/Account.tsx
+++ b/packages/demobank-ui/src/pages/admin/Account.tsx
@@ -13,7 +13,7 @@ export function AdminAccount({ onRegister }: { onRegister: () => void }): VNode
   const result = useAccountDetails(account);
 
   if (!result.ok) {
-    return handleNotOkResult(i18n, onRegister)(result);
+    return handleNotOkResult(i18n)(result);
   }
   const { data } = result;
 
diff --git a/packages/demobank-ui/src/pages/admin/AccountList.tsx b/packages/demobank-ui/src/pages/admin/AccountList.tsx
index eb5765533..f99b320a4 100644
--- a/packages/demobank-ui/src/pages/admin/AccountList.tsx
+++ b/packages/demobank-ui/src/pages/admin/AccountList.tsx
@@ -8,17 +8,16 @@ import { useTranslationContext } from "@gnu-taler/web-util/browser";
 interface Props {
   onAction: (type: AccountAction, account: string) => void;
   account: string | undefined;
-  onRegister: () => void;
   onCreateAccount: () => void;
 }
 
-export function AccountList({ account, onAction, onCreateAccount, onRegister }: Props): VNode {
+export function AccountList({ account, onAction, onCreateAccount }: Props): VNode {
   const result = useBusinessAccounts({ account });
   const { i18n } = useTranslationContext();
 
   if (result.loading) return <div />;
   if (!result.ok) {
-    return handleNotOkResult(i18n, onRegister)(result);
+    return handleNotOkResult(i18n)(result);
   }
 
   const { customers } = result.data;
diff --git a/packages/demobank-ui/src/pages/admin/Home.tsx b/packages/demobank-ui/src/pages/admin/Home.tsx
index 5033b7fdc..725820ada 100644
--- a/packages/demobank-ui/src/pages/admin/Home.tsx
+++ b/packages/demobank-ui/src/pages/admin/Home.tsx
@@ -37,7 +37,7 @@ export function AdminHome({ onRegister }: Props): VNode {
     switch (action.type) {
       case "show-cashouts-details": return <ShowCashoutDetails
         id={action.account}
-        onLoadNotOk={handleNotOkResult(i18n, onRegister)}
+        onLoadNotOk={handleNotOkResult(i18n)}
         onCancel={() => {
           setAction(undefined);
         }}
@@ -73,7 +73,7 @@ export function AdminHome({ onRegister }: Props): VNode {
       )
       case "update-password": return <UpdateAccountPassword
         account={action.account}
-        onLoadNotOk={handleNotOkResult(i18n, onRegister)}
+        onLoadNotOk={handleNotOkResult(i18n)}
         onUpdateSuccess={() => {
           notifyInfo(i18n.str`Password changed`);
           setAction(undefined);
@@ -84,7 +84,7 @@ export function AdminHome({ onRegister }: Props): VNode {
       />
       case "remove-account": return <RemoveAccount
         account={action.account}
-        onLoadNotOk={handleNotOkResult(i18n, onRegister)}
+        onLoadNotOk={handleNotOkResult(i18n)}
         onUpdateSuccess={() => {
           notifyInfo(i18n.str`Account removed`);
           setAction(undefined);
@@ -95,7 +95,7 @@ export function AdminHome({ onRegister }: Props): VNode {
       />
       case "show-details": return <ShowAccountDetails
         account={action.account}
-        onLoadNotOk={handleNotOkResult(i18n, onRegister)}
+        onLoadNotOk={handleNotOkResult(i18n)}
         onChangePassword={() => {
           setAction({
             type: "update-password",
diff --git a/packages/demobank-ui/src/pages/business/Home.tsx b/packages/demobank-ui/src/pages/business/Home.tsx
index 628ae328d..c9d798082 100644
--- a/packages/demobank-ui/src/pages/business/Home.tsx
+++ b/packages/demobank-ui/src/pages/business/Home.tsx
@@ -75,7 +75,7 @@ export function BusinessAccount({
     return (
       <CreateCashout
         account={account}
-        onLoadNotOk={handleNotOkResult(i18n, onRegister)}
+        onLoadNotOk={handleNotOkResult(i18n)}
         onCancel={() => {
           setNewcashout(false);
         }}
@@ -93,7 +93,7 @@ export function BusinessAccount({
     return (
       <ShowCashoutDetails
         id={showCashoutDetails}
-        onLoadNotOk={handleNotOkResult(i18n, onRegister)}
+        onLoadNotOk={handleNotOkResult(i18n)}
         onCancel={() => {
           setShowCashoutDetails(undefined);
         }}
@@ -104,7 +104,7 @@ export function BusinessAccount({
     return (
       <UpdateAccountPassword
         account={account}
-        onLoadNotOk={handleNotOkResult(i18n, onRegister)}
+        onLoadNotOk={handleNotOkResult(i18n)}
         onUpdateSuccess={() => {
           notifyInfo(i18n.str`Password changed`);
           setUpdatePassword(false);
@@ -119,7 +119,7 @@ export function BusinessAccount({
     <div>
       <ShowAccountDetails
         account={account}
-        onLoadNotOk={handleNotOkResult(i18n, onRegister)}
+        onLoadNotOk={handleNotOkResult(i18n)}
         onUpdateSuccess={() => {
           notifyInfo(i18n.str`Account updated`);
         }}
-- 
cgit v1.2.3


From ea0738ccd585445d7e2080d9009025dde9cf22c5 Mon Sep 17 00:00:00 2001
From: Sebastian <sebasjm@gmail.com>
Date: Mon, 25 Sep 2023 14:49:47 -0300
Subject: better /config error

---
 .../demobank-ui/src/components/ErrorLoading.tsx    |  3 ++
 .../src/components/Transactions/state.ts           |  2 +-
 packages/demobank-ui/src/components/app.tsx        | 18 +++++++---
 packages/demobank-ui/src/declaration.d.ts          |  3 +-
 packages/demobank-ui/src/hooks/config.ts           | 40 +++++++++-------------
 .../demobank-ui/src/pages/AccountPage/state.ts     |  4 +--
 packages/demobank-ui/src/pages/BankFrame.tsx       | 14 ++++++--
 .../demobank-ui/src/pages/WithdrawalQRCode.tsx     |  1 -
 packages/web-util/src/hooks/index.ts               |  1 +
 packages/web-util/src/hooks/useNotifications.ts    | 11 ++++++
 10 files changed, 60 insertions(+), 37 deletions(-)

(limited to 'packages/demobank-ui/src/components/Transactions/state.ts')

diff --git a/packages/demobank-ui/src/components/ErrorLoading.tsx b/packages/demobank-ui/src/components/ErrorLoading.tsx
index a4faa4d5d..f83b61234 100644
--- a/packages/demobank-ui/src/components/ErrorLoading.tsx
+++ b/packages/demobank-ui/src/components/ErrorLoading.tsx
@@ -32,6 +32,9 @@ export function ErrorLoading({ error }: { error: HttpError<SandboxBackend.Sandbo
           <p class="text-sm font-medium text-red-800">{error.message}</p>
         </div>
       </div>
+        <div class="ml-3 flex-1 md:flex md:justify-between">
+          <p class="text-sm font-medium text-red-800">Got status "{error.info.status}" on {error.info.url}</p>
+        </div>
     </div>
     </div>
   );
diff --git a/packages/demobank-ui/src/components/Transactions/state.ts b/packages/demobank-ui/src/components/Transactions/state.ts
index 30c48aa45..4b62b005e 100644
--- a/packages/demobank-ui/src/components/Transactions/state.ts
+++ b/packages/demobank-ui/src/components/Transactions/state.ts
@@ -44,7 +44,7 @@ export function useComponentState({ account }: Props): State {
         cp.targetType === "bitcoin" ? `${cp.targetPath.substring(0, 6)}...` : undefined) ??
         "unkown";
 
-      const when = AbsoluteTime.fromMilliseconds(tx.date / 1000);
+      const when = AbsoluteTime.fromProtocolTimestamp(tx.date);
       const amount = Amounts.parse(tx.amount);
       const subject = tx.subject;
       return {
diff --git a/packages/demobank-ui/src/components/app.tsx b/packages/demobank-ui/src/components/app.tsx
index ebda31035..a587c6f1e 100644
--- a/packages/demobank-ui/src/components/app.tsx
+++ b/packages/demobank-ui/src/components/app.tsx
@@ -29,6 +29,8 @@ import { useEffect, useState } from "preact/hooks";
 import { Loading } from "./Loading.js";
 import { getInitialBackendBaseURL } from "../hooks/backend.js";
 import { BANK_INTEGRATION_PROTOCOL_VERSION, useConfigState } from "../hooks/config.js";
+import { ErrorLoading } from "./ErrorLoading.js";
+import { BankFrame } from "../pages/BankFrame.js";
 const WITH_LOCAL_STORAGE_CACHE = false;
 
 /**
@@ -76,12 +78,18 @@ function VersionCheck({ children }: { children: ComponentChildren }): VNode {
   if (checked === undefined) {
     return <Loading />
   }
-  if (checked === false) {
-    return <div>
-      the bank backend is not supported. supported version "{BANK_INTEGRATION_PROTOCOL_VERSION}"
-    </div>
+  if (typeof checked ===  "string") {
+    return <BankFrame>
+      the bank backend is not supported. supported version "{BANK_INTEGRATION_PROTOCOL_VERSION}", server version "{checked}"
+    </BankFrame>
   }
-  return <Fragment>{children}</Fragment>
+  if (checked === true) {
+    return <Fragment>{children}</Fragment>
+  }
+  
+  return <BankFrame>
+    <ErrorLoading error={checked}/>
+  </BankFrame>
 }
 
 function localStorageProvider(): Map<unknown, unknown> {
diff --git a/packages/demobank-ui/src/declaration.d.ts b/packages/demobank-ui/src/declaration.d.ts
index 8d729c1f7..d3d9e02ef 100644
--- a/packages/demobank-ui/src/declaration.d.ts
+++ b/packages/demobank-ui/src/declaration.d.ts
@@ -205,8 +205,7 @@ namespace SandboxBackend {
       // Transaction unique ID.  Matches
       // $transaction_id from the URI.
       row_id: number;
-      date: number;
-      // date: Timestamp;
+      date: Timestamp;
     }
 
     interface CreateBankAccountTransactionCreate {
diff --git a/packages/demobank-ui/src/hooks/config.ts b/packages/demobank-ui/src/hooks/config.ts
index 4b22e8ad3..4cf677d35 100644
--- a/packages/demobank-ui/src/hooks/config.ts
+++ b/packages/demobank-ui/src/hooks/config.ts
@@ -1,5 +1,5 @@
 import { LibtoolVersion } from "@gnu-taler/taler-util";
-import { useApiContext } from "@gnu-taler/web-util/browser";
+import { ErrorType, HttpError, HttpResponseServerError, RequestError, useApiContext } from "@gnu-taler/web-util/browser";
 import { useEffect, useState } from "preact/hooks";
 import { getInitialBackendBaseURL } from "./backend.js";
 
@@ -12,38 +12,32 @@ export const BANK_INTEGRATION_PROTOCOL_VERSION = "0:0:0";
 
 async function getConfigState(
   request: ReturnType<typeof useApiContext>["request"],
-): Promise<SandboxBackend.Config | undefined> {
-  try {
-    const url = getInitialBackendBaseURL();
-    const result = await request<SandboxBackend.Config>(
-      url,
-      `config`,
-    );
-    return result.data;
-  } catch (error) {
-    return undefined;
-  }
+): Promise<SandboxBackend.Config> {
+  const url = getInitialBackendBaseURL();
+  const result = await request<SandboxBackend.Config>(url, `config`);
+  return result.data;
 }
 
-export function useConfigState(): boolean | undefined {
-  const [checked, setChecked] = useState<boolean>()
+export function useConfigState(): undefined | true | string | HttpError<SandboxBackend.SandboxError> {
+  const [checked, setChecked] = useState<true | string | HttpError<SandboxBackend.SandboxError>>()
   const { request } = useApiContext();
 
   useEffect(() => {
-    
     getConfigState(request)
-      .then((result) => {
-        if (!result) {
-          setChecked(false)
+      .then((s) => {
+        const r = LibtoolVersion.compare(BANK_INTEGRATION_PROTOCOL_VERSION, s.version)
+        if (r?.compatible) {
+          setChecked(true);
         } else {
-          const r = LibtoolVersion.compare(BANK_INTEGRATION_PROTOCOL_VERSION, result.version)
-          setChecked(r?.compatible);
+          setChecked(s.version)
         }
       })
-      .catch((error) => {
-        setChecked(false);
+      .catch((error: unknown) => {
+        if (error instanceof RequestError) {
+          setChecked(error.cause);
+        }
       });
-  });
+  }, []);
 
   return checked;
 }
diff --git a/packages/demobank-ui/src/pages/AccountPage/state.ts b/packages/demobank-ui/src/pages/AccountPage/state.ts
index c212e7484..ca7e1d447 100644
--- a/packages/demobank-ui/src/pages/AccountPage/state.ts
+++ b/packages/demobank-ui/src/pages/AccountPage/state.ts
@@ -75,9 +75,7 @@ export function useComponentState({ account, goToBusinessAccount, goToConfirmOpe
     };
   }
 
-  // FIXME: balance
-  const balanceIsDebit = true;
-  // data.balance.credit_debit_indicator == "debit";
+  const balanceIsDebit = data.balance.credit_debit_indicator == "debit";
   const limit = balanceIsDebit
     ? Amounts.sub(debitThreshold, balance).amount
     : Amounts.add(balance, debitThreshold).amount;
diff --git a/packages/demobank-ui/src/pages/BankFrame.tsx b/packages/demobank-ui/src/pages/BankFrame.tsx
index c4f872679..5c43d2c3e 100644
--- a/packages/demobank-ui/src/pages/BankFrame.tsx
+++ b/packages/demobank-ui/src/pages/BankFrame.tsx
@@ -15,7 +15,7 @@
  */
 
 import { Amounts, Logger, PaytoUriIBAN, TranslatedString, parsePaytoUri, stringifyPaytoUri } from "@gnu-taler/taler-util";
-import { notifyError, useNotifications, useTranslationContext } from "@gnu-taler/web-util/browser";
+import { notifyError, notifyException, useNotifications, useTranslationContext } from "@gnu-taler/web-util/browser";
 import { ComponentChildren, Fragment, h, VNode } from "preact";
 import { StateUpdater, useEffect, useErrorBoundary, useState } from "preact/hooks";
 import { LangSelectorLikePy as LangSelector } from "../components/LangSelector.js";
@@ -54,7 +54,12 @@ export function BankFrame({
 
   useEffect(() => {
     if (error) {
-      notifyError(i18n.str`Internal error, please report.`, (error instanceof Error ? error.message : String(error)) as TranslatedString)
+      const desc = (error instanceof Error ? error.stack : String(error)) as TranslatedString
+      if (error instanceof Error) {
+        notifyException(i18n.str`Internal error, please report.`, error)
+      } else {
+        notifyError(i18n.str`Internal error, please report.`, String(error) as TranslatedString)
+      }
       resetError()
     }
   }, [error])
@@ -386,6 +391,11 @@ function StatusBanner(): VNode {
                   {n.message.description}
                 </div>
               }
+              {n.message.debug &&
+                <div class="mt-2 text-sm text-red-700 font-mono break-all">
+                    {n.message.debug}
+                </div>
+              }
             </div>
           case "info":
             return <div class="rounded-md bg-green-50 border-4 border-green-600 p-6">
diff --git a/packages/demobank-ui/src/pages/WithdrawalQRCode.tsx b/packages/demobank-ui/src/pages/WithdrawalQRCode.tsx
index 25c571e28..8f4e175f6 100644
--- a/packages/demobank-ui/src/pages/WithdrawalQRCode.tsx
+++ b/packages/demobank-ui/src/pages/WithdrawalQRCode.tsx
@@ -45,7 +45,6 @@ export function WithdrawalQRCode({
   withdrawUri,
   onClose,
 }: Props): VNode {
-  const [settings, updateSettings] = useSettings();
   const { i18n } = useTranslationContext();
   const result = useWithdrawalDetails(withdrawUri.withdrawalOperationId);
 
diff --git a/packages/web-util/src/hooks/index.ts b/packages/web-util/src/hooks/index.ts
index c29de9023..cc3267dbd 100644
--- a/packages/web-util/src/hooks/index.ts
+++ b/packages/web-util/src/hooks/index.ts
@@ -4,6 +4,7 @@ export { useMemoryStorage } from "./useMemoryStorage.js";
 export {
   useNotifications,
   notifyError,
+  notifyException,
   notifyInfo,
   notify,
   ErrorNotification,
diff --git a/packages/web-util/src/hooks/useNotifications.ts b/packages/web-util/src/hooks/useNotifications.ts
index 2f9df24f9..792095b06 100644
--- a/packages/web-util/src/hooks/useNotifications.ts
+++ b/packages/web-util/src/hooks/useNotifications.ts
@@ -36,6 +36,17 @@ export function notifyError(
     debug,
   });
 }
+export function notifyException(
+  title: TranslatedString,
+  ex: Error,
+) {
+  notify({
+    type: "error" as const,
+    title,
+    description: ex.message as TranslatedString,
+    debug: ex.stack,
+  });
+}
 export function notifyInfo(title: TranslatedString) {
   notify({
     type: "info" as const,
-- 
cgit v1.2.3