Demobank

{i18n.str`Date`}	{i18n.str`Amount`}	{i18n.str`Counterpart`}	{i18n.str`Subject`}
- {item.when.t_ms === "never" - ? "" - : format(item.when.t_ms, "dd/MM/yyyy HH:mm:ss")} -	- {item.negative ? "-" : ""} - {item.amount ? ( - `${Amounts.stringifyValue(item.amount)} ${ - item.amount.currency - }` - ) : ( - <invalid value> - )} -	{item.counterpart}	{item.subject}

{i18n.str`Date`}

{i18n.str`Amount`}

{i18n.str`Counterpart`}

{i18n.str`Subject`}

- {item.when.t_ms === "never" - ? "" - : format(item.when.t_ms, "dd/MM/yyyy HH:mm:ss")} -

- {item.negative ? "-" : ""} - {item.amount ? ( - `${Amounts.stringifyValue(item.amount)} ${ - item.amount.currency - }` - ) : ( - <invalid value> - )} -

{item.counterpart}

{item.subject}

{i18n.str`Date`}	{i18n.str`Amount`}	{i18n.str`Counterpart`}	{i18n.str`Subject`}
+ {item.when.t_ms === "never" + ? "" + : format(item.when.t_ms, "dd/MM/yyyy HH:mm:ss")} +	{item.negative ? "-" : ""} + {item.amount ? ( + `${Amounts.stringifyValue(item.amount)} ${item.amount.currency + }` + ) : ( + <{i18n.str`invalid value`}> + )}	{item.counterpart}	{item.subject}

{i18n.str`Date`}

{i18n.str`Amount`}

{i18n.str`Counterpart`}

{i18n.str`Subject`}

{item.when.t_ms === "never" + ? "" + : format(item.when.t_ms, "dd/MM/yyyy HH:mm:ss")}

{item.negative ? "-" : ""} + {item.amount ? ( + `${Amounts.stringifyValue(item.amount)} ${item.amount.currency + }` + ) : ( + <{i18n.str`invalid value`}> + )}

{item.counterpart}

{item.subject}

{i18n.str`Bank account balance`}

- Waiting server response... +

+ {bankUiSettings.showDemoNav && +

+ {IS_PUBLIC_ACCOUNT_ENABLED ? ( + + This part of the demo shows how a bank that supports Taler + directly would work. In addition to using your own bank + account, you can also see the transaction history of some{" "} + Public Accounts. + + ) : ( + + This part of the demo shows how a bank that supports Taler + directly would work. + + )} +

+ }

- - {bankUiSettings.bankName} - -

- {IS_PUBLIC_ACCOUNT_ENABLED ? ( - - This part of the demo shows how a bank that supports Taler - directly would work. In addition to using your own bank - account, you can also see the transaction history of some{" "} - Public Accounts. - - ) : ( - - This part of the demo shows how a bank that supports Taler - directly would work. - - )} -

+ {/* */} + {bankUiSettings.demoSites.map(([name, url]) => { + return {name} + })} +

+ +

+ {/* */} + +

+ // + // {bankUiSettings.bankName} + // + //

+ // {IS_PUBLIC_ACCOUNT_ENABLED ? ( + // + // This part of the demo shows how a bank that supports Taler + // directly would work. In addition to using your own bank + // account, you can also see the transaction history of some{" "} + // Public Accounts. + // + // ) : ( + // + // This part of the demo shows how a bank that supports Taler + // directly would work. + // + // )} + //

Transfer details

+ {/* */} + + { + setIsRawPayto(false) + }} /> + + + + form + + + + - return ( -

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

{ - e.preventDefault(); - }} - autoCapitalize="none" - autoCorrect="off" - > -

- {i18n.str`payto URI:`} - { - rawPaytoInputSetter(e.currentTarget.value); - }} - /> - -
-

- Hint: -


-              payto://iban/[receiver-iban]?message=[subject]&amount=[
-              {limit.currency}
-              :X.Y]
-

- { - if (!rawPaytoInput) { - logger.error("Didn't get any raw Payto string!"); - return; - } - try { - await createTransaction({ - paytoUri: rawPaytoInput, - }); - onSuccess(); - rawPaytoInputSetter(undefined); - } catch (error) { - if (error instanceof RequestError) { - notifyError( - buildRequestErrorMessage(i18n, error.cause, { - onClientError: (status) => - status === HttpStatusCode.BadRequest - ? i18n.str`The request was invalid or the payto://-URI used unacceptable features.` - : undefined, - }), - ); - } else { - notifyError({ - title: i18n.str`Operation failed, please report`, - description: - error instanceof Error - ? error.message - : JSON.stringify(error), - }); - } - } - }} - /> -

