diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src/popup')
5 files changed, 140 insertions, 21 deletions
diff --git a/packages/taler-wallet-webextension/src/popup/BackupPage.tsx b/packages/taler-wallet-webextension/src/popup/BackupPage.tsx new file mode 100644 index 000000000..4bbca9072 --- /dev/null +++ b/packages/taler-wallet-webextension/src/popup/BackupPage.tsx @@ -0,0 +1,35 @@ +/* + This file is part of TALER + (C) 2016 GNUnet e.V. + + 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. + + 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 + TALER; see the file COPYING. If not, see <http://www.gnu.org/licenses/> +*/ + + +import { VNode } from "preact"; +import { useDevContext } from "../context/useDevContext"; +import { useExtendedPermissions } from "../hooks/useExtendedPermissions"; + +export function BackupPage(): VNode { + return <BackupView />; +} + +export interface ViewProps { +} + +export function BackupView({}: ViewProps): VNode { + return ( + <div> + Backup page + </div> + ) +}
\ No newline at end of file diff --git a/packages/taler-wallet-webextension/src/popup/Debug.tsx b/packages/taler-wallet-webextension/src/popup/Debug.tsx index 073dac2ca..1f6014e8e 100644 --- a/packages/taler-wallet-webextension/src/popup/Debug.tsx +++ b/packages/taler-wallet-webextension/src/popup/Debug.tsx @@ -19,7 +19,7 @@ import { Diagnostics } from "../components/Diagnostics"; import * as wxApi from "../wxApi"; -export function DebugPage(props: any): JSX.Element { +export function DeveloperPage(props: any): JSX.Element { return ( <div> <p>Debug tools:</p> diff --git a/packages/taler-wallet-webextension/src/popup/Settings.stories.tsx b/packages/taler-wallet-webextension/src/popup/Settings.stories.tsx new file mode 100644 index 000000000..b6d852d52 --- /dev/null +++ b/packages/taler-wallet-webextension/src/popup/Settings.stories.tsx @@ -0,0 +1,54 @@ +/* + This file is part of GNU Taler + (C) 2021 Taler Systems S.A. + + 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/> + */ + +/** +* +* @author Sebastian Javier Marchano (sebasjm) +*/ + +import { + PaymentStatus, + TransactionCommon, TransactionDeposit, TransactionPayment, + TransactionRefresh, TransactionRefund, TransactionTip, TransactionType, + TransactionWithdrawal, + WithdrawalType +} from '@gnu-taler/taler-util'; +import { FunctionalComponent } from 'preact'; +import { SettingsView as TestedComponent } from './Settings'; + +export default { + title: 'popup/settings', + component: TestedComponent, + argTypes: { + onRetry: { action: 'onRetry' }, + onDelete: { action: 'onDelete' }, + onBack: { action: 'onBack' }, + } +}; + + +function createExample<Props>(Component: FunctionalComponent<Props>, props: Partial<Props>) { + const r = (args: any) => <Component {...args} /> + r.args = props + return r +} + +export const AllOff = createExample(TestedComponent, {}); + +export const OneChecked = createExample(TestedComponent, { + permissionsEnabled: true, +}); + diff --git a/packages/taler-wallet-webextension/src/popup/Settings.tsx b/packages/taler-wallet-webextension/src/popup/Settings.tsx index 5028b597c..0a57092bb 100644 --- a/packages/taler-wallet-webextension/src/popup/Settings.tsx +++ b/packages/taler-wallet-webextension/src/popup/Settings.tsx @@ -15,20 +15,42 @@ */ -import { PermissionsCheckbox } from "../components/PermissionsCheckbox"; +import { VNode } from "preact"; +import { Checkbox } from "../components/Checkbox"; +import { useDevContext } from "../context/useDevContext"; import { useExtendedPermissions } from "../hooks/useExtendedPermissions"; - -export function SettingsPage() { +export function SettingsPage(): VNode { const [permissionsEnabled, togglePermissions] = useExtendedPermissions(); + const { devMode, toggleDevMode } = useDevContext() + return <SettingsView + permissionsEnabled={permissionsEnabled} togglePermissions={togglePermissions} + developerMode={devMode} toggleDeveloperMode={toggleDevMode} + />; +} + +export interface ViewProps { + permissionsEnabled: boolean; + togglePermissions: () => void; + developerMode: boolean; + toggleDeveloperMode: () => void; +} + +export function SettingsView({permissionsEnabled, togglePermissions, developerMode, toggleDeveloperMode}: ViewProps): VNode { return ( <div> <h2>Permissions</h2> - <PermissionsCheckbox enabled={permissionsEnabled} onToggle={togglePermissions} /> - {/* - <h2>Developer mode</h2> - <DebugCheckbox enabled={permissionsEnabled} onToggle={togglePermissions} /> - */} + <Checkbox label="Automatically open wallet based on page content" + name="perm" + description="(Enabling this option below will make using the wallet faster, but requires more permissions from your browser.)" + enabled={permissionsEnabled} onToggle={togglePermissions} + /> + <h2>Config</h2> + <Checkbox label="Developer mode" + name="devMode" + description="(More options and information useful for debugging)" + enabled={developerMode} onToggle={toggleDeveloperMode} + /> </div> - ); -} + ) +}
\ No newline at end of file diff --git a/packages/taler-wallet-webextension/src/popup/popup.tsx b/packages/taler-wallet-webextension/src/popup/popup.tsx index 3692a0537..fab5a834a 100644 --- a/packages/taler-wallet-webextension/src/popup/popup.tsx +++ b/packages/taler-wallet-webextension/src/popup/popup.tsx @@ -28,11 +28,14 @@ import { classifyTalerUri, i18n, TalerUriType } from "@gnu-taler/taler-util"; import { ComponentChildren, JSX } from "preact"; +import Match from "preact-router/match"; +import { useDevContext } from "../context/useDevContext"; export enum Pages { balance = '/balance', settings = '/settings', - debug = '/debug', + dev = '/dev', + backup = '/backup', history = '/history', transaction = '/transaction/:tid', } @@ -55,14 +58,19 @@ function Tab(props: TabProps): JSX.Element { ); } -export function WalletNavBar({ current }: { current?: string }) { - return ( - <div class="nav" id="header"> - <Tab target="/balance" current={current}>{i18n.str`Balance`}</Tab> - <Tab target="/history" current={current}>{i18n.str`History`}</Tab> - <Tab target="/settings" current={current}>{i18n.str`Settings`}</Tab> - <Tab target="/debug" current={current}>{i18n.str`Debug`}</Tab> - </div> - ); +export function WalletNavBar() { + const { devMode } = useDevContext() + return <Match>{({ path }: any) => { + console.log("current", path) + return ( + <div class="nav" id="header"> + <Tab target="/balance" current={path}>{i18n.str`Balance`}</Tab> + <Tab target="/history" current={path}>{i18n.str`History`}</Tab> + <Tab target="/backup" current={path}>{i18n.str`Backup`}</Tab> + <Tab target="/settings" current={path}>{i18n.str`Settings`}</Tab> + {devMode && <Tab target="/dev" current={path}>{i18n.str`Dev`}</Tab>} + </div> + ) + }}</Match> } |