diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src/wallet')
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> |