diff options
author | Sebastian <sebasjm@gmail.com> | 2021-07-15 15:05:09 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2021-07-15 15:05:16 -0300 |
commit | 6d3db4ce6ce3119f299936d9f0e4052bf1eff6c7 (patch) | |
tree | bb91b0163ecb972b6a092bbabca3c8f884200062 /packages/taler-wallet-webextension/src/popup | |
parent | 7c2d2a3e15e92b2217e03044f3b9f10b624c2a9b (diff) | |
download | wallet-core-6d3db4ce6ce3119f299936d9f0e4052bf1eff6c7.tar.xz |
added remove button and more complex add-provider interaction
Diffstat (limited to 'packages/taler-wallet-webextension/src/popup')
5 files changed, 67 insertions, 27 deletions
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<Props>(Component: FunctionalComponent<Props>, 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 && <Centered style={{marginTop: 100}}> 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<BackupBackupProviderTerms> { + return fetch(`${url}config`) + .catch(e => { throw new Error(`Network error`) }) + .then(getJsonIfOk) + } if (!verifying) { return <SetUrlView onCancel={onBack} - onVerify={(url) => { - 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 <ConfirmProviderView @@ -46,7 +53,7 @@ export function ProviderAddPage({ onBack }: Props): VNode { setVerifying(undefined); }} onConfirm={() => { - 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<string | undefined>; + onVerify: (s: string) => Promise<BackupBackupProviderTerms | undefined>; + onConfirm: (url: string, name: string) => Promise<string | undefined>; withError?: string; } -export function SetUrlView({ initialValue, onCancel, onVerify, withError }: SetUrlViewProps) { +export function SetUrlView({ initialValue, onCancel, onVerify, onConfirm, withError }: SetUrlViewProps) { const [value, setValue] = useState<string>(initialValue || "") + const [urlError, setUrlError] = useState(false) + const [name, setName] = useState<string|undefined>(undefined) const [error, setError] = useState<string | undefined>(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 <PopupBox> <section> <h1> Add backup provider</h1> <ErrorMessage title={error && "Could not get provider information"} description={error} /> <LightText> Backup providers may charge for their service</LightText> <p> - <Input> + <Input invalid={urlError}> <label>URL</label> <input type="text" placeholder="https://" value={value} onChange={(e) => setValue(e.currentTarget.value)} /> </Input> <Input> <label>Name</label> - <input type="text" disabled /> + <input type="text" disabled={name === undefined} value={name} onChange={e => setName(e.currentTarget.value)}/> </Input> </p> </section> <footer> <Button onClick={onCancel}><i18n.Translate> < Back</i18n.Translate></Button> <ButtonPrimary - disabled={!value} + disabled={!value && !urlError} onClick={() => { - 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) }}><i18n.Translate>Next</i18n.Translate></ButtonPrimary> </footer> </PopupBox> @@ -108,13 +132,13 @@ export function ConfirmProviderView({ url, provider, onCancel, onConfirm }: Conf <SmallTextLight>Please review and accept this provider's terms of service</SmallTextLight> <h2>1. Pricing</h2> <p> - {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`} </p> <h2>2. Storage</h2> <p> {provider.storage_limit_in_megabytes} megabytes of storage per year of service </p> - <Checkbox label="Accept terms of service" name="terms" onToggle={() => setAccepted(old => !old)} enabled={accepted}/> + <Checkbox label="Accept terms of service" name="terms" onToggle={() => setAccepted(old => !old)} enabled={accepted} /> </section> <footer> <Button onClick={onCancel}><i18n.Translate> < Back</i18n.Translate></Button> diff --git a/packages/taler-wallet-webextension/src/popup/ProviderDetail.stories.tsx b/packages/taler-wallet-webextension/src/popup/ProviderDetail.stories.tsx index 480d7b1a4..d82e8f588 100644 --- a/packages/taler-wallet-webextension/src/popup/ProviderDetail.stories.tsx +++ b/packages/taler-wallet-webextension/src/popup/ProviderDetail.stories.tsx @@ -43,6 +43,7 @@ function createExample<Props>(Component: FunctionalComponent<Props>, props: Part export const Active = createExample(TestedComponent, { info: { "active": true, + name:'sync.demo', "syncProviderBaseUrl": "http://sync.taler:9967/", "lastSuccessfulBackupTimestamp": { "t_ms": 1625063925078 @@ -67,6 +68,7 @@ export const Active = createExample(TestedComponent, { export const ActiveErrorSync = createExample(TestedComponent, { info: { "active": true, + name:'sync.demo', "syncProviderBaseUrl": "http://sync.taler:9967/", "lastSuccessfulBackupTimestamp": { "t_ms": 1625063925078 @@ -100,6 +102,7 @@ export const ActiveErrorSync = createExample(TestedComponent, { export const ActiveBackupProblemUnreadable = createExample(TestedComponent, { info: { "active": true, + name:'sync.demo', "syncProviderBaseUrl": "http://sync.taler:9967/", "lastSuccessfulBackupTimestamp": { "t_ms": 1625063925078 @@ -127,6 +130,7 @@ export const ActiveBackupProblemUnreadable = createExample(TestedComponent, { export const ActiveBackupProblemDevice = createExample(TestedComponent, { info: { "active": true, + name:'sync.demo', "syncProviderBaseUrl": "http://sync.taler:9967/", "lastSuccessfulBackupTimestamp": { "t_ms": 1625063925078 @@ -159,6 +163,7 @@ export const ActiveBackupProblemDevice = createExample(TestedComponent, { export const InactiveUnpaid = createExample(TestedComponent, { info: { "active": false, + name:'sync.demo', "syncProviderBaseUrl": "http://sync.demo.taler.net/", "paymentProposalIds": [], "paymentStatus": { @@ -175,6 +180,7 @@ export const InactiveUnpaid = createExample(TestedComponent, { export const InactiveInsufficientBalance = createExample(TestedComponent, { info: { "active": false, + name:'sync.demo', "syncProviderBaseUrl": "http://sync.demo.taler.net/", "paymentProposalIds": [], "paymentStatus": { @@ -191,6 +197,7 @@ export const InactiveInsufficientBalance = createExample(TestedComponent, { export const InactivePending = createExample(TestedComponent, { info: { "active": false, + name:'sync.demo', "syncProviderBaseUrl": "http://sync.demo.taler.net/", "paymentProposalIds": [], "paymentStatus": { @@ -208,6 +215,7 @@ export const InactivePending = createExample(TestedComponent, { export const ActiveTermsChanged = createExample(TestedComponent, { info: { "active": true, + name:'sync.demo', "syncProviderBaseUrl": "http://sync.demo.taler.net/", "paymentProposalIds": [], "paymentStatus": { diff --git a/packages/taler-wallet-webextension/src/popup/ProviderDetailPage.tsx b/packages/taler-wallet-webextension/src/popup/ProviderDetailPage.tsx index 12567c2c7..0b76d7560 100644 --- a/packages/taler-wallet-webextension/src/popup/ProviderDetailPage.tsx +++ b/packages/taler-wallet-webextension/src/popup/ProviderDetailPage.tsx @@ -20,7 +20,7 @@ import { ProviderInfo, ProviderPaymentStatus, ProviderPaymentType } from "@gnu-t import { format, formatDuration, intervalToDuration } from "date-fns"; import { Fragment, VNode } from "preact"; import { ErrorMessage } from "../components/ErrorMessage"; -import { Button, ButtonDestructive, ButtonPrimary, PaymentStatus, PopupBox } from "../components/styled"; +import { Button, ButtonDestructive, ButtonPrimary, PaymentStatus, PopupBox, SmallTextLight } from "../components/styled"; import { useProviderStatus } from "../hooks/useProviderStatus"; interface Props { @@ -39,7 +39,7 @@ export function ProviderDetailPage({ pid, onBack }: Props): VNode { } return <ProviderView info={status.info} onSync={status.sync} - onDelete={() => { null }} + onDelete={() => status.remove().then(onBack) } onBack={onBack} onExtend={() => { null }} />; @@ -63,7 +63,7 @@ export function ProviderView({ info, onDelete, onSync, onBack, onExtend }: ViewP </header> <section> <Error info={info} /> - <h3>{info.syncProviderBaseUrl}</h3> + <h3>{info.name} <SmallTextLight>{info.syncProviderBaseUrl}</SmallTextLight></h3> <p>{daysSince(info?.lastSuccessfulBackupTimestamp)} </p> <p>{descriptionByStatus(info.paymentStatus)}</p> {info.paymentStatus.type === ProviderPaymentType.TermsChanged && <div> @@ -99,7 +99,7 @@ export function ProviderView({ info, onDelete, onSync, onBack, onExtend }: ViewP <footer> <Button onClick={onBack}><i18n.Translate> < back</i18n.Translate></Button> <div> - <ButtonDestructive disabled onClick={onDelete}><i18n.Translate>remove</i18n.Translate></ButtonDestructive> + <ButtonDestructive onClick={onDelete}><i18n.Translate>remove</i18n.Translate></ButtonDestructive> <ButtonPrimary disabled onClick={onExtend}><i18n.Translate>extend</i18n.Translate></ButtonPrimary> <ButtonPrimary onClick={onSync}><i18n.Translate>sync now</i18n.Translate></ButtonPrimary> </div> @@ -174,7 +174,7 @@ function descriptionByStatus(status: ProviderPaymentStatus) { case ProviderPaymentType.InsufficientBalance: return 'no enough balance to make the payment' case ProviderPaymentType.Unpaid: - return 'not pay yet' + return 'not paid yet' case ProviderPaymentType.Paid: case ProviderPaymentType.TermsChanged: if (status.paidUntil.t_ms === 'never') { |