diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src/popup/ProviderAddPage.tsx')
-rw-r--r-- | packages/taler-wallet-webextension/src/popup/ProviderAddPage.tsx | 66 |
1 files changed, 45 insertions, 21 deletions
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> |