developer mode

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>
 }