diff options
| -rwxr-xr-x | Makefile | 6 | ||||
| -rw-r--r-- | README | 3 | ||||
| -rw-r--r-- | extension/background/wallet.js | 6 | ||||
| -rw-r--r-- | extension/content_scripts/notify.js | 14 | ||||
| -rw-r--r-- | extension/manifest.json | 6 | ||||
| -rw-r--r-- | extension/popup/popup.css | 51 | ||||
| -rw-r--r-- | extension/popup/reserve-create-sepa.html | 28 | ||||
| -rw-r--r-- | extension/popup/reserve-create.html | 41 | ||||
| -rw-r--r-- | extension/popup/reserves.html | 29 | ||||
| -rw-r--r-- | extension/popup/transactions.html | 52 | ||||
| -rw-r--r-- | extension/popup/transactions.js | 56 | ||||
| -rw-r--r-- | extension/popup/wallet.html | 50 | ||||
| -rw-r--r-- | extension/popup/wallet.js | 85 | ||||
| -rwxr-xr-x | pack | 12 |
14 files changed, 397 insertions, 42 deletions
diff --git a/Makefile b/Makefile new file mode 100755 index 000000000..817dce69a --- /dev/null +++ b/Makefile @@ -0,0 +1,6 @@ +name=taler-wallet +version=0.1 +xpi=${name}-${version}.xpi + +xpi: + cd extension && zip ../${xpi} $$(git ls-files) @@ -4,5 +4,4 @@ See https://developer.mozilla.org/en-US/Add-ons/WebExtensions Installation ============ -Run ./pack to create the taler-wallet.xpi file. - +Run make to create the taler-wallet.xpi file. diff --git a/extension/background/wallet.js b/extension/background/wallet.js index a7a9c6cb6..ec7b3fb40 100644 --- a/extension/background/wallet.js +++ b/extension/background/wallet.js @@ -1,2 +1,8 @@ // Nothing here yet. // Eventually, the backend for the wallet will be implemented here. + +'use strict'; + +//chrome.browserAction.setBadgeBackgroundColor({color: "#000"}) +chrome.browserAction.setBadgeText({text: "42"}) +chrome.browserAction.setTitle({title: "Taler: 42 EUR"}) diff --git a/extension/content_scripts/notify.js b/extension/content_scripts/notify.js index 3a0f9001d..4a5c47c01 100644 --- a/extension/content_scripts/notify.js +++ b/extension/content_scripts/notify.js @@ -1,6 +1,7 @@ // Script that is injected into pages in order to allow merchants pages to // query the availability of Taler. +'use strict'; // Listen to messages from the backend. chrome.runtime.onMessage.addListener( @@ -8,11 +9,12 @@ chrome.runtime.onMessage.addListener( // do nothing, yet }); - -document.addEventListener('taler-checkout-probe', function(e) { - let evt = new Event('taler-wallet-present'); - document.dispatchEvent(evt); -}); +if (document && document.body) +{ + document.body.addEventListener('taler-checkout-probe', function(e) { + let evt = new Event('taler-wallet-present'); + document.body.dispatchEvent(evt); + }); +} console.log("Taler wallet: content page loaded"); - diff --git a/extension/manifest.json b/extension/manifest.json index b0ad9720e..1d0ad6d55 100644 --- a/extension/manifest.json +++ b/extension/manifest.json @@ -2,7 +2,7 @@ "description": "Privacy preserving and transparent payments", "manifest_version": 2, "name": "Taler Wallet", - "version": "1.0", + "version": "0.1", "applications": { "gecko": { @@ -13,14 +13,14 @@ "permissions": [ "http://*/*", "https://*/*" - ], + ], "browser_action": { "default_icon": "icons/taler-logo-24.png", "default_title": "Taler", "default_popup": "popup/wallet.html" }, - + "web_accessible_resources": [ "popup/reserves.html", "popup/wallet.html" diff --git a/extension/popup/popup.css b/extension/popup/popup.css new file mode 100644 index 000000000..023d1520b --- /dev/null +++ b/extension/popup/popup.css @@ -0,0 +1,51 @@ +body { + width: 35em; + margin: 0; + padding: 0 +} + +.nav { + background-color: #ddd; + padding: 0.5em 0; +} + +.nav a { + color: black; + padding: 0.5em; + text-decoration: none; +} + +.nav a.active { + background-color: white; + font-weight: bold; +} + +#content { + padding: 1em; +} + + +#wallet-table .amount { + text-align: right; +} + +.hidden { + display: none; +} + +#transactions-table th, +#transactions-table td { + padding: 0.2em 0.5em; +} + +#reserve-create table { + width: 100%; +} + +#reserve-create table td.label { + width: 5em; +} + +#reserve-create table .input input[type="text"] { + width: 100%; +}
\ No newline at end of file diff --git a/extension/popup/reserve-create-sepa.html b/extension/popup/reserve-create-sepa.html new file mode 100644 index 000000000..7f851970b --- /dev/null +++ b/extension/popup/reserve-create-sepa.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> + +<html> + <head> + <meta charset="utf-8"> + <link rel="stylesheet" href="popup.css" type="text/css"> + </head> + + <body> + <div id="header" class="nav"> + <a href="wallet.html">Wallet</a> + <a href="transactions.html">Transactions</a> + <a href="reserves.html" class="active">Reserves</a> + </div> + + <div id="content"> + <div id="reserve-create-sepa"> + SEPA info here. + </div> + </div> + + <div id="footer" class="nav"> + <a href="reserves.html">List reserves</a> + <a href="reserve-create.html">Create reserve</a> + </div> + + </body> +</html> diff --git a/extension/popup/reserve-create.html b/extension/popup/reserve-create.html new file mode 100644 index 000000000..0cfbe22a4 --- /dev/null +++ b/extension/popup/reserve-create.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> + +<html> + <head> + <meta charset="utf-8"> + <link rel="stylesheet" href="popup.css" type="text/css"> + </head> + + <body> + <div id="header" class="nav"> + <a href="wallet.html">Wallet</a> + <a href="transactions.html">Transactions</a> + <a href="reserves.html" class="active">Reserves</a> + </div> + + <div id="content"> + <form id="reserve-create" action="reserve-create-sepa.html"> + <table> + <tr> + <td class="label"><label for="mint">Mint URL:</label></td> + <td class="input"><input name="mint" type="text" /></td> + </tr> + <tr> + <td class="label"><label for="amount">Amount:</label></td> + <td class="input"><input name="amount" type="text" /></td> + </tr> + <tr> + <td class="label"></td> + <td class="input"><input type="submit" value="Create reserve " /></td> + </tr> + </table> + </form> + </div> + + <div id="footer" class="nav"> + <a href="reserves.html">List reserves</a> + <a href="reserve-create.html" class="active">Create reserve</a> + </div> + + </body> +</html> diff --git a/extension/popup/reserves.html b/extension/popup/reserves.html index 63db032e5..d5b5a1862 100644 --- a/extension/popup/reserves.html +++ b/extension/popup/reserves.html @@ -1,7 +1,28 @@ -<!doctype html> +<!DOCTYPE html> -<a href="javascript:history.back()">Back</a> +<html> + <head> + <meta charset="utf-8"> + <link rel="stylesheet" href="popup.css" type="text/css"> + </head> -<p /> + <body> + <div id="header" class="nav"> + <a href="wallet.html">Wallet</a> + <a href="transactions.html">Transactions</a> + <a href="reserves.html" class="active">Reserves</a> + </div> -Your reserves are listed here. + <div id="content"> + <div id="reserves"> + There are no reserves available. + </div> + </div> + + <div id="footer" class="nav"> + <a href="reserves.html" class="active">List reserves</a> + <a href="reserve-create.html">Create reserve</a> + </div> + + </body> +</html> diff --git a/extension/popup/transactions.html b/extension/popup/transactions.html index 427100853..2dc3fbea0 100644 --- a/extension/popup/transactions.html +++ b/extension/popup/transactions.html @@ -1,7 +1,51 @@ -<!doctype html> +<!DOCTYPE html> -<a href="javascript:history.back()">Back</a> +<html> + <head> + <meta charset="utf-8"> + <link rel="stylesheet" href="popup.css" type="text/css"> + <script src="transactions.js" type="text/javascript"></script> + </head> -<p /> + <body> + <div id="header" class="nav"> + <a href="wallet.html">Wallet</a> + <a href="transactions.html" class="active">Transactions</a> + <a href="reserves.html">Reserves</a> + </div> -Your past transactions are listed here. + <div id="content"> + <table id="transactions-table" class="hidden"> + <thead> + <tr> + <th>Date</th> + <th>Amount</th> + <th>Status</th> + <th></th> + </tr> + </thead> + <tbody> + <!-- + <tr> + <td class="date">2015-12-21 13:37</td> + <td class="amount">42 EUR</td> + <td class="status">Completed</td> + <td class="contract"><button>Contract</button></td> + </tr> + <tr> + <td class="date">2015-12-22 10:01</td> + <td class="amount">23 USD</td> + <td class="status">Pending</td> + <td class="contract"><button>Contract</button></td> + </tr> + --> + </tbody> + </table> + + <p id="no-transactions"> + There are no transactions to show. + </p> + </div> + + </body> +</html> diff --git a/extension/popup/transactions.js b/extension/popup/transactions.js new file mode 100644 index 000000000..7d38d3b36 --- /dev/null +++ b/extension/popup/transactions.js @@ -0,0 +1,56 @@ +'use strict'; + +function format_date (date) +{ + function pad (number) { + if (number < 10) { + return '0' + number; + } + return number; + } + + return date.getUTCFullYear() + + '-' + pad(date.getUTCMonth() + 1) + + '-' + pad(date.getUTCDate()) + + ' ' + pad(date.getUTCHours()) + + ':' + pad(date.getUTCMinutes()); + //':' + pad(date.getUTCSeconds()); +} + +function add_transaction (date, currency, amount, status, contract) +{ + let table = document.getElementById('transactions-table'); + table.className = table.className.replace(/\bhidden\b/, ''); + let tr = document.createElement('tr'); + table.appendChild(tr); + + let td_date = document.createElement('td'); + td_date.className = 'date'; + let text_date = document.createTextNode(format_date (date)); + tr.appendChild(td_date).appendChild(text_date); + + let td_amount = document.createElement('td'); + td_amount.className = 'amount'; + let text_amount = document.createTextNode(amount +' '+ currency); + tr.appendChild(td_amount).appendChild(text_amount); + + let td_status = document.createElement('td'); + td_status.className = 'status'; + let text_status = document.createTextNode(status); + tr.appendChild(td_status).appendChild(text_status); + + let td_contract = document.createElement('td'); + td_contract.className = 'contract'; + let btn_contract = document.createElement('button'); + btn_contract.appendChild(document.createTextNode('Contract')); + tr.appendChild(td_contract).appendChild(btn_contract); +} + +document.addEventListener('DOMContentLoaded', function () { + let no = document.getElementById('no-transactions'); + + // FIXME + no.className += ' hidden'; + add_transaction (new Date('2015-12-21 13:37'), 'EUR', 42, 'Completed', {}); + add_transaction (new Date('2015-12-22 10:01'), 'USD', 23, 'Pending', {}); +}); diff --git a/extension/popup/wallet.html b/extension/popup/wallet.html index f27387b1d..a6864896b 100644 --- a/extension/popup/wallet.html +++ b/extension/popup/wallet.html @@ -3,19 +3,47 @@ <html> <head> <meta charset="utf-8"> + <link rel="stylesheet" href="popup.css" type="text/css"> + <script src="wallet.js" type="text/javascript"></script> </head> -<body> - This is the Taler wallet. + <body> + <div id="header" class="nav"> + <a href="wallet.html" class="active">Wallet</a> + <a href="transactions.html">Transactions</a> + <a href="reserves.html">Reserves</a> + </div> - <p /> - - <a href='reserves.html'>Reserves</a> - <a href='transactions.html'>Transaction History</a> - - <p /> - - Your balance will be displayed here. -</body> + <div id="content"> + <table id="wallet-table" class="hidden"> + <thead> + <tr> + <th colspan="2">Amount</th> + <th>Show</th> + </tr> + </thead> + <tbody> + <!-- + <tr> + <td class="amount">42</td> + <td class="currency">EUR</td> + <td class="select"><input type="checkbox" /></td> + </tr> + <tr> + <td class="amount">23</td> + <td class="currency">USD</td> + <td class="select"><input type="checkbox" /></td> + </tr> + <tr> + <td class="amount">1337</td> + <td class="currency">KUD</td> + <td class="select"><input type="checkbox" /></td> + </tr> + --> + </tbody> + </table> + <p id="wallet-empty">The wallet is empty.</p> + </div> + </body> </html> diff --git a/extension/popup/wallet.js b/extension/popup/wallet.js new file mode 100644 index 000000000..cb7399dac --- /dev/null +++ b/extension/popup/wallet.js @@ -0,0 +1,85 @@ +'use strict'; + +var selected_currency = 'EUR'; // FIXME + +function select_currency (checkbox, currency, amount) +{ + selected_currency = currency; + + if (checkbox.checked) + { + let inputs = document.getElementsByTagName('input'); + for (let i = 0; i < inputs.length; i++) + { + let input = inputs[i]; + if (input != checkbox) + input.checked = false; + } + chrome.browserAction.setBadgeText({text: amount.toString()}) + chrome.browserAction.setTitle({title: 'Taler: ' + amount + ' ' + currency}); + } + else + { + chrome.browserAction.setBadgeText({text: ''}) + chrome.browserAction.setTitle({title: 'Taler'}); + } +} + + +function add_currency (currency, amount) +{ + let table = document.getElementById('wallet-table'); + table.className = table.className.replace(/\bhidden\b/, ''); + let tr = document.createElement('tr'); + tr.id = 'wallet-table-'+ currency; + table.appendChild(tr); + + let td_amount = document.createElement('td'); + td_amount.id = 'wallet-currency-'+ currency +'-amount'; + td_amount.className = 'amount'; + let text_amount = document.createTextNode(amount); + tr.appendChild(td_amount).appendChild(text_amount); + + let td_currency = document.createElement('td'); + td_currency.id = 'wallet-table-'+ currency +'-currency'; + td_currency.className = 'currency'; + let text_currency = document.createTextNode(currency); + tr.appendChild(td_currency).appendChild(text_currency); + + let td_select = document.createElement('td'); + td_select.id = 'wallet-table-'+ currency +'-select'; + td_select.className = 'select'; + let checkbox = document.createElement('input'); + checkbox.id = 'wallet-table-'+ currency +'-checkbox'; + checkbox.setAttribute('type', 'checkbox'); + if (currency == selected_currency) + checkbox.checked = true; + tr.appendChild(td_select).appendChild(checkbox); + + checkbox._amount = amount; + checkbox.addEventListener('click', function () { + select_currency(this, currency, this._amount); + }); +} + +function update_currency (currency, amount) +{ + let td_amount = document.getElementById('wallet-currency-'+ currency +'-amount'); + let text_amount = document.createTextNode(amount); + td_amount.removeChild(td_amount.firstChild); + td_amount.appendChild(text_amount); + + let checkbox = document.getElementById('wallet-table-'+ currency +'-checkbox'); + checkbox._amount = amount; +} + +document.addEventListener('DOMContentLoaded', function () { + let empty = document.getElementById('wallet-empty'); + + // FIXME + empty.className += ' hidden'; + add_currency('EUR', 42); + add_currency('USD', 17); + add_currency('KUD', 1337); + update_currency('USD', 23); +}); @@ -1,12 +0,0 @@ -#!/bin/bash - -# Pack up the extension as an xpi file. - -set +x - -# directory where our script resides -mydir="$(dirname "$(readlink -f "$0")")" - -cd "$mydir/extension" - -exec zip -r ../taler-wallet.xpi * |