taler/wallet-core
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Activity

webext popup

Browse Source
This commit is contained in:
tg(x) 2015-12-03 20:07:03 +01:00
parent 7b6706bee3
commit 5243a70726
14 changed files with 397 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
Makefile Executable file
View File

@ -0,0 +1,6 @@
name=taler-wallet
version=0.1
xpi=${name}-${version}.xpi
xpi:
cd extension && zip ../${xpi} $$(git ls-files)

3
README
View File

@ -4,5 +4,4 @@ See https://developer.mozilla.org/en-US/Add-ons/WebExtensions
Installation Installation
============ ============
Run ./pack to create the taler-wallet.xpi file. Run make to create the taler-wallet.xpi file.

6
extension/background/wallet.js
View File

@ -1,2 +1,8 @@
// Nothing here yet. // Nothing here yet.
// Eventually, the backend for the wallet will be implemented here. // 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"})

14
extension/content_scripts/notify.js
View File

@ -1,6 +1,7 @@
// Script that is injected into pages in order to allow merchants pages to // Script that is injected into pages in order to allow merchants pages to
// query the availability of Taler. // query the availability of Taler.
'use strict';
// Listen to messages from the backend. // Listen to messages from the backend.
chrome.runtime.onMessage.addListener( chrome.runtime.onMessage.addListener(
@ -8,11 +9,12 @@ chrome.runtime.onMessage.addListener(
// do nothing, yet // do nothing, yet
}); });
if (document && document.body)
document.addEventListener('taler-checkout-probe', function(e) { {
let evt = new Event('taler-wallet-present'); document.body.addEventListener('taler-checkout-probe', function(e) {
document.dispatchEvent(evt); let evt = new Event('taler-wallet-present');
}); document.body.dispatchEvent(evt);
});
}
console.log("Taler wallet: content page loaded"); console.log("Taler wallet: content page loaded");

6
extension/manifest.json
View File

@ -2,7 +2,7 @@
"description": "Privacy preserving and transparent payments", "description": "Privacy preserving and transparent payments",
"manifest_version": 2, "manifest_version": 2,
"name": "Taler Wallet", "name": "Taler Wallet",
"version": "1.0", "version": "0.1",
"applications": { "applications": {
"gecko": { "gecko": {
@ -13,14 +13,14 @@
"permissions": [ "permissions": [
"http://*/*", "http://*/*",
"https://*/*" "https://*/*"
], ],
"browser_action": { "browser_action": {
"default_icon": "icons/taler-logo-24.png", "default_icon": "icons/taler-logo-24.png",
"default_title": "Taler", "default_title": "Taler",
"default_popup": "popup/wallet.html" "default_popup": "popup/wallet.html"
}, },
"web_accessible_resources": [ "web_accessible_resources": [
"popup/reserves.html", "popup/reserves.html",
"popup/wallet.html" "popup/wallet.html"

51
extension/popup/popup.css Normal file
View File

@ -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%;
}

28
extension/popup/reserve-create-sepa.html Normal file
View File

@ -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>

41
extension/popup/reserve-create.html Normal file
View File

@ -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>

29
extension/popup/reserves.html
View File

@ -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>

52
extension/popup/transactions.html
View File

@ -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>

56
extension/popup/transactions.js Normal file
View File

@ -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', {});
});

50
extension/popup/wallet.html
View File

@ -3,19 +3,47 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="stylesheet" href="popup.css" type="text/css">
<script src="wallet.js" type="text/javascript"></script>
</head> </head>
<body> <body>
This is the Taler wallet. <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 /> <div id="content">
<table id="wallet-table" class="hidden">
<a href='reserves.html'>Reserves</a> <thead>
<a href='transactions.html'>Transaction History</a> <tr>
<th colspan="2">Amount</th>
<p /> <th>Show</th>
</tr>
Your balance will be displayed here. </thead>
</body> <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> </html>

85
extension/popup/wallet.js Normal file
View File

@ -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);
});

12
pack
View File

@ -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 *