added remove button and more complex add-provider interaction

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

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();
   }, []);

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

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

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) => {
+      onVerify={(url) => getProviderInfo(url)}
-        return fetch(`${url}/config`)
+      onConfirm={(url, name) => getProviderInfo(url)
-          .catch(e => { throw new Error(`Network error`) })
+        .then((provider) => {
-          .then(getJsonIfOk)
+          setVerifying({ url, name, provider });
-          .then((provider) => { setVerifying({ url, provider }); return undefined })
+        })
-          .catch((e) => e.message)
+        .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}`
+          const url = canonicalizeBaseUrl(value)
-          url = url.endsWith('/') ? url.substring(0, url.length - 1) : url;
+          return onConfirm(url, name!).then(r => r ? setError(r) : undefined)
-          return onVerify(url).then(r => r ? setError(r) : undefined)
         }}><i18n.Translate>Next</i18n.Translate></ButtonPrimary>
     </footer>
   </PopupBox>
@@ -114,7 +138,7 @@ export function ConfirmProviderView({ url, provider, onCancel, onConfirm }: Conf
       <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>

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

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

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