From 6d3db4ce6ce3119f299936d9f0e4052bf1eff6c7 Mon Sep 17 00:00:00 2001
From: Sebastian <sebasjm@gmail.com>
Date: Thu, 15 Jul 2021 15:05:09 -0300
Subject: added remove button and more complex add-provider interaction

---
 .../src/popup/ProviderAddPage.tsx                  | 66 +++++++++++++++-------
 1 file changed, 45 insertions(+), 21 deletions(-)

(limited to 'packages/taler-wallet-webextension/src/popup/ProviderAddPage.tsx')

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> &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>
-- 
cgit v1.2.3