- { - setIsRawPayto(false); - }} - > - {i18n.str`Use wire-transfer form?`} - -

+ {/* */} + + { + setIsRawPayto(true) + }} /> + + + + payto:// + + + + +

- {children}

@@ -301,79 +318,46 @@ export function BankFrame({ ); } +function MaybeShowDebugInfo({ info }: { info: any }): VNode { + const [settings] = useSettings() + if (settings.showDebugInfo) { + return

+    {info}
+

+ } + return +} + function StatusBanner(): VNode { const notifs = useNotifications() - return

{ + if (notifs.length === 0) return + return

{ notifs.map(n => { switch (n.message.type) { case "error": - return

- -

{n.message.title}

- -

+ return { + n.remove() + }}> {n.message.description &&

{n.message.description}

} + + {/* + show debug info + {n.message.debug &&

{n.message.debug}

- } -

+ } */} + case "info": - return

- -

{n.message.title}

- -

+ return { + n.remove(); + }} /> } })}

diff --git a/packages/demobank-ui/src/pages/HomePage.tsx b/packages/demobank-ui/src/pages/HomePage.tsx index d945d80d1..95144f086 100644 --- a/packages/demobank-ui/src/pages/HomePage.tsx +++ b/packages/demobank-ui/src/pages/HomePage.tsx @@ -137,8 +137,8 @@ export function handleNotOkResult( const errorData = result.payload; notify({ type: "error", - title: i18n.str`Could not load due to a client error`, - description: errorData?.error?.description as TranslatedString, + title: i18n.str`Could not load due to a request error`, + description: i18n.str`Request to url "${result.info.url}" returned ${result.info.status}`, debug: JSON.stringify(result), }); break; @@ -174,7 +174,7 @@ export function handleNotOkResult( assertUnreachable(result); } } - route("/") + // route("/") return

error

; } return

