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) diff --git a/README b/README index 4bfb203d8..0f0ece7a0 100644 --- a/README +++ b/README @@ -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 @@ + + + + + + + + + + + +
+
+ SEPA info here. +
+
+ + + + + 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 @@ + + + + + + + + + + + +
+
+ + + + + + + + + + + + + +
+
+
+ + + + + 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 @@ - + -Back + + + + + -

+ +

-Your reserves are listed here. +
+
+ There are no reserves available. +
+
+ + + + + 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 @@ - + -Back + + + + + + -

+ +

-Your past transactions are listed here. +
+ + + + + + + + + + + + + + +

+ There are no transactions to show. +

+
+ + + 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 @@ + + - - This is the Taler wallet. + + -

- - Reserves - Transaction History - -

- - Your balance will be displayed here. - +

+ + + + + + + + + + + +

The wallet is empty.

+
+ 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); +}); diff --git a/pack b/pack deleted file mode 100755 index a8779b37c..000000000 --- a/pack +++ /dev/null @@ -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 *