taler/wallet-core
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Activity

added remove button and more complex add-provider interaction

Browse Source
This commit is contained in:
Sebastian 2021-07-15 15:05:09 -03:00
parent 7c2d2a3e15
commit 6d3db4ce6c
No known key found for this signature in database
GPG Key ID: BE4FF68352439FC1
8 changed files with 82 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/taler-wallet-webextension/src/components/styled/index.tsx
View File

@ -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'}
}
`

10
packages/taler-wallet-webextension/src/hooks/useProviderStatus.ts
View File

@ -5,6 +5,7 @@ import * as wxApi from "../wxApi";
export interface ProviderStatus {
info?: ProviderInfo;
sync: () => Promise<void>;
remove: () => Promise<void>;
}
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();
}, []);

8
packages/taler-wallet-webextension/src/popup/Backup.stories.tsx
View File

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

2
packages/taler-wallet-webextension/src/popup/BackupPage.tsx
View File

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

66
packages/taler-wallet-webextension/src/popup/ProviderAddPage.tsx
View File

@ -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> &lt; 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> &lt; Back</i18n.Translate></Button>

8
packages/taler-wallet-webextension/src/popup/ProviderDetail.stories.tsx
View File

@ -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": {

10
packages/taler-wallet-webextension/src/popup/ProviderDetailPage.tsx
View File

@ -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> &lt; 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') {

8
packages/taler-wallet-webextension/src/wxApi.ts
View File

@ -39,7 +39,7 @@ import {
RetryTransactionRequest,
SetWalletDeviceIdRequest,
} from "@gnu-taler/taler-util";
import { AddBackupProviderRequest, BackupProviderState, OperationFailedError } from "@gnu-taler/taler-wallet-core";
import { AddBackupProviderRequest, BackupProviderState, OperationFailedError, RemoveBackupProviderRequest } from "@gnu-taler/taler-wallet-core";
import { BackupInfo } from "@gnu-taler/taler-wallet-core";
export interface ExtendedPermissionsResponse {
@ -174,9 +174,9 @@ export function getBackupInfo(): Promise<BackupInfo> {
/**
* Add a backup provider and activate it
*/
export function addBackupProvider(backupProviderBaseUrl: string): Promise<void> {
export function addBackupProvider(backupProviderBaseUrl: string, name: string): Promise<void> {
return callBackend("addBackupProvider", {
backupProviderBaseUrl, activate: true
backupProviderBaseUrl, activate: true, name
} as AddBackupProviderRequest)
}
@ -194,7 +194,7 @@ export function syncOneProvider(url: string): Promise<void> {
return callBackend("runBackupCycle", { providers: [url] })
}
export function removeProvider(url: string): Promise<void> {
return callBackend("removeBackupProvider", { provider: url })
return callBackend("removeBackupProvider", { provider: url } as RemoveBackupProviderRequest)
}
export function extendedProvider(url: string): Promise<void> {
return callBackend("extendBackupProvider", { provider: url })