From 6d3db4ce6ce3119f299936d9f0e4052bf1eff6c7 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Thu, 15 Jul 2021 15:05:09 -0300 Subject: added remove button and more complex add-provider interaction --- .../src/components/styled/index.tsx | 4 +- .../src/hooks/useProviderStatus.ts | 10 +++- .../src/popup/Backup.stories.tsx | 8 +++ .../src/popup/BackupPage.tsx | 2 +- .../src/popup/ProviderAddPage.tsx | 66 +++++++++++++++------- .../src/popup/ProviderDetail.stories.tsx | 8 +++ .../src/popup/ProviderDetailPage.tsx | 10 ++-- packages/taler-wallet-webextension/src/wxApi.ts | 8 +-- 8 files changed, 82 insertions(+), 34 deletions(-) (limited to 'packages/taler-wallet-webextension') diff --git a/packages/taler-wallet-webextension/src/components/styled/index.tsx b/packages/taler-wallet-webextension/src/components/styled/index.tsx index ebca5893e..11a0d014f 100644 --- a/packages/taler-wallet-webextension/src/components/styled/index.tsx +++ b/packages/taler-wallet-webextension/src/components/styled/index.tsx @@ -200,15 +200,17 @@ export const CenteredTextBold = styled(CenteredText)` font-weight: bold; color: ${((props: any): any => String(props.color) as any) as any}; ` -export const Input = styled.div` +export const Input = styled.div<{ invalid?: boolean }>` & label { display: block; padding: 5px; + color: ${({ invalid }) => !invalid ? 'inherit' : 'red'} } & input { display: block; padding: 5px; width: calc(100% - 4px - 10px); + border-color: ${({ invalid }) => !invalid ? 'inherit' : 'red'} } ` diff --git a/packages/taler-wallet-webextension/src/hooks/useProviderStatus.ts b/packages/taler-wallet-webextension/src/hooks/useProviderStatus.ts index 42eab5d80..124278828 100644 --- a/packages/taler-wallet-webextension/src/hooks/useProviderStatus.ts +++ b/packages/taler-wallet-webextension/src/hooks/useProviderStatus.ts @@ -5,6 +5,7 @@ import * as wxApi from "../wxApi"; export interface ProviderStatus { info?: ProviderInfo; sync: () => Promise; + remove: () => Promise; } export function useProviderStatus(url: string): ProviderStatus | undefined { @@ -19,13 +20,18 @@ export function useProviderStatus(url: string): ProviderStatus | undefined { const info = providers.length ? providers[0] : undefined; async function sync() { - console.log("que tiene info", info) if (info) { await wxApi.syncOneProvider(info.syncProviderBaseUrl); } } - setStatus({ info, sync }); + async function remove() { + if (info) { + await wxApi.removeProvider(info.syncProviderBaseUrl); + } + } + + setStatus({ info, sync, remove }); } run(); }, []); diff --git a/packages/taler-wallet-webextension/src/popup/Backup.stories.tsx b/packages/taler-wallet-webextension/src/popup/Backup.stories.tsx index ed03f2087..1c1c47663 100644 --- a/packages/taler-wallet-webextension/src/popup/Backup.stories.tsx +++ b/packages/taler-wallet-webextension/src/popup/Backup.stories.tsx @@ -44,6 +44,7 @@ function createExample(Component: FunctionalComponent, props: Part export const LotOfProviders = createExample(TestedComponent, { providers: [{ "active": true, + name:'sync.demo', "syncProviderBaseUrl": "http://sync.taler:9967/", "lastSuccessfulBackupTimestamp": { "t_ms": 1625063925078 @@ -64,6 +65,7 @@ export const LotOfProviders = createExample(TestedComponent, { } }, { "active": true, + name:'sync.demo', "syncProviderBaseUrl": "http://sync.taler:9967/", "lastSuccessfulBackupTimestamp": { "t_ms": 1625063925078 @@ -84,6 +86,7 @@ export const LotOfProviders = createExample(TestedComponent, { } }, { "active": false, + name:'sync.demo', "syncProviderBaseUrl": "http://sync.demo.taler.net/", "paymentProposalIds": [], "paymentStatus": { @@ -96,6 +99,7 @@ export const LotOfProviders = createExample(TestedComponent, { } }, { "active": false, + name:'sync.demo', "syncProviderBaseUrl": "http://sync.demo.taler.net/", "paymentProposalIds": [], "paymentStatus": { @@ -108,6 +112,7 @@ export const LotOfProviders = createExample(TestedComponent, { } }, { "active": false, + name:'sync.demo', "syncProviderBaseUrl": "http://sync.demo.taler.net/", "paymentProposalIds": [], "paymentStatus": { @@ -134,6 +139,7 @@ export const LotOfProviders = createExample(TestedComponent, { } }, { "active": false, + name:'sync.demo', "syncProviderBaseUrl": "http://sync.demo.taler.net/", "paymentProposalIds": [], "paymentStatus": { @@ -146,6 +152,7 @@ export const LotOfProviders = createExample(TestedComponent, { } }, { "active": false, + name:'sync.demo', "syncProviderBaseUrl": "http://sync.demo.taler.net/", "paymentProposalIds": [], "paymentStatus": { @@ -163,6 +170,7 @@ export const LotOfProviders = createExample(TestedComponent, { export const OneProvider = createExample(TestedComponent, { providers: [{ "active": true, + name:'sync.demo', "syncProviderBaseUrl": "http://sync.taler:9967/", "lastSuccessfulBackupTimestamp": { "t_ms": 1625063925078 diff --git a/packages/taler-wallet-webextension/src/popup/BackupPage.tsx b/packages/taler-wallet-webextension/src/popup/BackupPage.tsx index 768a64a14..940d1f2a4 100644 --- a/packages/taler-wallet-webextension/src/popup/BackupPage.tsx +++ b/packages/taler-wallet-webextension/src/popup/BackupPage.tsx @@ -54,7 +54,7 @@ export function BackupView({ providers, onAddProvider, onSyncAll }: ViewProps): timestamp={provider.lastSuccessfulBackupTimestamp} id={provider.syncProviderBaseUrl} active={provider.active} - title={provider.syncProviderBaseUrl} + title={provider.name} /> )} {!providers.length && diff --git a/packages/taler-wallet-webextension/src/popup/ProviderAddPage.tsx b/packages/taler-wallet-webextension/src/popup/ProviderAddPage.tsx index 92579e36a..2680345f7 100644 --- a/packages/taler-wallet-webextension/src/popup/ProviderAddPage.tsx +++ b/packages/taler-wallet-webextension/src/popup/ProviderAddPage.tsx @@ -1,6 +1,7 @@ -import { Amounts, BackupBackupProviderTerms, i18n } from "@gnu-taler/taler-util"; +import { Amounts, BackupBackupProviderTerms, canonicalizeBaseUrl, i18n } from "@gnu-taler/taler-util"; +import { verify } from "@gnu-taler/taler-wallet-core/src/crypto/primitives/nacl-fast"; import { VNode } from "preact"; -import { useState } from "preact/hooks"; +import { useEffect, useState } from "preact/hooks"; import { Checkbox } from "../components/Checkbox"; import { ErrorMessage } from "../components/ErrorMessage"; import { Button, ButtonPrimary, Input, LightText, PopupBox, SmallTextLight } from "../components/styled/index"; @@ -25,18 +26,24 @@ function getJsonIfOk(r: Response) { export function ProviderAddPage({ onBack }: Props): VNode { - const [verifying, setVerifying] = useState<{ url: string, provider: BackupBackupProviderTerms } | undefined>(undefined) + const [verifying, setVerifying] = useState<{ url: string, name: string, provider: BackupBackupProviderTerms } | undefined>(undefined) + + async function getProviderInfo(url: string): Promise { + return fetch(`${url}config`) + .catch(e => { throw new Error(`Network error`) }) + .then(getJsonIfOk) + } if (!verifying) { return { - return fetch(`${url}/config`) - .catch(e => { throw new Error(`Network error`) }) - .then(getJsonIfOk) - .then((provider) => { setVerifying({ url, provider }); return undefined }) - .catch((e) => e.message) - }} + onVerify={(url) => getProviderInfo(url)} + onConfirm={(url, name) => getProviderInfo(url) + .then((provider) => { + setVerifying({ url, name, provider }); + }) + .catch(e => e.message) + } /> } return { - wxApi.addBackupProvider(verifying.url).then(onBack) + wxApi.addBackupProvider(verifying.url, verifying.name).then(onBack) }} /> @@ -56,37 +63,54 @@ export function ProviderAddPage({ onBack }: Props): VNode { export interface SetUrlViewProps { initialValue?: string; onCancel: () => void; - onVerify: (s: string) => Promise; + onVerify: (s: string) => Promise; + onConfirm: (url: string, name: string) => Promise; withError?: string; } -export function SetUrlView({ initialValue, onCancel, onVerify, withError }: SetUrlViewProps) { +export function SetUrlView({ initialValue, onCancel, onVerify, onConfirm, withError }: SetUrlViewProps) { const [value, setValue] = useState(initialValue || "") + const [urlError, setUrlError] = useState(false) + const [name, setName] = useState(undefined) const [error, setError] = useState(withError) + useEffect(() => { + try { + const url = canonicalizeBaseUrl(value) + onVerify(url).then(r => { + setUrlError(false) + setName(new URL(url).hostname) + }).catch(() => { + setUrlError(true) + setName(undefined) + }) + } catch { + setUrlError(true) + setName(undefined) + } + }, [value]) return

Add backup provider

Backup providers may charge for their service

- + setValue(e.currentTarget.value)} /> - + setName(e.currentTarget.value)}/>

{ - let url = value.startsWith('http://') || value.startsWith('https://') ? value : `https://${value}` - url = url.endsWith('/') ? url.substring(0, url.length - 1) : url; - return onVerify(url).then(r => r ? setError(r) : undefined) + const url = canonicalizeBaseUrl(value) + return onConfirm(url, name!).then(r => r ? setError(r) : undefined) }}>Next
@@ -108,13 +132,13 @@ export function ConfirmProviderView({ url, provider, onCancel, onConfirm }: Conf Please review and accept this provider's terms of service

1. Pricing

- {Amounts.isZero(provider.annual_fee) ? 'free of charge' : `${provider.annual_fee} per year of service`} + {Amounts.isZero(provider.annual_fee) ? 'free of charge' : `${provider.annual_fee} per year of service`}

2. Storage

{provider.storage_limit_in_megabytes} megabytes of storage per year of service

- setAccepted(old => !old)} enabled={accepted}/> + setAccepted(old => !old)} enabled={accepted} />