From 1708d49a2d5da1f325173a030695223e5a24e75c Mon Sep 17 00:00:00 2001 From: Sebastian Date: Fri, 29 Sep 2023 16:02:15 -0300 Subject: more ui --- packages/demobank-ui/dev.mjs | 2 +- packages/demobank-ui/src/components/Attention.tsx | 59 +++++ .../demobank-ui/src/components/ErrorLoading.tsx | 22 +- .../src/components/Transactions/views.tsx | 51 ++-- packages/demobank-ui/src/demobank-ui-settings.js | 21 ++ packages/demobank-ui/src/hooks/access.ts | 3 +- packages/demobank-ui/src/hooks/circuit.ts | 2 +- packages/demobank-ui/src/hooks/settings.ts | 3 + .../demobank-ui/src/pages/AccountPage/views.tsx | 62 ++--- packages/demobank-ui/src/pages/BankFrame.tsx | 104 ++++---- packages/demobank-ui/src/pages/HomePage.tsx | 6 +- packages/demobank-ui/src/pages/LoginForm.tsx | 8 +- .../demobank-ui/src/pages/OperationState/state.ts | 4 +- .../demobank-ui/src/pages/OperationState/views.tsx | 5 +- packages/demobank-ui/src/pages/PaymentOptions.tsx | 5 +- .../src/pages/PaytoWireTransferForm.tsx | 268 ++++++++++++--------- packages/demobank-ui/src/pages/QrCodeSection.tsx | 1 - .../src/pages/UpdateAccountPassword.tsx | 8 +- .../demobank-ui/src/pages/WalletWithdrawForm.tsx | 183 +++++--------- .../src/pages/WithdrawalConfirmationQuestion.tsx | 14 +- .../demobank-ui/src/pages/WithdrawalQRCode.tsx | 12 +- .../demobank-ui/src/pages/admin/AccountForm.tsx | 8 +- packages/demobank-ui/src/pages/admin/Home.tsx | 2 + .../demobank-ui/src/pages/admin/RemoveAccount.tsx | 65 +---- 24 files changed, 448 insertions(+), 470 deletions(-) create mode 100644 packages/demobank-ui/src/components/Attention.tsx create mode 100644 packages/demobank-ui/src/demobank-ui-settings.js diff --git a/packages/demobank-ui/dev.mjs b/packages/demobank-ui/dev.mjs index 9c09e5716..f29a05e49 100755 --- a/packages/demobank-ui/dev.mjs +++ b/packages/demobank-ui/dev.mjs @@ -18,7 +18,7 @@ import { serve } from "@gnu-taler/web-util/node"; import { initializeDev } from "@gnu-taler/web-util/build"; -const devEntryPoints = ["src/stories.tsx", "src/index.tsx"]; +const devEntryPoints = ["src/stories.tsx", "src/index.tsx", "src/demobank-ui-settings.js"]; const build = initializeDev({ type: "development", diff --git a/packages/demobank-ui/src/components/Attention.tsx b/packages/demobank-ui/src/components/Attention.tsx new file mode 100644 index 000000000..3313e5796 --- /dev/null +++ b/packages/demobank-ui/src/components/Attention.tsx @@ -0,0 +1,59 @@ +import { TranslatedString } from "@gnu-taler/taler-util"; +import { ComponentChildren, Fragment, VNode, h } from "preact"; +import { assertUnreachable } from "./Routing.js"; + +interface Props { + type?: "info" | "success" | "warning" | "danger", + onClose?: () => void, + title: TranslatedString, + children?: ComponentChildren , +} +export function Attention({ type = "info", title, children, onClose }: Props): VNode { + return
+
+
+
+ + {(() => { + switch (type) { + case "info": + return + case "warning": + return + case "danger": + return + case "success": + return + default: + assertUnreachable(type) + } + })()} + +
+
+

+ {title} +

+
+ {children} +
+
+ {onClose && +
+ +
+ } +
+
+ +
+} diff --git a/packages/demobank-ui/src/components/ErrorLoading.tsx b/packages/demobank-ui/src/components/ErrorLoading.tsx index f83b61234..ee62671ce 100644 --- a/packages/demobank-ui/src/components/ErrorLoading.tsx +++ b/packages/demobank-ui/src/components/ErrorLoading.tsx @@ -17,25 +17,13 @@ import { HttpError, useTranslationContext } from "@gnu-taler/web-util/browser"; import { h, VNode } from "preact"; +import { Attention } from "./Attention.js"; +import { TranslatedString } from "@gnu-taler/taler-util"; export function ErrorLoading({ error }: { error: HttpError }): VNode { const { i18n } = useTranslationContext() - return ( -
-
-
- -
-
-

{error.message}

-
-
-
-

Got status "{error.info.status}" on {error.info.url}

-
-
-
+ return ( +

Got status "{error.info.status}" on {error.info.url}

+ ); } diff --git a/packages/demobank-ui/src/components/Transactions/views.tsx b/packages/demobank-ui/src/components/Transactions/views.tsx index f8b2e3113..f92c874f3 100644 --- a/packages/demobank-ui/src/components/Transactions/views.tsx +++ b/packages/demobank-ui/src/components/Transactions/views.tsx @@ -19,6 +19,7 @@ import { useTranslationContext } from "@gnu-taler/web-util/browser"; import { State } from "./index.js"; import { format, isToday } from "date-fns"; import { Amounts } from "@gnu-taler/taler-util"; +import { useEffect, useRef } from "preact/hooks"; export function LoadingUriView({ error }: State.LoadingUriError): VNode { const { i18n } = useTranslationContext(); @@ -55,9 +56,9 @@ export function ReadyView({ transactions, onNext, onPrev }: State.Ready): VNode {i18n.str`Date`} - {i18n.str`Amount`} - {i18n.str`Counterpart`} - {i18n.str`Subject`} + {i18n.str`Amount`} + {i18n.str`Counterpart`} + {i18n.str`Subject`} @@ -69,22 +70,38 @@ export function ReadyView({ transactions, onNext, onPrev }: State.Ready): VNode {txs.map(item => { + const time = item.when.t_ms === "never" ? "" : format(item.when.t_ms, "HH:mm:ss") + const amount = + {item.negative ? "-" : ""} + {item.amount ? ( + `${Amounts.stringifyValue(item.amount)} ${item.amount.currency + }` + ) : ( + <{i18n.str`invalid value`}> + )} + return ( -
{item.when.t_ms === "never" - ? "" - : format(item.when.t_ms, "HH:mm:ss")}
+
{time}
+
+
Amount
+
+ {item.negative ? i18n.str`sent` : i18n.str`received`} {item.amount ? ( + `${Amounts.stringifyValue(item.amount)}` + ) : ( + <{i18n.str`invalid value`}> + )}
+
Counterpart
+
+ {item.negative ? i18n.str`to` : i18n.str`from`} {item.counterpart} +
+
- {item.negative ? "-" : ""} - {item.amount ? ( - `${Amounts.stringifyValue(item.amount)} ${item.amount.currency - }` - ) : ( - <{i18n.str`invalid value`}> - )} - {item.counterpart} + class="hidden sm:table-cell px-3 py-3.5 text-sm text-gray-500 data-[negative=false]:text-green-600 data-[negative=true]:text-red-600"> + {amount} + + {item.counterpart} {item.subject} ) })} @@ -94,8 +111,8 @@ export function ReadyView({ transactions, onNext, onPrev }: State.Ready): VNode - -