; diff --git a/packages/demobank-ui/src/pages/LoginForm.tsx b/packages/demobank-ui/src/pages/LoginForm.tsx index 14d261622..3ea94b899 100644 --- a/packages/demobank-ui/src/pages/LoginForm.tsx +++ b/packages/demobank-ui/src/pages/LoginForm.tsx @@ -23,6 +23,7 @@ import { useBackendContext } from "../context/backend.js"; import { useCredentialsChecker } from "../hooks/useCredentialsChecker.js"; import { bankUiSettings } from "../settings.js"; import { undefinedIfEmpty } from "../utils.js"; +import { doAutoFocus } from "./PaytoWireTransferForm.js"; /** @@ -98,8 +99,8 @@ export function LoginForm({ onRegister }: { onRegister?: () => void }): VNode { }); } else { saveError({ - title: i18n.str`Could not load due to a client error`, - // description: cause.payload.error.description, + title: i18n.str`Could not load due to a request error`, + description: i18n.str`Request to url "${cause.info.url}" returned ${cause.info.status}`, debug: JSON.stringify(cause.payload), }); } @@ -159,8 +160,7 @@ export function LoginForm({ onRegister }: { onRegister?: () => void }): VNode {

- The wire transfer to the Taler exchange bank's account is completed, now the - exchange will send the requested amount into your GNU Taler wallet. + The wire transfer to the Taler operator has been initiated. You will soon receive the requested amount in your Taler wallet.

diff --git a/packages/demobank-ui/src/pages/PaymentOptions.tsx b/packages/demobank-ui/src/pages/PaymentOptions.tsx index 49419d0dc..fef272831 100644 --- a/packages/demobank-ui/src/pages/PaymentOptions.tsx +++ b/packages/demobank-ui/src/pages/PaymentOptions.tsx @@ -30,7 +30,7 @@ export function PaymentOptions({ limit, goToConfirmOperation }: { limit: AmountJ const { i18n } = useTranslationContext(); const [settings] = useSettings(); - const [tab, setTab] = useState<"charge-wallet" | "wire-transfer" | undefined>(); + const [tab, setTab] = useState<"charge-wallet" | "wire-transfer" | undefined>("wire-transfer"); return (

@@ -82,7 +82,7 @@ export function PaymentOptions({ limit, goToConfirmOperation }: { limit: AmountJ another bank account - Make a wire transfer to an account which you know the address. + Make a wire transfer to an account which you know the bank account number @@ -108,6 +108,7 @@ export function PaymentOptions({ limit, goToConfirmOperation }: { limit: AmountJ limit={limit} onSuccess={() => { notifyInfo(i18n.str`Wire transfer created!`); + setTab(undefined) }} onCancel={() => { setTab(undefined) diff --git a/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx b/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx index 5f5a6ce3b..785dc4264 100644 --- a/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx +++ b/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx @@ -55,10 +55,11 @@ export function PaytoWireTransferForm({ onCancel: (() => void) | undefined; limit: AmountJson; }): VNode { - const [isRawPayto, setIsRawPayto] = useState(false); - const [iban, setIban] = useState(undefined); - const [subject, setSubject] = useState(undefined); - const [amount, setAmount] = useState(undefined); + const [isRawPayto, setIsRawPayto] = useState(true); + // FIXME: remove this + const [iban, setIban] = useState("DE4745461198061"); + const [subject, setSubject] = useState("ASD"); + const [amount, setAmount] = useState("1.00001"); const [rawPaytoInput, rawPaytoInputSetter] = useState( undefined, @@ -76,17 +77,17 @@ export function PaytoWireTransferForm({ const errorsWire = undefinedIfEmpty({ iban: !iban - ? i18n.str`Missing IBAN` + ? i18n.str`required` : !IBAN_REGEX.test(iban) ? i18n.str`IBAN should have just uppercased letters and numbers` : validateIBAN(iban, i18n), - subject: !subject ? i18n.str`Missing subject` : undefined, + subject: !subject ? i18n.str`required` : undefined, amount: !trimmedAmountStr - ? i18n.str`Missing amount` + ? i18n.str`required` : !parsedAmount - ? i18n.str`Amount is not valid` + ? i18n.str`not valid` : Amounts.isZero(parsedAmount) - ? i18n.str`Should be greater than 0` + ? i18n.str`should be greater than 0` : Amounts.cmp(limit, parsedAmount) === -1 ? i18n.str`balance is not enough` : undefined, @@ -101,14 +102,14 @@ export function PaytoWireTransferForm({ ? i18n.str`required` : !parsed ? i18n.str`does not follow the pattern` - : !parsed.params.amount - ? i18n.str`use the "amount" parameter to specify the amount to be transferred` - : Amounts.parse(parsed.params.amount) === undefined - ? i18n.str`the amount is not valid` - : !parsed.params.message - ? i18n.str`use the "message" parameter to specify a reference text for the transfer` - : !parsed.isKnown || parsed.targetType !== "iban" - ? i18n.str`only "IBAN" target are supported` + : !parsed.isKnown || parsed.targetType !== "iban" + ? i18n.str`only "IBAN" target are supported` + : !parsed.params.amount + ? i18n.str`use the "amount" parameter to specify the amount to be transferred` + : Amounts.parse(parsed.params.amount) === undefined + ? i18n.str`the amount is not valid` + : !parsed.params.message + ? i18n.str`use the "message" parameter to specify a reference text for the transfer` : !IBAN_REGEX.test(parsed.iban) ? i18n.str`IBAN should have just uppercased letters and numbers` : validateIBAN(parsed.iban, i18n), @@ -159,6 +160,9 @@ export function PaytoWireTransferForm({ } return (

+ {/** + * FIXME: Scan a qr code + */}

