From b3c747151bb3f50d28bf6205cafa4b7dd6ae2b1c Mon Sep 17 00:00:00 2001 From: Sebastian Date: Thu, 21 Sep 2023 09:41:07 -0300 Subject: [PATCH] more ui --- .../demobank-ui/src/components/CopyButton.tsx | 4 +- .../demobank-ui/src/components/Routing.tsx | 66 +++++- .../src/components/Transactions/state.ts | 2 +- packages/demobank-ui/src/pages/BankFrame.tsx | 215 +++++++++--------- .../src/pages/PaytoWireTransferForm.tsx | 111 +-------- .../src/pages/WalletWithdrawForm.tsx | 70 +----- .../pages/WithdrawalConfirmationQuestion.tsx | 8 +- 7 files changed, 187 insertions(+), 289 deletions(-) diff --git a/packages/demobank-ui/src/components/CopyButton.tsx b/packages/demobank-ui/src/components/CopyButton.tsx index 97ccbf2bf..b36de770e 100644 --- a/packages/demobank-ui/src/components/CopyButton.tsx +++ b/packages/demobank-ui/src/components/CopyButton.tsx @@ -45,14 +45,14 @@ export function CopyButton({ getContent }: { getContent: () => string }): VNode if (!copied) { return ( - ); } return (
-
diff --git a/packages/demobank-ui/src/components/Routing.tsx b/packages/demobank-ui/src/components/Routing.tsx index 2c532e863..890058a9b 100644 --- a/packages/demobank-ui/src/components/Routing.tsx +++ b/packages/demobank-ui/src/components/Routing.tsx @@ -24,12 +24,50 @@ import { HomePage, WithdrawalOperationPage } from "../pages/HomePage.js"; import { PublicHistoriesPage } from "../pages/PublicHistoriesPage.js"; import { RegistrationPage } from "../pages/RegistrationPage.js"; import { Test } from "../pages/Test.js"; +import { useBackendContext } from "../context/backend.js"; +import { LoginForm } from "../pages/LoginForm.js"; +import { AdminPage } from "../pages/AdminPage.js"; export function Routing(): VNode { const history = createHashHistory(); + const backend = useBackendContext(); + + if (backend.state.status === "loggedOut") { + return { + route("/business"); + }} + > + + ( + { + route("/register"); + }} + /> + )} + /> + ( + { + route("/account"); + }} + /> + )} + /> + + + + } + const isAdmin = backend.state.isUserAdministrator return ( { route("/business"); }} @@ -69,16 +107,24 @@ export function Routing(): VNode { /> ( - { - route(`/operation/${wopid}`); - }} - onRegister={() => { - route("/register"); - }} - /> - )} + component={() => { + if (isAdmin) { + return { + route("/register"); + }} + />; + } else { + return { + route(`/operation/${wopid}`); + }} + onRegister={() => { + route("/register"); + }} + /> + } + }} /> */ -import { Logger, PaytoUriIBAN, TranslatedString, parsePaytoUri, stringifyPaytoUri } from "@gnu-taler/taler-util"; +import { Amounts, Logger, PaytoUriIBAN, TranslatedString, parsePaytoUri, stringifyPaytoUri } from "@gnu-taler/taler-util"; import { useNotifications, useTranslationContext } from "@gnu-taler/web-util/browser"; import { ComponentChildren, Fragment, h, VNode } from "preact"; import { StateUpdater, useEffect, useState } from "preact/hooks"; @@ -25,6 +25,7 @@ import { bankUiSettings } from "../settings.js"; import { useSettings } from "../hooks/settings.js"; import { CopyButton, CopyIcon } from "../components/CopyButton.js"; import logo from "../assets/logo-2021.svg"; +import { useAccountDetails } from "../hooks/access.js"; const IS_PUBLIC_ACCOUNT_ENABLED = false; const GIT_HASH = typeof __GIT_HASH__ !== "undefined" ? __GIT_HASH__ : undefined; @@ -63,7 +64,9 @@ function MaybeBusinessButton({ export function BankFrame({ children, goToBusinessAccount, + account, }: { + account: string | undefined, children: ComponentChildren; goToBusinessAccount?: () => void; }): VNode { @@ -122,123 +125,118 @@ export function BankFrame({ {open && - - } - {true && + {account &&
-

+

-

+

@@ -466,17 +464,30 @@ function Footer() { ); } -function WelcomeAccount(): VNode { +function WelcomeAccount({ account }: { account: string }): VNode { const { i18n } = useTranslationContext(); - const account = "Sebastian" - const payto: PaytoUriIBAN = parsePaytoUri("payto://iban/bank.localhost/DE955922") as PaytoUriIBAN + + const result = useAccountDetails(account); + if (!result.ok) return
+ + // const account = "Sebastian" + const payto = parsePaytoUri(result.data.paytoUri) + if (!payto) return
+ + const accountNumber = !payto.isKnown ? undefined : payto.targetType === "iban" ? payto.iban : payto.targetType === "x-taler-bank" ? payto.account : undefined; return - Welcome, {account} ({payto.iban})! stringifyPaytoUri(payto)} /> + Welcome, {account} {accountNumber !== undefined ? + + ({accountNumber} result.data.paytoUri} />) + + : }! } -function AccountBalance(): VNode { +function AccountBalance({ account }: { account: string }): VNode { + const result = useAccountDetails(account); + if (!result.ok) return
- return
KUDOS 100.00
+ return
{result.data.balance.credit_debit_indicator === "debit" ? "-" : ""} {Amounts.currencyOf(result.data.balance.amount)} {Amounts.stringifyValue(result.data.balance.amount)}
} diff --git a/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx b/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx index 5e0624cbf..cdaf363e3 100644 --- a/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx +++ b/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx @@ -151,7 +151,7 @@ export function PaytoWireTransferForm({ ? error.message : JSON.stringify(error)) as TranslatedString ) -} + } } } @@ -160,8 +160,7 @@ export function PaytoWireTransferForm({

Transfer details

-
- {/* */} +
- - {/* */}
) - // } - // return ( - //
- //
{ - // e.preventDefault(); - // }} - // > - //   - //   - - //   - //
- // - // { - // setAmount(e.currentTarget.value); - // }} - // /> - //
- // - //

- // { - // e.preventDefault(); - // if (!(iban && subject && amount)) { - // return; - // } - - // }} - // /> - // { - // e.preventDefault(); - // setAmount(undefined); - // setIban(undefined); - // setSubject(undefined); - // }} - // /> - //

- // - //

- // { - // setIsRawPayto(true); - // e.preventDefault(); - // }} - // > - // {i18n.str`Want to try the raw payto://-format?`} - // - //

- //
- // ); - - - - // return ( - //
- //

{i18n.str`Transfer money to account identified by payto:// URI:`}

- - //
- // ); } export function Amount( { diff --git a/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx b/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx index 6574ec934..8c41f7576 100644 --- a/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx +++ b/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx @@ -78,6 +78,7 @@ export function WalletWithdrawForm({ async function doStart() { if (!parsedAmount) return; try { + console.log("ASDASD") const result = await createWithdrawal({ amount: Amounts.stringify(parsedAmount), }); @@ -106,7 +107,7 @@ export function WalletWithdrawForm({ ? error.message : JSON.stringify(error)) as TranslatedString ) -} + } } } @@ -115,7 +116,7 @@ export function WalletWithdrawForm({

Prepare your wallet

- Upon starting you will receive the money in your digital wallet, if you don't have one please install one from here. + Upon starting you will receive the money in your digital wallet, if you don't have one please install one from here.

After using your wallet you will be redirected here to confirm or cancel the operation. @@ -147,7 +148,7 @@ export function WalletWithdrawForm({