diff options
Diffstat (limited to 'pages')
| -rw-r--r-- | pages/confirm-contract.html | 74 | ||||
| -rw-r--r-- | pages/confirm-contract.tsx | 184 | ||||
| -rw-r--r-- | pages/confirm-create-reserve.html | 92 | ||||
| -rw-r--r-- | pages/confirm-create-reserve.tsx | 410 | ||||
| -rw-r--r-- | pages/debug.html | 13 | ||||
| -rw-r--r-- | pages/help/empty-wallet.html | 30 | ||||
| -rw-r--r-- | pages/show-db.html | 15 | ||||
| -rw-r--r-- | pages/show-db.ts | 57 |
8 files changed, 875 insertions, 0 deletions
diff --git a/pages/confirm-contract.html b/pages/confirm-contract.html new file mode 100644 index 000000000..809b2177f --- /dev/null +++ b/pages/confirm-contract.html @@ -0,0 +1,74 @@ +<!DOCTYPE html> +<html> + +<head> + <title>Taler Wallet: Confirm Reserve Creation</title> + + <link rel="stylesheet" type="text/css" href="../style/lang.css"> + <link rel="stylesheet" type="text/css" href="../style/wallet.css"> + + <link rel="icon" href="../img/icon.png"> + + <script src="../lib/vendor/URI.js"></script> + <script src="../lib/vendor/preact.js"></script> + <script src="../lib/vendor/system-csp-production.src.js"></script> + <!-- <script src="../lib/vendor/jed.js"></script> --> + <script src="../lib/i18n.js"></script> + <script src="../i18n/strings.js"></script> + <script src="../lib/module-trampoline.js"></script> + + <style> + button.accept { + background-color: #5757D2; + border: 1px solid black; + border-radius: 5px; + margin: 1em 0; + padding: 0.5em; + font-weight: bold; + color: white; + } + button.linky { + background:none!important; + border:none; + padding:0!important; + + font-family:arial,sans-serif; + color:#069; + text-decoration:underline; + cursor:pointer; + } + + input.url { + width: 25em; + } + + + button.accept:disabled { + background-color: #dedbe8; + border: 1px solid white; + border-radius: 5px; + margin: 1em 0; + padding: 0.5em; + font-weight: bold; + color: #2C2C2C; + } + + .errorbox { + border: 1px solid; + display: inline-block; + margin: 1em; + padding: 1em; + font-weight: bold; + background: #FF8A8A; + } + </style> +</head> + +<body> + <section id="main"> + <h1>GNU Taler Wallet</h1> + <article id="contract" class="fade"></article> + </section> +</body> + +</html> diff --git a/pages/confirm-contract.tsx b/pages/confirm-contract.tsx new file mode 100644 index 000000000..6cdc5ddf9 --- /dev/null +++ b/pages/confirm-contract.tsx @@ -0,0 +1,184 @@ +/* + This file is part of TALER + (C) 2015 GNUnet e.V. + + TALER is free software; you can redistribute it and/or modify it under the + terms of the GNU General Public License as published by the Free Software + Foundation; either version 3, or (at your option) any later version. + + TALER is distributed in the hope that it will be useful, but WITHOUT ANY + WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR + A PARTICULAR PURPOSE. See the GNU General Public License for more details. + + You should have received a copy of the GNU General Public License along with + TALER; see the file COPYING. If not, see <http://www.gnu.org/licenses/> + */ + +/** + * Page shown to the user to confirm entering + * a contract. + * + * @author Florian Dold + */ + + +/// <reference path="../lib/decl/preact.d.ts" /> +import {substituteFulfillmentUrl} from "../lib/wallet/helpers"; +import {Contract, AmountJson} from "../lib/wallet/types"; +import {renderContract, prettyAmount} from "../lib/wallet/renderHtml"; +"use strict"; + + +interface DetailState { + collapsed: boolean; +} + +interface DetailProps { + contract: Contract; +} + + +class Details extends preact.Component<DetailProps, DetailState> { + constructor() { + super(); + this.state = { + collapsed: true + }; + } + + render(props: DetailProps, state: DetailState) { + if (state.collapsed) { + return ( + <div> + <button className="linky" + onClick={() => { this.setState({collapsed: false})}}> + show more details + </button> + </div> + ); + } else { + return ( + <div> + <button className="linky" + onClick={() => this.setState({collapsed: true})}> + show less details + </button> + <div> + Accepted exchanges: + <ul> + {props.contract.exchanges.map( + e => <li>{`${e.url}: ${e.master_pub}`}</li>)} + </ul> + </div> + </div>); + } + } +} + +interface ContractPromptProps { + offer: any; +} + +interface ContractPromptState { + error: string|null; + payDisabled: boolean; +} + +class ContractPrompt extends preact.Component<ContractPromptProps, ContractPromptState> { + constructor() { + super(); + this.state = { + error: null, + payDisabled: true, + } + } + + componentWillMount() { + this.checkPayment(); + } + + componentWillUnmount() { + // FIXME: abort running ops + } + + checkPayment() { + let msg = { + type: 'check-pay', + detail: { + offer: this.props.offer + } + }; + chrome.runtime.sendMessage(msg, (resp) => { + if (resp.error) { + console.log("check-pay error", JSON.stringify(resp)); + switch (resp.error) { + case "coins-insufficient": + this.state.error = i18n`You have insufficient funds of the requested currency in your wallet.`; + break; + default: + this.state.error = `Error: ${resp.error}`; + break; + } + this.state.payDisabled = true; + } else { + this.state.payDisabled = false; + this.state.error = null; + } + this.forceUpdate(); + window.setTimeout(() => this.checkPayment(), 300); + }); + } + + doPayment() { + let d = {offer: this.props.offer}; + chrome.runtime.sendMessage({type: 'confirm-pay', detail: d}, (resp) => { + if (resp.error) { + console.log("confirm-pay error", JSON.stringify(resp)); + switch (resp.error) { + case "coins-insufficient": + this.state.error = "You do not have enough coins of the" + + " requested currency."; + break; + default: + this.state.error = `Error: ${resp.error}`; + break; + } + preact.rerender(); + return; + } + let c = d.offer.contract; + console.log("contract", c); + document.location.href = substituteFulfillmentUrl(c.fulfillment_url, + this.props.offer); + }); + } + + + render(props: ContractPromptProps, state: ContractPromptState) { + let c = props.offer.contract; + return ( + <div> + {renderContract(c)} + <button onClick={() => this.doPayment()} + disabled={state.payDisabled} + className="accept"> + Confirm payment + </button> + (state.error ? <p className="errorbox">{state.error}</p> : <p />) + <Details contract={c} /> + </div> + ); + } +} + + +export function main() { + let url = URI(document.location.href); + let query: any = URI.parseQuery(url.query()); + let offer = JSON.parse(query.offer); + console.dir(offer); + let contract = offer.contract; + + preact.render(<ContractPrompt offer={offer}/>, document.getElementById( + "contract")!); +} diff --git a/pages/confirm-create-reserve.html b/pages/confirm-create-reserve.html new file mode 100644 index 000000000..5c42a68f6 --- /dev/null +++ b/pages/confirm-create-reserve.html @@ -0,0 +1,92 @@ +<!DOCTYPE html> +<html> + +<head> + <title>Taler Wallet: Select Taler Provider</title> + + <link rel="icon" href="../img/icon.png"> + + <script src="../lib/vendor/URI.js"></script> + <script src="../lib/vendor/preact.js"></script> + + <!-- i18n --> + <script src="../lib/vendor/jed.js"></script> + <script src="../lib/i18n.js"></script> + <script src="../i18n/strings.js"></script> + + <!-- module loading --> + <script src="../lib/vendor/system-csp-production.src.js"></script> + <script src="../lib/module-trampoline.js"></script> + + + <style> + #main { + border: solid 1px black; + border-radius: 10px; + margin: auto; + max-width: 50%; + padding: 2em; + } + + button.accept { + background-color: #5757D2; + border: 1px solid black; + border-radius: 5px; + margin: 1em 0; + padding: 0.5em; + font-weight: bold; + color: white; + } + button.linky { + background:none!important; + border:none; + padding:0!important; + + font-family:arial,sans-serif; + color:#069; + text-decoration:underline; + cursor:pointer; + } + + + button.accept:disabled { + background-color: #dedbe8; + border: 1px solid white; + border-radius: 5px; + margin: 1em 0; + padding: 0.5em; + font-weight: bold; + color: #2C2C2C; + } + + input.url { + width: 25em; + } + + table { + border-collapse: collapse; + } + + td { + border-left: 1px solid black; + border-right: 1px solid black; + text-align: center; + padding: 0.3em; + } + + span.spacer { + padding-left: 0.5em; + padding-right: 0.5em; + } + + </style> +</head> + +<body> + <section id="main"> + <h1>GNU Taler Wallet</h1> + <div class="fade" id="exchange-selection"></div> + </section> +</body> + +</html> diff --git a/pages/confirm-create-reserve.tsx b/pages/confirm-create-reserve.tsx new file mode 100644 index 000000000..0a7b9daa5 --- /dev/null +++ b/pages/confirm-create-reserve.tsx @@ -0,0 +1,410 @@ +/* + This file is part of TALER + (C) 2015-2016 GNUnet e.V. + + TALER is free software; you can redistribute it and/or modify it under the + terms of the GNU General Public License as published by the Free Software + Foundation; either version 3, or (at your option) any later version. + + TALER is distributed in the hope that it will be useful, but WITHOUT ANY + WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR + A PARTICULAR PURPOSE. See the GNU General Public License for more details. + + You should have received a copy of the GNU General Public License along with + TALER; see the file COPYING. If not, see <http://www.gnu.org/licenses/> + */ + + +/** + * Page shown to the user to confirm creation + * of a reserve, usually requested by the bank. + * + * @author Florian Dold + */ + +import {amountToPretty, canonicalizeBaseUrl} from "../lib/wallet/helpers"; +import {AmountJson, CreateReserveResponse} from "../lib/wallet/types"; +import {ReserveCreationInfo, Amounts} from "../lib/wallet/types"; +import {Denomination} from "../lib/wallet/types"; +import {getReserveCreationInfo} from "../lib/wallet/wxApi"; + +"use strict"; + +let h = preact.h; + +function delay<T>(delayMs: number, value: T): Promise<T> { + return new Promise<T>((resolve, reject) => { + setTimeout(() => resolve(value), delayMs); + }); +} + +class EventTrigger { + triggerResolve: any; + triggerPromise: Promise<boolean>; + + constructor() { + this.reset(); + } + + private reset() { + this.triggerPromise = new Promise<boolean>((resolve, reject) => { + this.triggerResolve = resolve; + }); + } + + trigger() { + this.triggerResolve(false); + this.reset(); + } + + async wait(delayMs: number): Promise<boolean> { + return await Promise.race([this.triggerPromise, delay(delayMs, true)]); + } +} + + +interface StateHolder<T> { + (): T; + (newState: T): void; +} + +/** + * Component that doesn't hold its state in one object, + * but has multiple state holders. + */ +abstract class ImplicitStateComponent<PropType> extends preact.Component<PropType, void> { + makeState<StateType>(initial: StateType): StateHolder<StateType> { + let state: StateType = initial; + return (s?: StateType): StateType => { + if (s !== undefined) { + state = s; + // In preact, this will always schedule a (debounced) redraw + this.setState({} as any); + } + return state; + }; + } +} + + +function renderReserveCreationDetails(rci: ReserveCreationInfo|null) { + if (!rci) { + return <p> + Details will be displayed when a valid exchange provider URL is entered.</p> + } + + let denoms = rci.selectedDenoms; + + let countByPub: {[s: string]: number} = {}; + let uniq: Denomination[] = []; + + denoms.forEach((x: Denomination) => { + let c = countByPub[x.denom_pub] || 0; + if (c == 0) { + uniq.push(x); + } + c += 1; + countByPub[x.denom_pub] = c; + }); + + function row(denom: Denomination) { + return ( + <tr> + <td>{countByPub[denom.denom_pub] + "x"}</td> + <td>{amountToPretty(denom.value)}</td> + <td>{amountToPretty(denom.fee_withdraw)}</td> + <td>{amountToPretty(denom.fee_refresh)}</td> + <td>{amountToPretty(denom.fee_deposit)}</td> + </tr> + ); + } + + let withdrawFeeStr = amountToPretty(rci.withdrawFee); + let overheadStr = amountToPretty(rci.overhead); + + return ( + <div> + <p>{`Withdrawal fees: ${withdrawFeeStr}`}</p> + <p>{`Rounding loss: ${overheadStr}`}</p> + <table> + <thead> + <th># Coins</th> + <th>Value</th> + <th>Withdraw Fee</th> + <th>Refresh Fee</th> + <th>Deposit fee</th> + </thead> + <tbody> + {uniq.map(row)} + </tbody> + </table> + </div> + ); +} + + +function getSuggestedExchange(currency: string): Promise<string> { + // TODO: make this request go to the wallet backend + // Right now, this is a stub. + const defaultExchange: {[s: string]: string} = { + "KUDOS": "https://exchange.demo.taler.net", + "PUDOS": "https://exchange.test.taler.net", + }; + + let exchange = defaultExchange[currency]; + + if (!exchange) { + exchange = "" + } + + return Promise.resolve(exchange); +} + + +function WithdrawFee(props: {reserveCreationInfo: ReserveCreationInfo|null}): JSX.Element { + if (props.reserveCreationInfo) { + let {overhead, withdrawFee} = props.reserveCreationInfo; + let totalCost = Amounts.add(overhead, withdrawFee).amount; + return <p>Withdraw fees: {amountToPretty(totalCost)}</p>; + } + return <p />; +} + + +interface ExchangeSelectionProps { + suggestedExchangeUrl: string; + amount: AmountJson; + callback_url: string; + wt_types: string[]; +} + + +class ExchangeSelection extends ImplicitStateComponent<ExchangeSelectionProps> { + statusString: StateHolder<string|null> = this.makeState(null); + reserveCreationInfo: StateHolder<ReserveCreationInfo|null> = this.makeState( + null); + url: StateHolder<string|null> = this.makeState(null); + detailCollapsed: StateHolder<boolean> = this.makeState(true); + + updateEvent = new EventTrigger(); + + constructor(props: ExchangeSelectionProps) { + super(props); + this.onUrlChanged(props.suggestedExchangeUrl || null); + } + + + renderAdvanced(): JSX.Element { + if (this.detailCollapsed() && this.url() !== null) { + return ( + <button className="linky" + onClick={() => this.detailCollapsed(false)}> + view fee structure / select different exchange provider + </button> + ); + } + return ( + <div> + <h2>Provider Selection</h2> + <label>URL: </label> + <input className="url" type="text" spellCheck={false} + value={this.url()!} + key="exchange-url-input" + onInput={(e) => this.onUrlChanged((e.target as HTMLInputElement).value)}/> + <br /> + {this.renderStatus()} + <h2>Detailed Fee Structure</h2> + {renderReserveCreationDetails(this.reserveCreationInfo())} + </div>) + } + + renderFee() { + if (!this.reserveCreationInfo()) { + return "??"; + } + let rci = this.reserveCreationInfo()!; + let totalCost = Amounts.add(rci.overhead, rci.withdrawFee).amount; + return `${amountToPretty(totalCost)}`; + } + + renderFeeStatus() { + if (this.reserveCreationInfo()) { + return ( + <p> + The exchange provider will charge + {" "} + {this.renderFee()} + {" "} + in fees. + </p> + ); + } + if (this.url() && !this.statusString()) { + let shortName = URI(this.url()!).host(); + return <p>Waiting for a response from + <em>{shortName}</em> + </p>; + } + return ( + <p> + Information about fees will be available when an exchange provider is selected. + </p> + ); + } + + render(props: ExchangeSelectionProps): JSX.Element { + return ( + <div> + <p> + {"You are about to withdraw "} + <strong>{amountToPretty(props.amount)}</strong> + {" from your bank account into your wallet."} + </p> + {this.renderFeeStatus()} + <button className="accept" + disabled={this.reserveCreationInfo() == null} + onClick={() => this.confirmReserve()}> + Accept fees and withdraw + </button> + <br/> + {this.renderAdvanced()} + </div> + ); + } + + + confirmReserve() { + this.confirmReserveImpl(this.reserveCreationInfo()!, + this.url()!, + this.props.amount, + this.props.callback_url); + } + + /** + * Do an update of the reserve creation info, without any debouncing. + */ + async forceReserveUpdate() { + this.reserveCreationInfo(null); + if (!this.url()) { + this.statusString(i18n`Error: URL is empty`); + return; + } + + this.statusString(null); + let parsedUrl = URI(this.url()!); + if (parsedUrl.is("relative")) { + this.statusString(i18n`Error: URL may not be relative`); + return; + } + + try { + let r = await getReserveCreationInfo(this.url()!, + this.props.amount); + console.log("get exchange info resolved"); + this.reserveCreationInfo(r); + console.dir(r); + } catch (e) { + console.log("get exchange info rejected"); + if (e.hasOwnProperty("httpStatus")) { + this.statusString(`Error: request failed with status ${e.httpStatus}`); + } else if (e.hasOwnProperty("errorResponse")) { + let resp = e.errorResponse; + this.statusString(`Error: ${resp.error} (${resp.hint})`); + } + } + } + + reset() { + this.statusString(null); + this.reserveCreationInfo(null); + } + + confirmReserveImpl(rci: ReserveCreationInfo, + exchange: string, + amount: AmountJson, + callback_url: string) { + const d = {exchange, amount}; + const cb = (rawResp: any) => { + if (!rawResp) { + throw Error("empty response"); + } + // FIXME: filter out types that bank/exchange don't have in common + let wire_details = rci.wireInfo; + if (!rawResp.error) { + const resp = CreateReserveResponse.checked(rawResp); + let q: {[name: string]: string|number} = { + wire_details: JSON.stringify(wire_details), + exchange: resp.exchange, + reserve_pub: resp.reservePub, + amount_value: amount.value, + amount_fraction: amount.fraction, + amount_currency: amount.currency, + }; + let url = URI(callback_url).addQuery(q); + if (!url.is("absolute")) { + throw Error("callback url is not absolute"); + } + console.log("going to", url.href()); + document.location.href = url.href(); + } else { + this.reset(); + this.statusString( + `Oops, something went wrong.` + + `The wallet responded with error status (${rawResp.error}).`); + } + }; + chrome.runtime.sendMessage({type: 'create-reserve', detail: d}, cb); + } + + async onUrlChanged(url: string|null) { + this.reset(); + this.url(url); + if (url == undefined) { + return; + } + this.updateEvent.trigger(); + let waited = await this.updateEvent.wait(200); + if (waited) { + // Run the actual update if nobody else preempted us. + this.forceReserveUpdate(); + this.forceUpdate(); + } + } + + renderStatus(): any { + if (this.statusString()) { + return <p><strong style="color: red;">{this.statusString()}</strong></p>; + } else if (!this.reserveCreationInfo()) { + return <p>Checking URL, please wait ...</p>; + } + return ""; + } +} + +export async function main() { + const url = URI(document.location.href); + const query: any = URI.parseQuery(url.query()); + const amount = AmountJson.checked(JSON.parse(query.amount)); + const callback_url = query.callback_url; + const bank_url = query.bank_url; + const wt_types = JSON.parse(query.wt_types); + + try { + const suggestedExchangeUrl = await getSuggestedExchange(amount.currency); + let args = { + wt_types, + suggestedExchangeUrl, + callback_url, + amount + }; + + preact.render(<ExchangeSelection {...args} />, document.getElementById( + "exchange-selection")!); + + } catch (e) { + // TODO: provide more context information, maybe factor it out into a + // TODO:generic error reporting function or component. + document.body.innerText = `Fatal error: "${e.message}".`; + console.error(`got error "${e.message}"`, e); + } +}
\ No newline at end of file diff --git a/pages/debug.html b/pages/debug.html new file mode 100644 index 000000000..221c7380c --- /dev/null +++ b/pages/debug.html @@ -0,0 +1,13 @@ +<!doctype html> +<html> + <head> + <title>Taler Wallet Debugging</title> + <link rel="icon" href="../img/icon.png"> + </head> + <body> + <h1>Debug Pages</h1> + <a href="show-db.html">Show DB</a> <br> + <a href="../popup/balance-overview.html">Show balance</a> + + </body> +</html> diff --git a/pages/help/empty-wallet.html b/pages/help/empty-wallet.html new file mode 100644 index 000000000..952bd92b7 --- /dev/null +++ b/pages/help/empty-wallet.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>GNU Taler Help - Empty Wallet</title> + <link rel="icon" href="../../img/icon.png"> + <meta name="description" content=""> + <link rel="stylesheet" type="text/css" href="../../style/wallet.css"> + </head> + <body> + <div class="container" id="main"> + <div class="row"> + <div class="col-lg-12"> + <h2 lang="en">Your wallet is empty!</h2> + <p lang="en">You have succeeded with installing the Taler wallet. However, before + you can buy articles using the Taler wallet, you must withdraw electronic coins. + This is typically done by visiting your bank's online banking Web site. There, + you instruct your bank to transfer the funds to a Taler exchange operator. In + return, your wallet will be allowed to withdraw electronic coins.</p> + <p lang="en">At this stage, we are not aware of any regular exchange operators issuing + coins in well-known currencies. However, to see how Taler would work, you + can visit our "fake" bank at + <a href="https://bank.demo.taler.net/">bank.demo.taler.net</a> to + withdraw coins in the "KUDOS" currency that we created just for + demonstrating the system.</p> + </div> + </div> + </div> + </body> +</html> diff --git a/pages/show-db.html b/pages/show-db.html new file mode 100644 index 000000000..024e844ee --- /dev/null +++ b/pages/show-db.html @@ -0,0 +1,15 @@ + +<!doctype html> + +<html> + <head> + <title>Taler Wallet: Reserve Created</title> + <link rel="stylesheet" type="text/css" href="../style/wallet.css"> + <link rel="icon" href="../img/icon.png"> + <script src="show-db.js"></script> + </head> + <body> + <h1>DB Dump</h1> + <pre id="dump"></pre> + </body> +</html> diff --git a/pages/show-db.ts b/pages/show-db.ts new file mode 100644 index 000000000..71e74388b --- /dev/null +++ b/pages/show-db.ts @@ -0,0 +1,57 @@ +/* + This file is part of TALER + (C) 2015 GNUnet e.V. + + TALER is free software; you can redistribute it and/or modify it under the + terms of the GNU General Public License as published by the Free Software + Foundation; either version 3, or (at your option) any later version. + + TALER is distributed in the hope that it will be useful, but WITHOUT ANY + WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR + A PARTICULAR PURPOSE. See the GNU General Public License for more details. + + You should have received a copy of the GNU General Public License along with + TALER; see the file COPYING. If not, see <http://www.gnu.org/licenses/> + */ + + +/** + * Wallet database dump for debugging. + * + * @author Florian Dold + */ + +function replacer(match: string, pIndent: string, pKey: string, pVal: string, + pEnd: string) { + var key = '<span class=json-key>'; + var val = '<span class=json-value>'; + var str = '<span class=json-string>'; + var r = pIndent || ''; + if (pKey) { + r = r + key + pKey.replace(/[": ]/g, '') + '</span>: '; + } + if (pVal) { + r = r + (pVal[0] == '"' ? str : val) + pVal + '</span>'; + } + return r + (pEnd || ''); +} + + +function prettyPrint(obj: any) { + var jsonLine = /^( *)("[\w]+": )?("[^"]*"|[\w.+-]*)?([,[{])?$/mg; + return JSON.stringify(obj, null as any, 3) + .replace(/&/g, '&').replace(/\\"/g, '"') + .replace(/</g, '<').replace(/>/g, '>') + .replace(jsonLine, replacer); +} + + +document.addEventListener("DOMContentLoaded", () => { + chrome.runtime.sendMessage({type: 'dump-db'}, (resp) => { + const el = document.getElementById('dump'); + if (!el) { + throw Error(); + } + el.innerHTML = prettyPrint(resp); + }); +}); |