{title} @@ -167,6 +171,17 @@ export function PaytoWireTransferForm({
{ + if (parsed && parsed.isKnown && parsed.targetType === "iban") { + setIban(parsed.iban) + const amount = Amounts.parse(parsed.params["amount"]) + if (amount) { + setAmount(Amounts.stringifyValue(amount)) + } + const subject = parsed.params["subject"] + if (subject) { + setSubject(subject) + } + } setIsRawPayto(false) }} /> @@ -180,12 +195,22 @@ export function PaytoWireTransferForm({ { + if (iban) { + const payto = buildPayto("iban", iban, undefined) + if (parsedAmount) { + payto.params["amount"] = Amounts.stringify(parsedAmount) + } + if (subject) { + payto.params["message"] = subject + } + rawPaytoInputSetter(stringifyPaytoUri(payto)) + } setIsRawPayto(true) }} /> - using the payto:// format + Import payto:// URI @@ -195,7 +220,7 @@ export function PaytoWireTransferForm({

{ @@ -203,105 +228,106 @@ export function PaytoWireTransferForm({ }} >
-
- {!isRawPayto ? - - -
- {i18n.str`Account number`} -
- { - setIban(e.currentTarget.value); - }} - /> - -
-
the receiver of the money
-
+ {!isRawPayto ? +
-
- {i18n.str`Transfer subject`} -
- { - setSubject(e.currentTarget.value); - }} - /> - -
-
some text to identify the transfer
+
+ {i18n.str`Recipient`} +
+ { + setIban(e.currentTarget.value.toUpperCase()); + }} + /> +
+
+ IBAN of the recipient's account +
+
-
- {i18n.str`Amount`} - { - setAmount(d) +
+ {i18n.str`Transfer subject`} +
+ { + setSubject(e.currentTarget.value); }} /> -
amount to transfer

+
some text to identify the transfer
+
- : - -
- {i18n.str`payto URI:`} -
- { - rawPaytoInputSetter(e.currentTarget.value); - }} - /> - -
-
+
+ {i18n.str`Amount`} + { + setAmount(d) + }} + /> + +
amount to transfer
+
- - } -
+
: +
+
+ {i18n.str`payto URI:`} +
+ { + rawPaytoInputSetter(e.currentTarget.value); + }} + /> + <ShowInputErrorLabel + message={errorsPayto?.rawPaytoInput} + isDirty={rawPaytoInput !== undefined} + /> + </div> + </div> + </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"> {onCancel ? @@ -328,17 +354,37 @@ export function PaytoWireTransferForm({ ) } + +/** + * Show the element when the load ended + * @param element + / +export function doAutoFocus(element: HTMLElement | null) { + if (element) { + window.requestIdleCallback(() => { + element.focus() + element.scrollIntoView({ + behavior: "smooth", + block: "center", + inline: "center" + }) + }) + } +} + export function Amount( { currency, name, value, error, + left, onChange, }: { error?: string; currency: string; name: string; + left?: boolean | undefined, value: string | undefined; onChange?: (s: string) => void; }, @@ -346,13 +392,16 @@ export function Amount( ): VNode { return ( <div class="mt-2"> - <div class="relative rounded-md shadow-sm"> - <div class="pointer-events-none absolute inset-y-0 flex items-center pl-3"> + <div class="flex rounded-md shadow-sm border-0 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600"> + <div + class="pointer-events-none inset-y-0 flex items-center px-3" + > <span class="text-gray-500 sm:text-sm">{currency}</span> </div> <input type="number" - class="text-right 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" + data-left={left} + class="text-right rounded-md rounded-l-none data-[left=true]:text-left w-full py-1.5 pl-3 text-gray-900 placeholder:text-gray-400 sm:text-sm sm:leading-6" placeholder="0.00" aria-describedby="price-currency" ref={ref} name={name} @@ -371,3 +420,4 @@ export function Amount( </div> ); } + diff --git a/packages/demobank-ui/src/pages/QrCodeSection.tsx b/packages/demobank-ui/src/pages/QrCodeSection.tsx index 0a5a386ae..6a50d4ef3 100644 --- a/packages/demobank-ui/src/pages/QrCodeSection.tsx +++ b/packages/demobank-ui/src/pages/QrCodeSection.tsx @@ -86,7 +86,6 @@ export function QrCodeSection({ </h3> <div class="mt-4"> <a href={talerWithdrawUri} - // class="text-sm font-semibold leading-6 text-gray-900 btn " class="inline-flex items-center 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" > <i18n.Translate>Click here to start</i18n.Translate> diff --git a/packages/demobank-ui/src/pages/UpdateAccountPassword.tsx b/packages/demobank-ui/src/pages/UpdateAccountPassword.tsx index d19c411f3..46f4fe0ef 100644 --- a/packages/demobank-ui/src/pages/UpdateAccountPassword.tsx +++ b/packages/demobank-ui/src/pages/UpdateAccountPassword.tsx @@ -5,6 +5,7 @@ import { useEffect, useRef, useState } from "preact/hooks"; import { ShowInputErrorLabel } from "../components/ShowInputErrorLabel.js"; import { useAdminAccountAPI, useBusinessAccountDetails } from "../hooks/circuit.js"; import { buildRequestErrorMessage, undefinedIfEmpty } from "../utils.js"; +import { doAutoFocus } from "./PaytoWireTransferForm.js"; export function UpdateAccountPassword({ account, @@ -27,11 +28,6 @@ export function UpdateAccountPassword({ const [password, setPassword] = useState<string | undefined>(); const [repeat, setRepeat] = useState<string | undefined>(); - const ref = useRef<HTMLInputElement>(null); - useEffect(() => { - if (focus) ref.current?.focus(); - }, [focus]); - if (!result.ok) { if (result.loading || result.type === ErrorType.TIMEOUT) { return onLoadNotOk(result); @@ -96,7 +92,7 @@ export function UpdateAccountPassword({ </label> <div class="mt-2"> <input - ref={ref} + ref={focus ? doAutoFocus : undefined} 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="password" diff --git a/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx b/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx index 3c5ee34fd..7357223b7 100644 --- a/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx +++ b/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx @@ -29,14 +29,15 @@ import { notifyError, useTranslationContext, } from "@gnu-taler/web-util/browser"; -import { VNode, h } from "preact"; +import { Fragment, VNode, h } from "preact"; import { forwardRef } from "preact/compat"; import { useEffect, useRef, useState } from "preact/hooks"; import { useAccessAPI } from "../hooks/access.js"; import { buildRequestErrorMessage, undefinedIfEmpty } from "../utils.js"; -import { Amount } from "./PaytoWireTransferForm.js"; +import { Amount, doAutoFocus } from "./PaytoWireTransferForm.js"; import { useSettings } from "../hooks/settings.js"; import { OperationState } from "./OperationState/index.js"; +import { Attention } from "../components/Attention.js"; const logger = new Logger("WalletWithdrawForm"); const RefAmount = forwardRef(Amount); @@ -53,47 +54,13 @@ function OldWithdrawalForm({ goToConfirmOperation, limit, onCancel, focus }: { const { createWithdrawal } = useAccessAPI(); const [amountStr, setAmountStr] = useState<string | undefined>(`${settings.maxWithdrawalAmount}`); - const ref = useRef<HTMLInputElement>(null); - useEffect(() => { - if (focus) ref.current?.focus(); - }, [focus]); if (!!settings.currentWithdrawalOperationId) { - return <div> - - <div class="rounded-md bg-yellow-50 ring-yellow-2 p-4"> - <div class="flex"> - <div class="flex-shrink-0"> - <svg class="h-5 w-5 text-yellow-300" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> - <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z" clip-rule="evenodd" /> - </svg> - </div> - <div class="ml-3"> - <h3 class="text-sm font-bold text-yellow-800"> - <i18n.Translate>There is an operation already</i18n.Translate> - </h3> - <div class="mt-2 text-sm text-yellow-700"> - <p> - <i18n.Translate> - To complete or cancel the operation click <a class="font-semibold text-yellow-700 hover:text-yellow-600" href={`#/operation/${settings.currentWithdrawalOperationId}`}>here</a> - </i18n.Translate> - </p> - </div> - - </div> - </div> - </div > - <div class="flex justify-end 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 bg-white p-2 rounded-sm" - onClick={() => { - updateSettings("currentWithdrawalOperationId", undefined) - onCancel() - }} - > - <i18n.Translate>Cancel</i18n.Translate> - </button> - </div> - </div> + return <Attention type="warning" title={i18n.str`There is an operation already`}> + <i18n.Translate> + To complete or cancel the operation click <a class="font-semibold text-yellow-700 hover:text-yellow-600" href={`#/operation/${settings.currentWithdrawalOperationId}`}>here</a> + </i18n.Translate> + </Attention> } const trimmedAmountStr = amountStr?.trim(); @@ -157,8 +124,8 @@ function OldWithdrawalForm({ goToConfirmOperation, limit, onCancel, focus }: { e.preventDefault() }} > - <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"> + <div class="px-4 py-6 "> + <div class="grid max-w-xs grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6"> <div class="sm:col-span-5"> <label for="withdraw-amount">{i18n.str`Amount`}</label> <RefAmount @@ -169,51 +136,53 @@ function OldWithdrawalForm({ goToConfirmOperation, limit, onCancel, focus }: { setAmountStr(v); }} error={errors?.amount} - ref={ref} + ref={focus ? doAutoFocus : undefined} /> </div> - <div class="sm:col-span-5"> - <span class="isolate inline-flex rounded-md shadow-sm"> - <button type="button" - class="relative inline-flex px-6 py-4 text-sm items-center rounded-l-md bg-white text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10" - onClick={(e) => { - e.preventDefault(); - setAmountStr("50.00") - }} - > - 50.00 - </button> - <button type="button" - class="relative -ml-px -mr-px inline-flex px-6 py-4 text-sm items-center bg-white text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10" - onClick={(e) => { - e.preventDefault(); - setAmountStr("25.00") - }} - > + </div> + <div class="mt-4"> + <div class="sm:inline"> - 25.00 - </button> - <button type="button" - class="relative -ml-px -mr-px inline-flex px-6 py-4 text-sm items-center bg-white text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10" - onClick={(e) => { - e.preventDefault(); - setAmountStr("10.00") - }} - > - 10.00 - </button> - <button type="button" - class="relative inline-flex px-6 py-4 text-sm items-center rounded-r-md bg-white text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10" - onClick={(e) => { - e.preventDefault(); - setAmountStr("5.00") - }} - > - 5.00 - </button> - </span> - </div> + <button type="button" + class=" inline-flex px-6 py-4 text-sm items-center rounded-l-md bg-white text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10" + onClick={(e) => { + e.preventDefault(); + setAmountStr("50.00") + }} + > + 50.00 + </button> + <button type="button" + class=" -ml-px -mr-px inline-flex px-6 py-4 text-sm items-center rounded-r-md sm:rounded-none bg-white text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10" + onClick={(e) => { + e.preventDefault(); + setAmountStr("25.00") + }} + > + 25.00 + </button> + </div> + <div class="mt-4 sm:inline"> + <button type="button" + class=" -ml-px -mr-px inline-flex px-6 py-4 text-sm items-center rounded-l-md sm:rounded-none bg-white text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10" + onClick={(e) => { + e.preventDefault(); + setAmountStr("10.00") + }} + > + 10.00 + </button> + <button type="button" + class=" inline-flex px-6 py-4 text-sm items-center rounded-r-md bg-white text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10" + onClick={(e) => { + e.preventDefault(); + setAmountStr("5.00") + }} + > + 5.00 + </button> + </div> </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"> @@ -255,46 +224,20 @@ export function WalletWithdrawForm({ <div class="px-4 sm:px-0"> <h2 class="text-base font-semibold leading-7 text-gray-900"><i18n.Translate>Prepare your wallet</i18n.Translate></h2> <p class="mt-1 text-sm text-gray-500"> - <i18n.Translate>After using your wallet you will confirm or cancel the operation.</i18n.Translate> + <i18n.Translate>After using your wallet you will need to confirm or cancel the operation on this site.</i18n.Translate> </p> </div> <div class="col-span-2"> - {settings.showInstallWallet && <div class="rounded-md bg-blue-50 ring-blue-2 ring-2 p-4"> - <div class="flex"> - <div class="flex-shrink-0"> - <svg class="h-5 w-5 text-blue-300" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> - <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z" clip-rule="evenodd" /> - </svg> - </div> - <div class="ml-3"> - <h3 class="text-sm font-bold text-blue-800"> - <i18n.Translate>You need a GNU Taler Wallet</i18n.Translate> - </h3> - <div class="mt-2 text-sm text-blue-700"> - <p> - <i18n.Translate> - If you dont have one yet you can follow the instruction <a target="_blank" rel="noreferrer noopener" class="font-semibold text-blue-700 hover:text-blue-600" href="https://taler.net/en/wallet.html">here</a> - </i18n.Translate> - </p> - <p class="mt-3 text-sm flex justify-end"> - <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(); - updateSettings("showInstallWallet", false); - }} - > - I know - <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> - <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" /> - </svg> - </button> - </p> - - </div> - </div> - </div> - </div>} + {settings.showInstallWallet && + <Attention title={i18n.str`You need a GNU Taler Wallet`} onClose={() => { + updateSettings("showInstallWallet", false); + }}> + <i18n.Translate> + If you don't have one yet you can follow the instruction <a target="_blank" rel="noreferrer noopener" class="font-semibold text-blue-700 hover:text-blue-600" href="https://taler.net/en/wallet.html">here</a> + </i18n.Translate> + </Attention> + } {!settings.fastWithdrawal ? <OldWithdrawalForm diff --git a/packages/demobank-ui/src/pages/WithdrawalConfirmationQuestion.tsx b/packages/demobank-ui/src/pages/WithdrawalConfirmationQuestion.tsx index d160a88b3..208d4b859 100644 --- a/packages/demobank-ui/src/pages/WithdrawalConfirmationQuestion.tsx +++ b/packages/demobank-ui/src/pages/WithdrawalConfirmationQuestion.tsx @@ -37,6 +37,7 @@ import { useMemo, useState } from "preact/hooks"; import { ShowInputErrorLabel } from "../components/ShowInputErrorLabel.js"; import { useAccessAnonAPI } from "../hooks/access.js"; import { buildRequestErrorMessage, undefinedIfEmpty } from "../utils.js"; +import { useSettings } from "../hooks/settings.js"; const logger = new Logger("WithdrawalConfirmationQuestion"); @@ -59,6 +60,7 @@ export function WithdrawalConfirmationQuestion({ withdrawUri, }: Props): VNode { const { i18n } = useTranslationContext(); + const [settings, updateSettings] = useSettings() const captchaNumbers = useMemo(() => { return { @@ -87,7 +89,9 @@ export function WithdrawalConfirmationQuestion({ await confirmWithdrawal( withdrawUri.withdrawalOperationId, ); - notifyInfo(i18n.str`Wire transfer completed!`) + if (!settings.showWithdrawalSuccess) { + notifyInfo(i18n.str`Wire transfer completed!`) + } } catch (error) { if (error instanceof RequestError) { notify( @@ -203,7 +207,7 @@ export function WithdrawalConfirmationQuestion({ <div class="grid grid-cols-1 gap-x-8 gap-y-8 pt-10 md:grid-cols-3 bg-gray-100 my-4 px-4 pb-4 rounded-lg"> <div class="px-4 sm:px-0"> - <h2 class="text-base font-semibold text-gray-900"><i18n.Translate>Answer the next question to authorize the wire transfer</i18n.Translate></h2> + <h2 class="text-base font-semibold text-gray-900"><i18n.Translate>Answer the next question to authorize the wire transfer.</i18n.Translate></h2> </div> <form class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl md:col-span-2" @@ -311,14 +315,10 @@ export function WithdrawalConfirmationQuestion({ } })()} - <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"> - {Amounts.stringifyValue(details.amount)} + {Amounts.currencyOf(details.amount)} {Amounts.stringifyValue(details.amount)} </dd> </div> </dl> diff --git a/packages/demobank-ui/src/pages/WithdrawalQRCode.tsx b/packages/demobank-ui/src/pages/WithdrawalQRCode.tsx index 8f4e175f6..c8efc033b 100644 --- a/packages/demobank-ui/src/pages/WithdrawalQRCode.tsx +++ b/packages/demobank-ui/src/pages/WithdrawalQRCode.tsx @@ -94,20 +94,12 @@ export function WithdrawalQRCode({ </div> <div class="mt-3 text-center sm:mt-5"> <h3 class="text-base font-semibold leading-6 text-gray-900" id="modal-title"> - <i18n.Translate>Withdrawal OK</i18n.Translate> + <i18n.Translate>Withdrawal confirmed</i18n.Translate> </h3> <div class="mt-2"> <p class="text-sm text-gray-500"> <i18n.Translate> - The wire transfer to the Taler exchange bank's account is completed, now the - exchange will send the requested amount into your GNU Taler wallet. - </i18n.Translate> - </p> - </div> - <div class="mt-2"> - <p > - <i18n.Translate> - You can close this page now or continue to the account page. + The wire transfer to the Taler operator has been initiated. You will soon receive the requested amount in your Taler wallet. </i18n.Translate> </p> </div> diff --git a/packages/demobank-ui/src/pages/admin/AccountForm.tsx b/packages/demobank-ui/src/pages/admin/AccountForm.tsx index 02df824a2..ed8bf610d 100644 --- a/packages/demobank-ui/src/pages/admin/AccountForm.tsx +++ b/packages/demobank-ui/src/pages/admin/AccountForm.tsx @@ -4,6 +4,7 @@ import { PartialButDefined, RecursivePartial, WithIntermediate, undefinedIfEmpty import { useEffect, useRef, useState } from "preact/hooks"; import { useTranslationContext } from "@gnu-taler/web-util/browser"; import { buildPayto, parsePaytoUri } from "@gnu-taler/taler-util"; +import { doAutoFocus } from "../PaytoWireTransferForm.js"; const IBAN_REGEX = /^[A-Z][A-Z0-9]$/; const EMAIL_REGEX = @@ -37,10 +38,6 @@ export function AccountForm({ RecursivePartial<typeof initial> | undefined >(undefined); const { i18n } = useTranslationContext(); - const ref = useRef<HTMLInputElement>(null); - useEffect(() => { - if (focus) ref.current?.focus(); - }, [focus]); function updateForm(newForm: typeof initial): void { @@ -97,7 +94,6 @@ export function AccountForm({ <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"> - <div class="sm:col-span-5"> <label class="block text-sm font-medium leading-6 text-gray-900" @@ -108,7 +104,7 @@ export function AccountForm({ </label> <div class="mt-2"> <input - ref={ref} + ref={focus ? doAutoFocus : undefined} type="text" class="block w-full disabled:bg-gray-100 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="username" diff --git a/packages/demobank-ui/src/pages/admin/Home.tsx b/packages/demobank-ui/src/pages/admin/Home.tsx index ffa559097..d50ff14b4 100644 --- a/packages/demobank-ui/src/pages/admin/Home.tsx +++ b/packages/demobank-ui/src/pages/admin/Home.tsx @@ -10,6 +10,7 @@ import { AdminAccount } from "./Account.js"; import { AccountList } from "./AccountList.js"; import { CreateNewAccount } from "./CreateNewAccount.js"; import { RemoveAccount } from "./RemoveAccount.js"; +import { Transactions } from "../../components/Transactions/index.js"; /** * Query account information and show QR code if there is pending withdrawal @@ -141,6 +142,7 @@ export function AdminHome({ onRegister }: Props): VNode { <AdminAccount onRegister={onRegister} /> + <Transactions account="admin"/> </Fragment> ); } \ No newline at end of file diff --git a/packages/demobank-ui/src/pages/admin/RemoveAccount.tsx b/packages/demobank-ui/src/pages/admin/RemoveAccount.tsx index 1e5370afc..b323b0d01 100644 --- a/packages/demobank-ui/src/pages/admin/RemoveAccount.tsx +++ b/packages/demobank-ui/src/pages/admin/RemoveAccount.tsx @@ -6,6 +6,8 @@ import { Amounts, HttpStatusCode, TranslatedString } from "@gnu-taler/taler-util import { buildRequestErrorMessage, undefinedIfEmpty } from "../../utils.js"; import { useEffect, useRef, useState } from "preact/hooks"; import { ShowInputErrorLabel } from "../../components/ShowInputErrorLabel.js"; +import { Attention } from "../../components/Attention.js"; +import { doAutoFocus } from "../PaytoWireTransferForm.js"; export function RemoveAccount({ account, @@ -36,47 +38,15 @@ export function RemoveAccount({ } return onLoadNotOk(result); } - const ref = useRef<HTMLInputElement>(null); - useEffect(() => { - if (focus) ref.current?.focus(); - }, [focus]); - const balance = Amounts.parse(result.data.balance.amount); if (!balance) { return <div>there was an error reading the balance</div>; } const isBalanceEmpty = Amounts.isZero(balance); if (!isBalanceEmpty) { - return <div> - <div class="rounded-md bg-yellow-50 p-4"> - <div class="flex"> - <div class="flex-shrink-0"> - <svg class="h-5 w-5 text-yellow-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> - <path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" /> - </svg> - </div> - <div class="ml-3"> - <h3 class="text-sm font-medium text-yellow-800"> - <i18n.Translate>Can't delete the account</i18n.Translate> - </h3> - <div class="mt-2 text-sm text-yellow-700"> - <p> - <i18n.Translate>The account can't be delete while still holding some balance. First make sure that the owner make a complete cashout.</i18n.Translate> - </p> - </div> - </div> - - </div> - </div> - <div class="mt-2 flex justify-end"> - <button type="button" class="rounded-md ring-1 ring-gray-400 bg-white px-3 py-2 text-sm font-semibold shadow-sm hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 " - onClick={() => { - onCancel() - }}> - <i18n.Translate>Go back</i18n.Translate> - </button> - </div> - </div> + return <Attention type="warning" title={i18n.str`Can't delete the account`} onClose={onCancel}> + <i18n.Translate>The account can't be delete while still holding some balance. First make sure that the owner make a complete cashout.</i18n.Translate> + </Attention> } async function doRemove() { @@ -117,26 +87,9 @@ export function RemoveAccount({ return ( <div> - <div class="rounded-md bg-yellow-50 p-4"> - <div class="flex"> - <div class="flex-shrink-0"> - <svg class="h-5 w-5 text-yellow-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> - <path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" /> - </svg> - </div> - <div class="ml-3"> - <h3 class="text-sm font-bold text-yellow-800"> - <i18n.Translate>You are going to remove the account</i18n.Translate> - </h3> - <div class="mt-2 text-sm text-yellow-700"> - <p> - <i18n.Translate>This step can't be undone.</i18n.Translate> - </p> - </div> - </div> - - </div> - </div> + <Attention type="warning" title={i18n.str`You are going to remove the account`}> + <i18n.Translate>This step can't be undone.</i18n.Translate> + </Attention> <div class="grid grid-cols-1 gap-x-8 gap-y-8 pt-10 md:grid-cols-3 bg-gray-100 my-4 px-4 pb-4 rounded-lg"> <div class="px-4 sm:px-0"> @@ -164,7 +117,7 @@ export function RemoveAccount({ </label> <div class="mt-2"> <input - ref={ref} + ref={focus ? doAutoFocus : undefined} type="text" 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="password" -- cgit v1.2.3

Latest transactions

- - Welcome, {account} ({payto.iban})! stringifyPaytoUri(payto)} /> - -

{i18n.str`Bank account balance`}

{i18n.str`Payments`}

{i18n.str`Latest transactions`}

- - {bankUiSettings.bankName} - -

KUDOS 100.00

+ // + // {bankUiSettings.bankName} + // + //

{i18n.str`Obtain digital cash`}

{i18n.str`Transfer to bank account`}

Transfer details

- There is an operation already -

+ There is an operation already +

Latest transactions

{i18n.str`Welcome to ${bankUiSettings.bankName}!`}

+ {title} +

- This is a demo bank! -

{n.message.title}

Latest transactions

- - Welcome, {account} ({payto.iban})! stringifyPaytoUri(payto)} /> - -

{i18n.str`Bank account balance`}

{i18n.str`Payments`}

{i18n.str`Latest transactions`}

{i18n.str`Obtain digital cash`}

{i18n.str`Transfer to bank account`}

Transfer details

- There is an operation already -

+ There is an operation already +

Latest transactions

{i18n.str`Welcome to ${bankUiSettings.bankName}!`}

+ {title} +

- This is a demo bank! -

{n.message.title}

- Withdrawal OK + Withdrawal confirmed