From c34e71cf3de3da90d0d1662141aa1754a42ea37a Mon Sep 17 00:00:00 2001 From: Sebastian Date: Wed, 26 Oct 2022 14:49:08 -0300 Subject: prevent form submitting --- packages/demobank-ui/src/components/app.tsx | 6 +- packages/demobank-ui/src/context/translation.ts | 8 +- packages/demobank-ui/src/index.tsx | 4 +- packages/demobank-ui/src/pages/home/index.tsx | 107 ++++++++++++------------ 4 files changed, 62 insertions(+), 63 deletions(-) (limited to 'packages/demobank-ui/src') diff --git a/packages/demobank-ui/src/components/app.tsx b/packages/demobank-ui/src/components/app.tsx index ad8a45e9a..49b218205 100644 --- a/packages/demobank-ui/src/components/app.tsx +++ b/packages/demobank-ui/src/components/app.tsx @@ -1,6 +1,6 @@ -import { FunctionalComponent } from "preact"; -import { TranslationProvider } from "../context/translation"; -import { BankHome } from "../pages/home/index"; +import { h, FunctionalComponent } from "preact"; +import { TranslationProvider } from "../context/translation.js"; +import { BankHome } from "../pages/home/index.js"; const App: FunctionalComponent = () => { return ( diff --git a/packages/demobank-ui/src/context/translation.ts b/packages/demobank-ui/src/context/translation.ts index 1879fe43e..1dbca56e6 100644 --- a/packages/demobank-ui/src/context/translation.ts +++ b/packages/demobank-ui/src/context/translation.ts @@ -21,9 +21,9 @@ import { createContext, h, VNode } from 'preact'; import { useContext, useEffect } from 'preact/hooks'; -import { useLang } from '../hooks'; +import { useLang } from '../hooks/index.js'; import * as jedLib from 'jed'; -import { strings } from '../i18n/strings'; +import { strings } from '../i18n/strings.js'; interface Type { lang: string; @@ -58,9 +58,9 @@ export const TranslationProvider = ({ const [lang, changeLanguage] = useLang(initial); useEffect(() => { - if (forceLang) + if (forceLang) changeLanguage(forceLang); - + }); console.log('lang store', strings); const handler = new jedLib.Jed(strings[lang] || strings['en']); diff --git a/packages/demobank-ui/src/index.tsx b/packages/demobank-ui/src/index.tsx index 9aa79f4aa..4302bb33b 100644 --- a/packages/demobank-ui/src/index.tsx +++ b/packages/demobank-ui/src/index.tsx @@ -1,6 +1,6 @@ -import App from "./components/app"; +import App from "./components/app.js"; export default App; -import { render, h, Fragment } from "preact"; +import { render, h } from "preact"; const app = document.getElementById("app"); diff --git a/packages/demobank-ui/src/pages/home/index.tsx b/packages/demobank-ui/src/pages/home/index.tsx index 8f328b115..6fbb00ce4 100644 --- a/packages/demobank-ui/src/pages/home/index.tsx +++ b/packages/demobank-ui/src/pages/home/index.tsx @@ -15,25 +15,22 @@ */ /* eslint-disable @typescript-eslint/no-explicit-any */ -import useSWR, { SWRConfig as _SWRConfig, useSWRConfig } from "swr"; -import { h, Fragment, VNode, createContext } from "preact"; +import { createContext, Fragment, h, VNode } from "preact"; +import useSWR, { SWRConfig, useSWRConfig } from "swr"; import { - useRef, - useState, - useEffect, StateUpdater, useContext, + useEffect, + useRef, + useState, } from "preact/hooks"; -import { useTranslator, Translate } from "../../i18n/index.js"; -import { QR } from "../../components/QR.js"; -import { useNotNullLocalStorage, useLocalStorage } from "../../hooks/index.js"; -import "../../scss/main.scss"; import talerLogo from "../../assets/logo-white.svg"; import { LangSelectorLikePy as LangSelector } from "../../components/menu/LangSelector.js"; - -// FIXME: Fix usages of SWRConfig, doing this isn't the best practice (but hey, it works for now) -const SWRConfig = _SWRConfig as any; +import { QR } from "../../components/QR.js"; +import { useLocalStorage, useNotNullLocalStorage } from "../../hooks/index.js"; +import { Translate, useTranslator } from "../../i18n/index.js"; +import "../../scss/main.scss"; /** * If the first argument does not look like a placeholder, return it. @@ -42,7 +39,7 @@ const SWRConfig = _SWRConfig as any; * Useful for placeholder string replacements optionally * done as part of the build system. */ -const replacementOrDefault = (x: string, defaultVal: string) => { +const replacementOrDefault = (x: string, defaultVal: string): string => { if (x.startsWith("__")) { return defaultVal; } @@ -121,10 +118,10 @@ interface CredentialsRequestType { /** * Request body of /register. */ -interface LoginRequestType { - username: string; - password: string; -} +// interface LoginRequestType { +// username: string; +// password: string; +// } interface WireTransferRequestType { iban: string; @@ -161,17 +158,20 @@ interface PageStateType { /** * Bank account specific information. */ -interface AccountStateType { - balance: string; - /* FIXME: Need history here. */ -} +// interface AccountStateType { +// balance: string; +// /* FIXME: Need history here. */ +// } /************ * Helpers. * ***********/ -function maybeDemoContent(content: VNode) { - if (UI_IS_DEMO) return content; +function maybeDemoContent(content: VNode): VNode { + if (UI_IS_DEMO) { + return content; + } + return ; } /** @@ -281,7 +281,7 @@ function useTransactionPageNumber(): [number, StateUpdater] { /** * Craft headers with Authorization and Content-Type. */ -function prepareHeaders(username: string, password: string) { +function prepareHeaders(username: string, password: string): Headers { const headers = new Headers(); headers.append( "Authorization", @@ -291,7 +291,7 @@ function prepareHeaders(username: string, password: string) { return headers; } -const getBankBackendBaseUrl = () => { +const getBankBackendBaseUrl = (): string => { const overrideUrl = localStorage.getItem("bank-base-url"); if (overrideUrl) { console.log( @@ -299,10 +299,7 @@ const getBankBackendBaseUrl = () => { ); return overrideUrl; } - const maybeRootPath = - typeof window !== undefined - ? window.location.origin + window.location.pathname - : "/"; + const maybeRootPath = "https://bank.demo.taler.net/demobanks/default/"; if (!maybeRootPath.endsWith("/")) return `${maybeRootPath}/`; console.log(`using bank base URL (${maybeRootPath})`); return maybeRootPath; @@ -428,21 +425,21 @@ function useBackendState( * Keep mere business information, like account balance or * transactions history. */ -type AccountStateTypeOpt = AccountStateType | undefined; -function useAccountState( - state?: AccountStateType, -): [AccountStateTypeOpt, StateUpdater] { - const ret = useLocalStorage("account-state", JSON.stringify(state)); - const retObj: AccountStateTypeOpt = ret[0] ? JSON.parse(ret[0]) : ret[0]; - const retSetter: StateUpdater = function (val) { - const newVal = - val instanceof Function - ? JSON.stringify(val(retObj)) - : JSON.stringify(val); - ret[1](newVal); - }; - return [retObj, retSetter]; -} +// type AccountStateTypeOpt = AccountStateType | undefined; +// function useAccountState( +// state?: AccountStateType, +// ): [AccountStateTypeOpt, StateUpdater] { +// const ret = useLocalStorage("account-state", JSON.stringify(state)); +// const retObj: AccountStateTypeOpt = ret[0] ? JSON.parse(ret[0]) : ret[0]; +// const retSetter: StateUpdater = function (val) { +// const newVal = +// val instanceof Function +// ? JSON.stringify(val(retObj)) +// : JSON.stringify(val); +// ret[1](newVal); +// }; +// return [retObj, retSetter]; +// } /** * Wrapper providing defaults. @@ -495,7 +492,7 @@ async function abortWithdrawalCall( backendState: BackendStateTypeOpt, withdrawalId: string | undefined, pageStateSetter: StateUpdater, -) { +): Promise { if (typeof backendState === "undefined") { console.log("No credentials found."); pageStateSetter((prevState) => ({ @@ -580,7 +577,7 @@ async function confirmWithdrawalCall( backendState: BackendStateTypeOpt, withdrawalId: string | undefined, pageStateSetter: StateUpdater, -) { +): Promise { if (typeof backendState === "undefined") { console.log("No credentials found."); pageStateSetter((prevState) => ({ @@ -670,7 +667,7 @@ async function createTransactionCall( * a stateful management of the input data yet. */ cleanUpForm: () => void, -) { +): Promise { let res: any; try { res = await postToBackend( @@ -888,7 +885,7 @@ async function registrationCall( function ErrorBanner(Props: any): VNode | null { const [pageState, pageStateSetter] = Props.pageState; - const i18n = useTranslator(); + // const i18n = useTranslator(); if (!pageState.hasError) return null; const rval = ( @@ -1177,7 +1174,7 @@ function PaytoWireTransfer(Props: any): VNode { value={rawPaytoInput} required placeholder={i18n`payto address`} - pattern={`payto://iban/[A-Z][A-Z][0-9]+\?message=[a-zA-Z0-9 ]+&amount=${currency}:[0-9]+(\.[0-9]+)?`} + pattern={`payto://iban/[A-Z][A-Z][0-9]+?message=[a-zA-Z0-9 ]+&amount=${currency}:[0-9]+(.[0-9]+)?`} onInput={(e): void => { rawPaytoInputSetter(e.currentTarget.value); }} @@ -1281,7 +1278,8 @@ function TalerWithdrawalConfirmationQuestion(Props: any): VNode {