toggle permission

4 files changed, 28 insertions, 24 deletions

diff --git a/packages/taler-wallet-webextension/src/wallet/Settings.stories.tsx b/packages/taler-wallet-webextension/src/wallet/Settings.stories.tsx
index f50778945..936ba5119 100644
--- a/packages/taler-wallet-webextension/src/wallet/Settings.stories.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Settings.stories.tsx
@@ -32,18 +32,19 @@ export default {
 
 export const AllOff = createExample(TestedComponent, {
   deviceName: "this-is-the-device-name",
+  permissionToggle: { value: false, button: {} },
   setDeviceName: () => Promise.resolve(),
 });
 
 export const OneChecked = createExample(TestedComponent, {
   deviceName: "this-is-the-device-name",
-  permissionsEnabled: true,
+  permissionToggle: { value: false, button: {} },
   setDeviceName: () => Promise.resolve(),
 });
 
 export const WithOneExchange = createExample(TestedComponent, {
   deviceName: "this-is-the-device-name",
-  permissionsEnabled: true,
+  permissionToggle: { value: false, button: {} },
   setDeviceName: () => Promise.resolve(),
   knownExchanges: [
     {
@@ -62,7 +63,7 @@ export const WithOneExchange = createExample(TestedComponent, {
 
 export const WithExchangeInDifferentState = createExample(TestedComponent, {
   deviceName: "this-is-the-device-name",
-  permissionsEnabled: true,
+  permissionToggle: { value: false, button: {} },
   setDeviceName: () => Promise.resolve(),
   knownExchanges: [
     {
diff --git a/packages/taler-wallet-webextension/src/wallet/Settings.tsx b/packages/taler-wallet-webextension/src/wallet/Settings.tsx
index 5a9c776fd..83ce76ade 100644
--- a/packages/taler-wallet-webextension/src/wallet/Settings.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Settings.tsx
@@ -17,6 +17,7 @@
 import { ExchangeListItem } from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
 import { Checkbox } from "../components/Checkbox.js";
+import { ErrorTalerOperation } from "../components/ErrorTalerOperation.js";
 import { JustInDevMode } from "../components/JustInDevMode.js";
 import { SelectList } from "../components/SelectList.js";
 import {
@@ -32,12 +33,13 @@ import { useTranslationContext } from "../context/translation.js";
 import { useAsyncAsHook } from "../hooks/useAsyncAsHook.js";
 import { useBackupDeviceName } from "../hooks/useBackupDeviceName.js";
 import { useExtendedPermissions } from "../hooks/useExtendedPermissions.js";
+import { ToggleHandler } from "../mui/handlers.js";
 import { Pages } from "../NavigationBar.js";
 import { buildTermsOfServiceStatus } from "../utils/index.js";
 import * as wxApi from "../wxApi.js";
 
 export function SettingsPage(): VNode {
-  const [permissionsEnabled, togglePermissions] = useExtendedPermissions();
+  const permissionToggle = useExtendedPermissions();
   const { devMode, toggleDevMode } = useDevContext();
   const { name, update } = useBackupDeviceName();
 
@@ -52,8 +54,7 @@ export function SettingsPage(): VNode {
       }
       deviceName={name}
       setDeviceName={update}
-      permissionsEnabled={permissionsEnabled}
-      togglePermissions={togglePermissions}
+      permissionToggle={permissionToggle}
       developerMode={devMode}
       toggleDeveloperMode={toggleDevMode}
     />
@@ -63,8 +64,7 @@ export function SettingsPage(): VNode {
 export interface ViewProps {
   deviceName: string;
   setDeviceName: (s: string) => Promise<void>;
-  permissionsEnabled: boolean;
-  togglePermissions: () => void;
+  permissionToggle: ToggleHandler;
   developerMode: boolean;
   toggleDeveloperMode: () => void;
   knownExchanges: Array<ExchangeListItem>;
@@ -72,8 +72,7 @@ export interface ViewProps {
 
 export function SettingsView({
   knownExchanges,
-  permissionsEnabled,
-  togglePermissions,
+  permissionToggle,
   developerMode,
   toggleDeveloperMode,
 }: ViewProps): VNode {
@@ -82,6 +81,12 @@ export function SettingsView({
   return (
     <Fragment>
       <section>
+        {permissionToggle.button.error && (
+          <ErrorTalerOperation
+            title={<i18n.Translate>Could not toggle auto-open</i18n.Translate>}
+            error={permissionToggle.button.error.errorDetail}
+          />
+        )}
         <SubTitle>
           <i18n.Translate>Navigator</i18n.Translate>
         </SubTitle>
@@ -98,8 +103,8 @@ export function SettingsView({
               requires more permissions from your browser.
             </i18n.Translate>
           }
-          enabled={permissionsEnabled}
-          onToggle={togglePermissions}
+          enabled={permissionToggle.value!}
+          onToggle={permissionToggle.button.onClick!}
         />
 
         <SubTitle>
diff --git a/packages/taler-wallet-webextension/src/wallet/Welcome.stories.tsx b/packages/taler-wallet-webextension/src/wallet/Welcome.stories.tsx
index 424eb9d7f..10ff78b28 100644
--- a/packages/taler-wallet-webextension/src/wallet/Welcome.stories.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Welcome.stories.tsx
@@ -28,7 +28,7 @@ export default {
 };
 
 export const Normal = createExample(TestedComponent, {
-  permissionsEnabled: true,
+  permissionToggle: { value: true, button: {} },
   diagnostics: {
     errors: [],
     walletManifestVersion: "1.0",
@@ -40,9 +40,9 @@ export const Normal = createExample(TestedComponent, {
 
 export const TimedoutDiagnostics = createExample(TestedComponent, {
   timedOut: true,
-  permissionsEnabled: false,
+  permissionToggle: { value: true, button: {} },
 });
 
 export const RunningDiagnostics = createExample(TestedComponent, {
-  permissionsEnabled: false,
+  permissionToggle: { value: true, button: {} },
 });
diff --git a/packages/taler-wallet-webextension/src/wallet/Welcome.tsx b/packages/taler-wallet-webextension/src/wallet/Welcome.tsx
index 58023a203..38bcf800d 100644
--- a/packages/taler-wallet-webextension/src/wallet/Welcome.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Welcome.tsx
@@ -27,15 +27,15 @@ import { SubTitle, Title } from "../components/styled/index.js";
 import { useTranslationContext } from "../context/translation.js";
 import { useDiagnostics } from "../hooks/useDiagnostics.js";
 import { useExtendedPermissions } from "../hooks/useExtendedPermissions.js";
+import { ToggleHandler } from "../mui/handlers.js";
 import { platform } from "../platform/api.js";
 
 export function WelcomePage(): VNode {
-  const [permissionsEnabled, togglePermissions] = useExtendedPermissions();
+  const permissionToggle = useExtendedPermissions();
   const [diagnostics, timedOut] = useDiagnostics();
   return (
     <View
-      permissionsEnabled={permissionsEnabled}
-      togglePermissions={togglePermissions}
+      permissionToggle={permissionToggle}
       diagnostics={diagnostics}
       timedOut={timedOut}
     />
@@ -43,14 +43,12 @@ export function WelcomePage(): VNode {
 }
 
 export interface ViewProps {
-  permissionsEnabled: boolean;
-  togglePermissions: () => void;
+  permissionToggle: ToggleHandler;
   diagnostics: WalletDiagnostics | undefined;
   timedOut: boolean;
 }
 export function View({
-  permissionsEnabled,
-  togglePermissions,
+  permissionToggle,
   diagnostics,
   timedOut,
 }: ViewProps): VNode {
@@ -105,8 +103,8 @@ export function View({
               requires more permissions from your browser.)
             </i18n.Translate>
           }
-          enabled={permissionsEnabled}
-          onToggle={togglePermissions}
+          enabled={permissionToggle.value!}
+          onToggle={permissionToggle.button.onClick!}
         />
         <SubTitle>
           <i18n.Translate>Next Steps</i18n.Translate>