[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]
[taler-wallet-core] 02/02: added remove button and more complex add-prov
|
From: |
gnunet |
|
Subject: |
[taler-wallet-core] 02/02: added remove button and more complex add-provider interaction |
|
Date: |
Thu, 15 Jul 2021 20:05:27 +0200 |
This is an automated email from the git hooks/post-receive script.
sebasjm pushed a commit to branch master
in repository wallet-core.
commit 6d3db4ce6ce3119f299936d9f0e4052bf1eff6c7
Author: Sebastian <sebasjm@gmail.com>
AuthorDate: Thu Jul 15 15:05:09 2021 -0300
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(-)
diff --git a/packages/taler-wallet-webextension/src/components/styled/index.tsx
b/packages/taler-wallet-webextension/src/components/styled/index.tsx
index ebca5893..11a0d014 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 42eab5d8..12427882 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<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();
}, []);
diff --git a/packages/taler-wallet-webextension/src/popup/Backup.stories.tsx
b/packages/taler-wallet-webextension/src/popup/Backup.stories.tsx
index ed03f208..1c1c4766 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 768a64a1..940d1f2a 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 92579e36..2680345f 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 480d7b1a..d82e8f58 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 12567c2c..0b76d756 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') {
diff --git a/packages/taler-wallet-webextension/src/wxApi.ts
b/packages/taler-wallet-webextension/src/wxApi.ts
index 60ad26e7..52ce27f2 100644
--- a/packages/taler-wallet-webextension/src/wxApi.ts
+++ b/packages/taler-wallet-webextension/src/wxApi.ts
@@ -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 })
--
To stop receiving notification emails like this one, please contact
gnunet@gnunet.org.