diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src')
17 files changed, 240 insertions, 216 deletions
diff --git a/packages/taler-wallet-webextension/src/components/Diagnostics.tsx b/packages/taler-wallet-webextension/src/components/Diagnostics.tsx new file mode 100644 index 000000000..146b0dd3e --- /dev/null +++ b/packages/taler-wallet-webextension/src/components/Diagnostics.tsx @@ -0,0 +1,76 @@ +import { useState, useEffect } from "preact/hooks"; +import { getDiagnostics } from "../wxApi"; +import { PageLink } from "../renderHtml"; +import { WalletDiagnostics } from "@gnu-taler/taler-util"; +import { JSX } from "preact/jsx-runtime"; + + +export function Diagnostics(): JSX.Element | null { + const [timedOut, setTimedOut] = useState(false); + const [diagnostics, setDiagnostics] = useState<WalletDiagnostics | undefined>( + undefined + ); + + useEffect(() => { + let gotDiagnostics = false; + setTimeout(() => { + if (!gotDiagnostics) { + console.error("timed out"); + setTimedOut(true); + } + }, 1000); + const doFetch = async (): Promise<void> => { + const d = await getDiagnostics(); + console.log("got diagnostics", d); + gotDiagnostics = true; + setDiagnostics(d); + }; + console.log("fetching diagnostics"); + doFetch(); + }, []); + + if (timedOut) { + return <p>Diagnostics timed out. Could not talk to the wallet backend.</p>; + } + + if (diagnostics) { + if (diagnostics.errors.length === 0) { + return null; + } else { + return ( + <div + style={{ + borderLeft: "0.5em solid red", + paddingLeft: "1em", + paddingTop: "0.2em", + paddingBottom: "0.2em", + }} + > + <p>Problems detected:</p> + <ol> + {diagnostics.errors.map((errMsg) => ( + <li key={errMsg}>{errMsg}</li> + ))} + </ol> + {diagnostics.firefoxIdbProblem ? ( + <p> + Please check in your <code>about:config</code> settings that you + have IndexedDB enabled (check the preference name{" "} + <code>dom.indexedDB.enabled</code>). + </p> + ) : null} + {diagnostics.dbOutdated ? ( + <p> + Your wallet database is outdated. Currently automatic migration is + not supported. Please go{" "} + <PageLink pageName="/reset-required">here</PageLink> to reset + the wallet database. + </p> + ) : null} + </div> + ); + } + } + + return <p>Running diagnostics ...</p>; +} diff --git a/packages/taler-wallet-webextension/src/components/PermissionsCheckbox.tsx b/packages/taler-wallet-webextension/src/components/PermissionsCheckbox.tsx new file mode 100644 index 000000000..50f4feb62 --- /dev/null +++ b/packages/taler-wallet-webextension/src/components/PermissionsCheckbox.tsx @@ -0,0 +1,47 @@ +/* + This file is part of GNU Taler + (C) 2019 Taler Systems SA + + GNU Taler is free software; you can redistribute it and/or modify it under the + terms of the GNU General Public License as published by the Free Software + Foundation; either version 3, or (at your option) any later version. + + GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY + WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR + A PARTICULAR PURPOSE. See the GNU General Public License for more details. + + 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 { JSX } from "preact/jsx-runtime"; + +export function PermissionsCheckbox({ enabled, onToggle }: { enabled: boolean; onToggle: () => void; }): JSX.Element { + return ( + <div> + <input + checked={enabled} + onClick={onToggle} + type="checkbox" + id="checkbox-perm" + style={{ width: "1.5em", height: "1.5em", verticalAlign: "middle" }} /> + <label + htmlFor="checkbox-perm" + style={{ marginLeft: "0.5em", fontWeight: "bold" }} + > + Automatically open wallet based on page content + </label> + <span + style={{ + color: "#383838", + fontSize: "smaller", + display: "block", + marginLeft: "2em", + }} + > + (Enabling this option below will make using the wallet faster, but + requires more permissions from your browser.) + </span> + </div> + ); +} diff --git a/packages/taler-wallet-webextension/src/hooks/useExtendedPermissions.tsx b/packages/taler-wallet-webextension/src/hooks/useExtendedPermissions.tsx new file mode 100644 index 000000000..f5c788cf6 --- /dev/null +++ b/packages/taler-wallet-webextension/src/hooks/useExtendedPermissions.tsx @@ -0,0 +1,24 @@ +import { useState, useEffect } from "preact/hooks"; +import * as wxApi from "../wxApi"; +import { handleExtendedPerm } from "../wallet/welcome"; + + +export function useExtendedPermissions(): [boolean, () => void] { + const [enabled, setEnabled] = useState(false); + + const toggle = () => { + setEnabled(v => !v); + handleExtendedPerm(enabled).then(result => { + setEnabled(result); + }); + }; + + useEffect(() => { + async function getExtendedPermValue(): Promise<void> { + const res = await wxApi.getExtendedPermissions(); + setEnabled(res.newValue); + } + getExtendedPermValue(); + }, []); + return [enabled, toggle]; +} diff --git a/packages/taler-wallet-webextension/src/pages/welcome.tsx b/packages/taler-wallet-webextension/src/pages/welcome.tsx deleted file mode 100644 index 808143189..000000000 --- a/packages/taler-wallet-webextension/src/pages/welcome.tsx +++ /dev/null @@ -1,206 +0,0 @@ -/* - This file is part of GNU Taler - (C) 2019 Taler Systems SA - - GNU Taler is free software; you can redistribute it and/or modify it under the - terms of the GNU General Public License as published by the Free Software - Foundation; either version 3, or (at your option) any later version. - - GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY - WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR - A PARTICULAR PURPOSE. See the GNU General Public License for more details. - - 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/> - */ - -/** - * Welcome page, shown on first installs. - * - * @author Florian Dold - */ - -import { useState, useEffect, useMemo, useCallback } from "preact/hooks"; -import { getDiagnostics } from "../wxApi"; -import { PageLink } from "../renderHtml"; -import * as wxApi from "../wxApi"; -import { getPermissionsApi } from "../compat"; -import { extendedPermissions } from "../permissions"; -import { WalletDiagnostics } from "@gnu-taler/taler-util"; -import { Fragment, JSX } from "preact/jsx-runtime"; - -export function Diagnostics(): JSX.Element | null { - const [timedOut, setTimedOut] = useState(false); - const [diagnostics, setDiagnostics] = useState<WalletDiagnostics | undefined>( - undefined, - ); - - useEffect(() => { - let gotDiagnostics = false; - setTimeout(() => { - if (!gotDiagnostics) { - console.error("timed out"); - setTimedOut(true); - } - }, 1000); - const doFetch = async (): Promise<void> => { - const d = await getDiagnostics(); - console.log("got diagnostics", d); - gotDiagnostics = true; - setDiagnostics(d); - }; - console.log("fetching diagnostics"); - doFetch(); - }, []); - - if (timedOut) { - return <p>Diagnostics timed out. Could not talk to the wallet backend.</p>; - } - - if (diagnostics) { - if (diagnostics.errors.length === 0) { - return null; - } else { - return ( - <div - style={{ - borderLeft: "0.5em solid red", - paddingLeft: "1em", - paddingTop: "0.2em", - paddingBottom: "0.2em", - }} - > - <p>Problems detected:</p> - <ol> - {diagnostics.errors.map((errMsg) => ( - <li key={errMsg}>{errMsg}</li> - ))} - </ol> - {diagnostics.firefoxIdbProblem ? ( - <p> - Please check in your <code>about:config</code> settings that you - have IndexedDB enabled (check the preference name{" "} - <code>dom.indexedDB.enabled</code>). - </p> - ) : null} - {diagnostics.dbOutdated ? ( - <p> - Your wallet database is outdated. Currently automatic migration is - not supported. Please go{" "} - <PageLink pageName="/reset-required">here</PageLink> to reset - the wallet database. - </p> - ) : null} - </div> - ); - } - } - - return <p>Running diagnostics ...</p>; -} - - -async function handleExtendedPerm(isEnabled: boolean): Promise<boolean> { - let nextVal: boolean | undefined; - - if (!isEnabled) { - const granted = await new Promise<boolean>((resolve, reject) => { - // We set permissions here, since apparently FF wants this to be done - // as the result of an input event ... - getPermissionsApi().request(extendedPermissions, (granted: boolean) => { - if (chrome.runtime.lastError) { - console.error("error requesting permissions"); - console.error(chrome.runtime.lastError); - reject(chrome.runtime.lastError); - return; - } - console.log("permissions granted:", granted); - resolve(granted); - }); - }); - const res = await wxApi.setExtendedPermissions(granted); - nextVal = res.newValue; - } else { - const res = await wxApi.setExtendedPermissions(false); - nextVal = res.newValue; - } - console.log("new permissions applied:", nextVal ?? false); - return nextVal ?? false -} - -export function useExtendedPermissions(): [boolean, () => void] { - const [enabled, setEnabled] = useState(false); - - const toggle = () => { - setEnabled(v => !v) - handleExtendedPerm(enabled).then( result => { - setEnabled(result) - } ) - } - - useEffect(() => { - async function getExtendedPermValue(): Promise<void> { - const res = await wxApi.getExtendedPermissions(); - setEnabled(res.newValue); - } - getExtendedPermValue(); - },[]); - return [enabled, toggle] -} - -export function PermissionsCheckbox({enabled, onToggle}: {enabled:boolean, onToggle: () => void}): JSX.Element { - return ( - <div> - <input - checked={enabled} - onClick={onToggle} - type="checkbox" - id="checkbox-perm" - style={{ width: "1.5em", height: "1.5em", verticalAlign: "middle" }} - /> - <label - htmlFor="checkbox-perm" - style={{ marginLeft: "0.5em", fontWeight: "bold" }} - > - Automatically open wallet based on page content - </label> - <span - style={{ - color: "#383838", - fontSize: "smaller", - display: "block", - marginLeft: "2em", - }} - > - (Enabling this option below will make using the wallet faster, but - requires more permissions from your browser.) - </span> - </div> - ); -} - -export function Welcome(): JSX.Element { - const [permissionsEnabled, togglePermissions] = useExtendedPermissions() - return ( - <> - <p>Thank you for installing the wallet.</p> - <Diagnostics /> - <h2>Permissions</h2> - <PermissionsCheckbox enabled={permissionsEnabled} onToggle={togglePermissions}/> - <h2>Next Steps</h2> - <a href="https://demo.taler.net/" style={{ display: "block" }}> - Try the demo » - </a> - <a href="https://demo.taler.net/" style={{ display: "block" }}> - Learn how to top up your wallet balance » - </a> - </> - ); -} - -/** - * @deprecated to be removed - */ -export function createWelcomePage(): JSX.Element { - return <Welcome />; -} diff --git a/packages/taler-wallet-webextension/src/pages/popup.stories.tsx b/packages/taler-wallet-webextension/src/popup/popup.stories.tsx index 0cb51a336..0cb51a336 100644 --- a/packages/taler-wallet-webextension/src/pages/popup.stories.tsx +++ b/packages/taler-wallet-webextension/src/popup/popup.stories.tsx diff --git a/packages/taler-wallet-webextension/src/pages/popup.tsx b/packages/taler-wallet-webextension/src/popup/popup.tsx index 7759b1819..0f76d7728 100644 --- a/packages/taler-wallet-webextension/src/pages/popup.tsx +++ b/packages/taler-wallet-webextension/src/popup/popup.tsx @@ -41,12 +41,13 @@ import { } from "@gnu-taler/taler-util"; import { format } from "date-fns"; import { Component, ComponentChildren, Fragment, JSX } from "preact"; -import { route, Route, Router } from 'preact-router'; -import { Match } from 'preact-router/match'; +import { route } from 'preact-router'; import { useEffect, useState } from "preact/hooks"; +import { Diagnostics } from "../components/Diagnostics"; +import { PermissionsCheckbox } from "../components/PermissionsCheckbox"; +import { useExtendedPermissions } from "../hooks/useExtendedPermissions"; import { PageLink, renderAmount } from "../renderHtml"; import * as wxApi from "../wxApi"; -import { PermissionsCheckbox, useExtendedPermissions, Diagnostics } from "./welcome"; export enum Pages { balance = '/balance', diff --git a/packages/taler-wallet-webextension/src/popupEntryPoint.tsx b/packages/taler-wallet-webextension/src/popupEntryPoint.tsx index 0ef5a4896..926ae7aa7 100644 --- a/packages/taler-wallet-webextension/src/popupEntryPoint.tsx +++ b/packages/taler-wallet-webextension/src/popupEntryPoint.tsx @@ -27,7 +27,7 @@ import { useEffect, useState } from "preact/hooks"; import { actionForTalerUri, findTalerUriInActiveTab, Pages, WalletBalanceView, WalletDebug, WalletHistory, WalletNavBar, WalletSettings, WalletTransaction, WalletTransactionView -} from "./pages/popup"; +} from "./popup/popup"; import Match from "preact-router/match"; import Router, { route, Route } from "preact-router"; // import { Application } from "./Application"; diff --git a/packages/taler-wallet-webextension/src/pages/pay.tsx b/packages/taler-wallet-webextension/src/wallet/pay.tsx index e958cd484..e958cd484 100644 --- a/packages/taler-wallet-webextension/src/pages/pay.tsx +++ b/packages/taler-wallet-webextension/src/wallet/pay.tsx diff --git a/packages/taler-wallet-webextension/src/pages/payback.tsx b/packages/taler-wallet-webextension/src/wallet/payback.tsx index 4233b1f96..4233b1f96 100644 --- a/packages/taler-wallet-webextension/src/pages/payback.tsx +++ b/packages/taler-wallet-webextension/src/wallet/payback.tsx diff --git a/packages/taler-wallet-webextension/src/pages/refund.tsx b/packages/taler-wallet-webextension/src/wallet/refund.tsx index 1991bc9d8..1991bc9d8 100644 --- a/packages/taler-wallet-webextension/src/pages/refund.tsx +++ b/packages/taler-wallet-webextension/src/wallet/refund.tsx diff --git a/packages/taler-wallet-webextension/src/pages/reset-required.tsx b/packages/taler-wallet-webextension/src/wallet/reset-required.tsx index 0be7c09c5..0be7c09c5 100644 --- a/packages/taler-wallet-webextension/src/pages/reset-required.tsx +++ b/packages/taler-wallet-webextension/src/wallet/reset-required.tsx diff --git a/packages/taler-wallet-webextension/src/pages/return-coins.tsx b/packages/taler-wallet-webextension/src/wallet/return-coins.tsx index 2273d1454..2273d1454 100644 --- a/packages/taler-wallet-webextension/src/pages/return-coins.tsx +++ b/packages/taler-wallet-webextension/src/wallet/return-coins.tsx diff --git a/packages/taler-wallet-webextension/src/pages/tip.tsx b/packages/taler-wallet-webextension/src/wallet/tip.tsx index d832976d8..d832976d8 100644 --- a/packages/taler-wallet-webextension/src/pages/tip.tsx +++ b/packages/taler-wallet-webextension/src/wallet/tip.tsx diff --git a/packages/taler-wallet-webextension/src/wallet/welcome.tsx b/packages/taler-wallet-webextension/src/wallet/welcome.tsx new file mode 100644 index 000000000..9be62bf8b --- /dev/null +++ b/packages/taler-wallet-webextension/src/wallet/welcome.tsx @@ -0,0 +1,83 @@ +/* + This file is part of GNU Taler + (C) 2019 Taler Systems SA + + GNU Taler is free software; you can redistribute it and/or modify it under the + terms of the GNU General Public License as published by the Free Software + Foundation; either version 3, or (at your option) any later version. + + GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY + WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR + A PARTICULAR PURPOSE. See the GNU General Public License for more details. + + 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/> + */ + +/** + * Welcome page, shown on first installs. + * + * @author Florian Dold + */ + +import * as wxApi from "../wxApi"; +import { getPermissionsApi } from "../compat"; +import { extendedPermissions } from "../permissions"; +import { Fragment, JSX } from "preact/jsx-runtime"; +import { PermissionsCheckbox } from "../components/PermissionsCheckbox"; +import { useExtendedPermissions } from "../hooks/useExtendedPermissions"; +import { Diagnostics } from "../components/Diagnostics"; + +export async function handleExtendedPerm(isEnabled: boolean): Promise<boolean> { + let nextVal: boolean | undefined; + + if (!isEnabled) { + const granted = await new Promise<boolean>((resolve, reject) => { + // We set permissions here, since apparently FF wants this to be done + // as the result of an input event ... + getPermissionsApi().request(extendedPermissions, (granted: boolean) => { + if (chrome.runtime.lastError) { + console.error("error requesting permissions"); + console.error(chrome.runtime.lastError); + reject(chrome.runtime.lastError); + return; + } + console.log("permissions granted:", granted); + resolve(granted); + }); + }); + const res = await wxApi.setExtendedPermissions(granted); + nextVal = res.newValue; + } else { + const res = await wxApi.setExtendedPermissions(false); + nextVal = res.newValue; + } + console.log("new permissions applied:", nextVal ?? false); + return nextVal ?? false +} + +export function Welcome(): JSX.Element { + const [permissionsEnabled, togglePermissions] = useExtendedPermissions() + return ( + <> + <p>Thank you for installing the wallet.</p> + <Diagnostics /> + <h2>Permissions</h2> + <PermissionsCheckbox enabled={permissionsEnabled} onToggle={togglePermissions}/> + <h2>Next Steps</h2> + <a href="https://demo.taler.net/" style={{ display: "block" }}> + Try the demo » + </a> + <a href="https://demo.taler.net/" style={{ display: "block" }}> + Learn how to top up your wallet balance » + </a> + </> + ); +} + +/** + * @deprecated to be removed + */ +export function createWelcomePage(): JSX.Element { + return <Welcome />; +} diff --git a/packages/taler-wallet-webextension/src/pages/withdraw.stories.tsx b/packages/taler-wallet-webextension/src/wallet/withdraw.stories.tsx index 86f0eec90..86f0eec90 100644 --- a/packages/taler-wallet-webextension/src/pages/withdraw.stories.tsx +++ b/packages/taler-wallet-webextension/src/wallet/withdraw.stories.tsx diff --git a/packages/taler-wallet-webextension/src/pages/withdraw.tsx b/packages/taler-wallet-webextension/src/wallet/withdraw.tsx index cb96fa4df..cb96fa4df 100644 --- a/packages/taler-wallet-webextension/src/pages/withdraw.tsx +++ b/packages/taler-wallet-webextension/src/wallet/withdraw.tsx diff --git a/packages/taler-wallet-webextension/src/walletEntryPoint.tsx b/packages/taler-wallet-webextension/src/walletEntryPoint.tsx index 607c87d39..2d1671dd4 100644 --- a/packages/taler-wallet-webextension/src/walletEntryPoint.tsx +++ b/packages/taler-wallet-webextension/src/walletEntryPoint.tsx @@ -25,11 +25,11 @@ import { setupI18n } from "@gnu-taler/taler-util"; import { strings } from "./i18n/strings"; import { createHashHistory } from 'history'; -import { WithdrawalDialog } from "./pages/withdraw"; -import { Welcome } from "./pages/welcome"; -import { TalerPayDialog } from "./pages/pay"; -import { RefundStatusView } from "./pages/refund"; -import { TalerTipDialog } from './pages/tip'; +import { WithdrawalDialog } from "./wallet/withdraw"; +import { Welcome } from "./wallet/welcome"; +import { TalerPayDialog } from "./wallet/pay"; +import { RefundStatusView } from "./wallet/refund"; +import { TalerTipDialog } from './wallet/tip'; import Router, { route, Route } from "preact-router"; @@ -64,7 +64,6 @@ enum Pages { return_coins = '/return-coins', tips = '/tips', withdraw = '/withdraw', - // popup = '/popup/:rest*', } function Application() { |