no-fix: user logger instead of console.log

packages/demobank-ui/src/components/app.tsx

@@ -1,3 +1,7 @@
+import {
+  globalLogLevel,
+  setGlobalLogLevelFromString,
+} from "@gnu-taler/taler-util";
 import { h, FunctionalComponent } from "preact";
 import { BackendStateProvider } from "../context/backend.js";
 import { PageStateProvider } from "../context/pageState.js";
@@ -32,5 +36,9 @@ const App: FunctionalComponent = () => {
     </TranslationProvider>
   );
 };
+(window as any).setGlobalLogLevelFromString = setGlobalLogLevelFromString;
+(window as any).getGlobaLevel = () => {
+  return globalLogLevel;
+};
 
 export default App;

packages/demobank-ui/src/hooks/async.ts

@@ -51,9 +51,7 @@ export function useAsync<T>(
     }, tooLong);
 
     try {
-      console.log("calling async", args);
       const result = await fn(...args);
-      console.log("async back", result);
       setData(result);
     } catch (error) {
       setError(error);

packages/demobank-ui/src/pages/home/AccountPage.tsx

@@ -14,7 +14,7 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-import { Amounts, HttpStatusCode } from "@gnu-taler/taler-util";
+import { Amounts, HttpStatusCode, Logger } from "@gnu-taler/taler-util";
 import { hooks } from "@gnu-taler/web-util/lib/index.browser";
 import { ComponentChildren, Fragment, h, VNode } from "preact";
 import { StateUpdater, useEffect } from "preact/hooks";
@@ -28,7 +28,7 @@ import { getIbanFromPayto, prepareHeaders } from "../../utils.js";
 import { BankFrame } from "./BankFrame.js";
 import { LoginForm } from "./LoginForm.js";
 import { PaymentOptions } from "./PaymentOptions.js";
-import { TalerWithdrawalQRCode } from "./TalerWithdrawalQRCode.js";
+import { WithdrawalQRCode } from "./TalerWithdrawalQRCode.js";
 import { Transactions } from "./Transactions.js";
 
 export function AccountPage(): VNode {
@@ -80,6 +80,8 @@ function SWRWithCredentials({
   );
 }
 
+const logger = new Logger("AccountPage");
+
 /**
  * Show only the account's balance.  NOTE: the backend state
  * is mostly needed to provide the user's credentials to POST
@@ -116,7 +118,7 @@ function Account({ accountLabel }: { accountLabel: string }): VNode {
   // }
 
   if (typeof error !== "undefined") {
-    console.log("account error", error, endpoint);
+    logger.trace("account error", error, endpoint);
     /**
      * FIXME: to minimize the code, try only one invocation
      * of pageStateSetter, after having decided the error
@@ -189,12 +191,11 @@ function Account({ accountLabel }: { accountLabel: string }): VNode {
    * brought to this ("Account") page where they get informed about
    * the outcome.
    */
-  console.log(`maybe new withdrawal ${talerWithdrawUri}`);
   if (talerWithdrawUri && withdrawalId) {
-    console.log("Bank created a new Taler withdrawal");
+    logger.trace("Bank created a new Taler withdrawal");
     return (
       <BankFrame>
-        <TalerWithdrawalQRCode
+        <WithdrawalQRCode
           withdrawalId={withdrawalId}
           talerWithdrawUri={talerWithdrawUri}
         />
@@ -252,15 +253,15 @@ function Account({ accountLabel }: { accountLabel: string }): VNode {
   );
 }
 
-function useTransactionPageNumber(): [number, StateUpdater<number>] {
+// function useTransactionPageNumber(): [number, StateUpdater<number>] {
-  const ret = hooks.useNotNullLocalStorage("transaction-page", "0");
+//   const ret = hooks.useNotNullLocalStorage("transaction-page", "0");
-  const retObj = JSON.parse(ret[0]);
+//   const retObj = JSON.parse(ret[0]);
-  const retSetter: StateUpdater<number> = function (val) {
+//   const retSetter: StateUpdater<number> = function (val) {
-    const newVal =
+//     const newVal =
-      val instanceof Function
+//       val instanceof Function
-        ? JSON.stringify(val(retObj))
+//         ? JSON.stringify(val(retObj))
-        : JSON.stringify(val);
+//         : JSON.stringify(val);
-    ret[1](newVal);
+//     ret[1](newVal);
-  };
+//   };
-  return [retObj, retSetter];
+//   return [retObj, retSetter];
-}
+// }

packages/demobank-ui/src/pages/home/BankFrame.tsx

@@ -14,6 +14,7 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
+import { Logger } from "@gnu-taler/taler-util";
 import { ComponentChildren, Fragment, h, VNode } from "preact";
 import talerLogo from "../../assets/logo-white.svg";
 import { LangSelectorLikePy as LangSelector } from "../../components/menu/LangSelector.js";
@@ -22,6 +23,8 @@ import { PageStateType, usePageContext } from "../../context/pageState.js";
 import { useTranslationContext } from "../../context/translation.js";
 import { bankUiSettings } from "../../settings.js";
 
+const logger = new Logger("BankFrame");
+
 export function BankFrame({
   children,
 }: {
@@ -30,7 +33,7 @@ export function BankFrame({
   const { i18n } = useTranslationContext();
   const backend = useBackendContext();
   const { pageState, pageStateSetter } = usePageContext();
-  console.log("BankFrame state", pageState);
+  logger.trace("state", pageState);
   const logOut = (
     <div class="logout">
       <a

packages/demobank-ui/src/pages/home/PaytoWireTransferForm.tsx

@@ -14,7 +14,7 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-import { Amounts, parsePaytoUri } from "@gnu-taler/taler-util";
+import { Amounts, Logger, parsePaytoUri } from "@gnu-taler/taler-util";
 import { hooks } from "@gnu-taler/web-util/lib/index.browser";
 import { h, VNode } from "preact";
 import { StateUpdater, useEffect, useRef, useState } from "preact/hooks";
@@ -25,6 +25,8 @@ import { BackendState } from "../../hooks/backend.js";
 import { prepareHeaders, undefinedIfEmpty } from "../../utils.js";
 import { ShowInputErrorLabel } from "./ShowInputErrorLabel.js";
 
+const logger = new Logger("PaytoWireTransferForm");
+
 export function PaytoWireTransferForm({
   focus,
   currency,
@@ -162,7 +164,7 @@ export function PaytoWireTransferForm({
                   typeof submitData.amount === "undefined" ||
                   submitData.amount === ""
                 ) {
-                  console.log("Not all the fields were given.");
+                  logger.error("Not all the fields were given.");
                   pageStateSetter((prevState: PageStateType) => ({
                     ...prevState,
 
@@ -209,7 +211,7 @@ export function PaytoWireTransferForm({
           <a
             href="/account"
             onClick={() => {
-              console.log("switch to raw payto form");
+              logger.trace("switch to raw payto form");
               pageStateSetter((prevState) => ({
                 ...prevState,
                 isRawPayto: true,
@@ -272,7 +274,7 @@ export function PaytoWireTransferForm({
             onClick={async () => {
               // empty string evaluates to false.
               if (!rawPaytoInput) {
-                console.log("Didn't get any raw Payto string!");
+                logger.error("Didn't get any raw Payto string!");
                 return;
               }
               transactionData = { paytoUri: rawPaytoInput };
@@ -295,7 +297,7 @@ export function PaytoWireTransferForm({
           <a
             href="/account"
             onClick={() => {
-              console.log("switch to wire-transfer-form");
+              logger.trace("switch to wire-transfer-form");
               pageStateSetter((prevState) => ({
                 ...prevState,
                 isRawPayto: false,
@@ -355,7 +357,7 @@ async function createTransactionCall(
   cleanUpForm: () => void,
 ): Promise<void> {
   if (backendState.status === "loggedOut") {
-    console.log("No credentials found.");
+    logger.error("No credentials found.");
     pageStateSetter((prevState) => ({
       ...prevState,
 
@@ -379,7 +381,7 @@ async function createTransactionCall(
       body: JSON.stringify(req),
     });
   } catch (error) {
-    console.log("Could not POST transaction request to the bank", error);
+    logger.error("Could not POST transaction request to the bank", error);
     pageStateSetter((prevState) => ({
       ...prevState,
 
@@ -394,7 +396,7 @@ async function createTransactionCall(
   // POST happened, status not sure yet.
   if (!res.ok) {
     const response = await res.json();
-    console.log(
+    logger.error(
       `Transfer creation gave response error: ${response} (${res.status})`,
     );
     pageStateSetter((prevState) => ({
@@ -409,7 +411,7 @@ async function createTransactionCall(
     return;
   }
   // status is 200 OK here, tell the user.
-  console.log("Wire transfer created!");
+  logger.trace("Wire transfer created!");
   pageStateSetter((prevState) => ({
     ...prevState,
 

packages/demobank-ui/src/pages/home/PublicHistoriesPage.tsx

@@ -14,6 +14,7 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
+import { Logger } from "@gnu-taler/taler-util";
 import { hooks } from "@gnu-taler/web-util/lib/index.browser";
 import { ComponentChildren, Fragment, h, VNode } from "preact";
 import { route } from "preact-router";
@@ -25,6 +26,8 @@ import { getBankBackendBaseUrl } from "../../utils.js";
 import { BankFrame } from "./BankFrame.js";
 import { Transactions } from "./Transactions.js";
 
+const logger = new Logger("PublicHistoriesPage");
+
 export function PublicHistoriesPage(): VNode {
   return (
     <SWRWithoutCredentials baseUrl={getBankBackendBaseUrl()}>
@@ -42,7 +45,7 @@ function SWRWithoutCredentials({
   children: ComponentChildren;
   baseUrl: string;
 }): VNode {
-  console.log("Base URL", baseUrl);
+  logger.trace("Base URL", baseUrl);
   return (
     <SWRConfig
       value={{
@@ -69,10 +72,9 @@ function PublicHistories(): VNode {
   const { i18n } = useTranslationContext();
 
   if (typeof error !== "undefined") {
-    console.log("account error", error);
     switch (error.status) {
       case 404:
-        console.log("public accounts: 404", error);
+        logger.error("public accounts: 404", error);
         route("/account");
         pageStateSetter((prevState: PageStateType) => ({
           ...prevState,
@@ -84,7 +86,7 @@ function PublicHistories(): VNode {
         }));
         break;
       default:
-        console.log("public accounts: non-404 error", error);
+        logger.error("public accounts: non-404 error", error);
         route("/account");
         pageStateSetter((prevState: PageStateType) => ({
           ...prevState,
@@ -105,13 +107,14 @@ function PublicHistories(): VNode {
    * Show the account specified in the props, or just one
    * from the list if that's not given.
    */
-  if (typeof showAccount === "undefined" && data.publicAccounts.length > 0)
+  if (typeof showAccount === "undefined" && data.publicAccounts.length > 0) {
     setShowAccount(data.publicAccounts[1].accountLabel);
-  console.log(`Public history tab: ${showAccount}`);
+  }
+  logger.trace(`Public history tab: ${showAccount}`);
 
   // Ask story of all the public accounts.
   for (const account of data.publicAccounts) {
-    console.log("Asking transactions for", account.accountLabel);
+    logger.trace("Asking transactions for", account.accountLabel);
     const isSelected = account.accountLabel == showAccount;
     accountsBar.push(
       <li

packages/demobank-ui/src/pages/home/RegistrationPage.tsx

@@ -13,6 +13,7 @@
  You should have received a copy of the GNU General Public License along with
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
+import { Logger } from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
 import { route } from "preact-router";
 import { StateUpdater, useState } from "preact/hooks";
@@ -25,6 +26,8 @@ import { getBankBackendBaseUrl, undefinedIfEmpty } from "../../utils.js";
 import { BankFrame } from "./BankFrame.js";
 import { ShowInputErrorLabel } from "./ShowInputErrorLabel.js";
 
+const logger = new Logger("RegistrationPage");
+
 export function RegistrationPage(): VNode {
   const { i18n } = useTranslationContext();
   if (!bankUiSettings.allowRegistrations) {
@@ -197,7 +200,7 @@ async function registrationCall(
       headers,
     });
   } catch (error) {
-    console.log(
+    logger.trace(
       `Could not POST new registration to the bank (${registerEndpoint.href})`,
       error,
     );

packages/demobank-ui/src/pages/home/Transactions.tsx

@@ -1,8 +1,10 @@
+import { Logger } from "@gnu-taler/taler-util";
 import { h, VNode } from "preact";
 import { useEffect } from "preact/hooks";
 import useSWR from "swr";
 import { useTranslationContext } from "../../context/translation.js";
 
+const logger = new Logger("Transactions");
 /**
  * Show one page of transactions.
  */
@@ -25,7 +27,7 @@ export function Transactions({
     }
   }, [balanceValue ?? ""]);
   if (typeof error !== "undefined") {
-    console.log("transactions not found error", error);
+    logger.error("transactions not found error", error);
     switch (error.status) {
       case 404: {
         return <p>Transactions page {pageNumber} was not found.</p>;
@@ -39,10 +41,10 @@ export function Transactions({
     }
   }
   if (!data) {
-    console.log(`History data of ${accountLabel} not arrived`);
+    logger.trace(`History data of ${accountLabel} not arrived`);
     return <p>Transactions page loading...</p>;
   }
-  console.log(`History data of ${accountLabel}`, data);
+  logger.trace(`History data of ${accountLabel}`, data);
   return (
     <div class="results">
       <table class="pure-table pure-table-striped">

packages/demobank-ui/src/pages/home/WalletWithdrawForm.tsx

@@ -14,6 +14,7 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
+import { Logger } from "@gnu-taler/taler-util";
 import { h, VNode } from "preact";
 import { StateUpdater, useEffect, useRef } from "preact/hooks";
 import { useBackendContext } from "../../context/backend.js";
@@ -22,6 +23,8 @@ import { useTranslationContext } from "../../context/translation.js";
 import { BackendState } from "../../hooks/backend.js";
 import { prepareHeaders, validateAmount } from "../../utils.js";
 
+const logger = new Logger("WalletWithdrawForm");
+
 export function WalletWithdrawForm({
   focus,
   currency,
@@ -110,7 +113,7 @@ async function createWithdrawalCall(
   pageStateSetter: StateUpdater<PageStateType>,
 ): Promise<void> {
   if (backendState?.status === "loggedOut") {
-    console.log("Page has a problem: no credentials found in the state.");
+    logger.error("Page has a problem: no credentials found in the state.");
     pageStateSetter((prevState) => ({
       ...prevState,
 
@@ -137,7 +140,7 @@ async function createWithdrawalCall(
       body: JSON.stringify({ amount }),
     });
   } catch (error) {
-    console.log("Could not POST withdrawal request to the bank", error);
+    logger.trace("Could not POST withdrawal request to the bank", error);
     pageStateSetter((prevState) => ({
       ...prevState,
 
@@ -151,7 +154,7 @@ async function createWithdrawalCall(
   }
   if (!res.ok) {
     const response = await res.json();
-    console.log(
+    logger.error(
       `Withdrawal creation gave response error: ${response} (${res.status})`,
     );
     pageStateSetter((prevState) => ({
@@ -166,7 +169,7 @@ async function createWithdrawalCall(
     return;
   }
 
-  console.log("Withdrawal operation created!");
+  logger.trace("Withdrawal operation created!");
   const resp = await res.json();
   pageStateSetter((prevState: PageStateType) => ({
     ...prevState,

packages/demobank-ui/src/pages/home/WithdrawalConfirmationQuestion.tsx

@@ -1,3 +1,4 @@
+import { Logger } from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
 import { StateUpdater } from "preact/hooks";
 import { useBackendContext } from "../../context/backend.js";
@@ -6,11 +7,13 @@ import { useTranslationContext } from "../../context/translation.js";
 import { BackendState } from "../../hooks/backend.js";
 import { prepareHeaders } from "../../utils.js";
 
+const logger = new Logger("WithdrawalConfirmationQuestion");
+
 /**
  * Additional authentication required to complete the operation.
  * Not providing a back button, only abort.
  */
-export function TalerWithdrawalConfirmationQuestion(): VNode {
+export function WithdrawalConfirmationQuestion(): VNode {
   const { pageState, pageStateSetter } = usePageContext();
   const backend = useBackendContext();
   const { i18n } = useTranslationContext();
@@ -122,7 +125,7 @@ async function confirmWithdrawalCall(
   pageStateSetter: StateUpdater<PageStateType>,
 ): Promise<void> {
   if (backendState.status === "loggedOut") {
-    console.log("No credentials found.");
+    logger.error("No credentials found.");
     pageStateSetter((prevState) => ({
       ...prevState,
 
@@ -133,7 +136,7 @@ async function confirmWithdrawalCall(
     return;
   }
   if (typeof withdrawalId === "undefined") {
-    console.log("No withdrawal ID found.");
+    logger.error("No withdrawal ID found.");
     pageStateSetter((prevState) => ({
       ...prevState,
 
@@ -168,7 +171,7 @@ async function confirmWithdrawalCall(
       headers,
     });
   } catch (error) {
-    console.log("Could not POST withdrawal confirmation to the bank", error);
+    logger.error("Could not POST withdrawal confirmation to the bank", error);
     pageStateSetter((prevState) => ({
       ...prevState,
 
@@ -183,7 +186,7 @@ async function confirmWithdrawalCall(
   if (!res || !res.ok) {
     const response = await res.json();
     // assume not ok if res is null
-    console.log(
+    logger.error(
       `Withdrawal confirmation gave response error (${res.status})`,
       res.statusText,
     );
@@ -197,7 +200,7 @@ async function confirmWithdrawalCall(
     }));
     return;
   }
-  console.log("Withdrawal operation confirmed!");
+  logger.trace("Withdrawal operation confirmed!");
   pageStateSetter((prevState) => {
     const { talerWithdrawUri, ...rest } = prevState;
     return {
@@ -217,7 +220,7 @@ async function abortWithdrawalCall(
   pageStateSetter: StateUpdater<PageStateType>,
 ): Promise<void> {
   if (backendState.status === "loggedOut") {
-    console.log("No credentials found.");
+    logger.error("No credentials found.");
     pageStateSetter((prevState) => ({
       ...prevState,
 
@@ -228,7 +231,7 @@ async function abortWithdrawalCall(
     return;
   }
   if (typeof withdrawalId === "undefined") {
-    console.log("No withdrawal ID found.");
+    logger.error("No withdrawal ID found.");
     pageStateSetter((prevState) => ({
       ...prevState,
 
@@ -260,7 +263,7 @@ async function abortWithdrawalCall(
     );
     res = await fetch(url.href, { method: "POST", headers });
   } catch (error) {
-    console.log("Could not abort the withdrawal", error);
+    logger.error("Could not abort the withdrawal", error);
     pageStateSetter((prevState) => ({
       ...prevState,
 
@@ -274,7 +277,7 @@ async function abortWithdrawalCall(
   }
   if (!res.ok) {
     const response = await res.json();
-    console.log(
+    logger.error(
       `Withdrawal abort gave response error (${res.status})`,
       res.statusText,
     );
@@ -289,7 +292,7 @@ async function abortWithdrawalCall(
     }));
     return;
   }
-  console.log("Withdrawal operation aborted!");
+  logger.trace("Withdrawal operation aborted!");
   pageStateSetter((prevState) => {
     const { ...rest } = prevState;
     return {

packages/demobank-ui/src/pages/home/WithdrawalQRCode.tsx

@@ -1,17 +1,18 @@
+import { Logger } from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
 import useSWR from "swr";
-import { useBackendContext } from "../../context/backend.js";
 import { PageStateType, usePageContext } from "../../context/pageState.js";
 import { useTranslationContext } from "../../context/translation.js";
 import { QrCodeSection } from "./QrCodeSection.js";
-import { TalerWithdrawalConfirmationQuestion } from "./TalerWithdrawalConfirmationQuestion.js";
+import { WithdrawalConfirmationQuestion } from "./WithdrawalConfirmationQuestion.js";
 
+const logger = new Logger("WithdrawalQRCode");
 /**
  * Offer the QR code (and a clickable taler://-link) to
  * permit the passing of exchange and reserve details to
  * the bank.  Poll the backend until such operation is done.
  */
-export function TalerWithdrawalQRCode({
+export function WithdrawalQRCode({
   withdrawalId,
   talerWithdrawUri,
 }: {
@@ -37,7 +38,7 @@ export function TalerWithdrawalQRCode({
     >{i18n.str`Abort`}</a>
   );
 
-  console.log(`Showing withdraw URI: ${talerWithdrawUri}`);
+  logger.trace(`Showing withdraw URI: ${talerWithdrawUri}`);
   // waiting for the wallet:
 
   const { data, error } = useSWR(
@@ -46,7 +47,7 @@ export function TalerWithdrawalQRCode({
   );
 
   if (typeof error !== "undefined") {
-    console.log(
+    logger.error(
       `withdrawal (${withdrawalId}) was never (correctly) created at the bank...`,
       error,
     );
@@ -73,7 +74,7 @@ export function TalerWithdrawalQRCode({
   /**
    * Wallet didn't communicate withdrawal details yet:
    */
-  console.log("withdrawal status", data);
+  logger.trace("withdrawal status", data);
   if (data.aborted)
     pageStateSetter((prevState: PageStateType) => {
       const { withdrawalId, talerWithdrawUri, ...rest } = prevState;
@@ -99,5 +100,5 @@ export function TalerWithdrawalQRCode({
    * Wallet POSTed the withdrawal details!  Ask the
    * user to authorize the operation (here CAPTCHA).
    */
-  return <TalerWithdrawalConfirmationQuestion />;
+  return <WithdrawalConfirmationQuestion />;
 }

packages/demobank-ui/src/utils.ts

@@ -5,21 +5,11 @@ import { canonicalizeBaseUrl } from "@gnu-taler/taler-util";
  * replace comma with a dot.  Returns 'false' whenever
  * the input is invalid, the valid amount otherwise.
  */
+const amountRegex = /^[0-9]+(.[0-9]+)?$/;
 export function validateAmount(maybeAmount: string | undefined): string | undefined {
-  const amountRegex = "^[0-9]+(.[0-9]+)?$";
+  if (!maybeAmount || !amountRegex.test(maybeAmount)) {
-  if (!maybeAmount) {
-    console.log(`Entered amount (${maybeAmount}) mismatched <input> pattern.`);
     return;
   }
-  if (typeof maybeAmount !== "undefined" || maybeAmount !== "") {
-    console.log(`Maybe valid amount: ${maybeAmount}`);
-    // tolerating comma instead of point.
-    const re = RegExp(amountRegex);
-    if (!re.test(maybeAmount)) {
-      console.log(`Not using invalid amount '${maybeAmount}'.`);
-      return;
-    }
-  }
   return maybeAmount;
 }
 
@@ -39,13 +29,6 @@ const maybeRootPath = "https://bank.demo.taler.net/demobanks/default/";
 
 export function getBankBackendBaseUrl(): string {
   const overrideUrl = localStorage.getItem("bank-base-url");
-  if (overrideUrl) {
-    console.log(
-      `using bank base URL ${overrideUrl} (override via bank-base-url localStorage)`,
-    );
-  } else {
-    console.log(`using bank base URL (${maybeRootPath})`);
-  }
   return canonicalizeBaseUrl(overrideUrl ? overrideUrl : maybeRootPath)
 
 }