diff options
Diffstat (limited to 'extension')
l--------- | extension/img/icon.png | 1 | ||||
-rw-r--r-- | extension/img/logo-2015-medium.png | bin | 0 -> 75094 bytes | |||
l--------- | extension/img/logo.png | 1 | ||||
-rw-r--r-- | extension/img/taler-logo-24.png (renamed from extension/icons/taler-logo-24.png) | bin | 1452 -> 1452 bytes | |||
-rw-r--r-- | extension/manifest.json | 4 | ||||
-rw-r--r-- | extension/pages/confirm-contract.html | 28 | ||||
-rw-r--r-- | extension/pages/confirm-create-reserve.html | 43 | ||||
-rw-r--r-- | extension/pages/confirm-create-reserve.js | 75 | ||||
-rw-r--r-- | extension/pages/reserve-success.html | 24 | ||||
-rw-r--r-- | extension/popup/balance-overview.html | 2 | ||||
-rw-r--r-- | extension/popup/reserve-create-sepa.html | 2 | ||||
-rw-r--r-- | extension/popup/reserve-create.html | 2 | ||||
-rw-r--r-- | extension/style/wallet.css | 74 |
13 files changed, 194 insertions, 62 deletions
diff --git a/extension/img/icon.png b/extension/img/icon.png new file mode 120000 index 000000000..145d1707f --- /dev/null +++ b/extension/img/icon.png @@ -0,0 +1 @@ +taler-logo-24.png
\ No newline at end of file diff --git a/extension/img/logo-2015-medium.png b/extension/img/logo-2015-medium.png Binary files differnew file mode 100644 index 000000000..78159bb21 --- /dev/null +++ b/extension/img/logo-2015-medium.png diff --git a/extension/img/logo.png b/extension/img/logo.png new file mode 120000 index 000000000..1ddb87d2c --- /dev/null +++ b/extension/img/logo.png @@ -0,0 +1 @@ +logo-2015-medium.png
\ No newline at end of file diff --git a/extension/icons/taler-logo-24.png b/extension/img/taler-logo-24.png Binary files differindex 00a908e79..00a908e79 100644 --- a/extension/icons/taler-logo-24.png +++ b/extension/img/taler-logo-24.png diff --git a/extension/manifest.json b/extension/manifest.json index c61dac6ab..9394e0833 100644 --- a/extension/manifest.json +++ b/extension/manifest.json @@ -1,8 +1,8 @@ { "description": "Privacy preserving and transparent payments", "manifest_version": 2, - "name": "GNU Taler Wallet", - "version": "0.2", + "name": "Taler Wallet", + "version": "0.1", "applications": { "gecko": { diff --git a/extension/pages/confirm-contract.html b/extension/pages/confirm-contract.html index 9959bb489..6b09ffeb1 100644 --- a/extension/pages/confirm-contract.html +++ b/extension/pages/confirm-contract.html @@ -7,7 +7,8 @@ <script src="../lib/handlebars-v4.0.5.js"></script> <script src="../lib/commonHelpers.js"></script> <script src="confirm-contract.js"></script> - <link rel="stylesheet" type="text/css" href="../style/wallet.css"> + <link rel="stylesheet" type="text/css" href="../style/page.css"> + <link rel="stylesheet" type="text/css" href="../style/wallet.css"> <script id="contract-template" type="text/x-handlebars-template"> Hello, this is the wallet. The merchant "{{merchant.name}}" @@ -29,17 +30,28 @@ <script id="error-template" type="text/x-handlebars-template"> Payment was not successful: {{error}} </script> - - </head> + <body> - <h1>Confirm Payment</h1> + <header> + <div id="logo"></div> + <h1>Payment Confirmation</h1> + </header> + + <aside class="sidebar" id="left"> + </aside> + + <section id="main"> + + <article id="contract"> + <div id="render-contract"></div> + + <button id="confirm-pay">Confirm Payment</button> + </article> - <div id="render-contract"></div> + <article id="status"></article> - <button id="confirm-pay">Confirm Pay!</button> + </section> - <div id="status"></div> - </body> </html> diff --git a/extension/pages/confirm-create-reserve.html b/extension/pages/confirm-create-reserve.html index be718da7d..5464f637c 100644 --- a/extension/pages/confirm-create-reserve.html +++ b/extension/pages/confirm-create-reserve.html @@ -6,19 +6,38 @@ <script src="../lib/URI.js"></script> <script src="../lib/polyfill-react.js"></script> <script src="confirm-create-reserve.js"></script> - <link rel="stylesheet" type="text/css" href="../style/wallet.css"> + <link rel="stylesheet" type="text/css" href="../style/wallet.css"> </head> + <body> - <h1>Confirm Reserve Creation</h1> - Hello, this is the wallet. A bank wants to create a reserve for <span id=show-amount>(loading...)</span>. - Please specify the base URL of the mint you want to use. - <p /> - <div class='formish'> - <div class='form-row'> - <label for='mint-url'>Mint URL</label> - <input class='url' id='mint-url' type="text" value="http://mint.demo.taler.net/"></input> - </div> - <button id='confirm'>Confirm Reserve</button> - </div> + + <header> + <div id="logo"></div> + <h1>Confirm Reserve Creation</h1> + </header> + + <aside class="sidebar" id="left"> + </aside> + + <section id="main"> + + <article> + <p> + A bank wants to create a reserve for <span id="show-amount">(loading...)</span>. + </p> + <p> + Please specify the base URL of the mint you want to use. + </p> + + <div class="formish"> + <div class="form-row"> + <label for="mint-url">Mint URL</label> + <input class="url" id="mint-url" type="text" value="http://mint.demo.taler.net/"></input> + </div> + <button id="confirm">Confirm Reserve</button> + </div> + </article> + + </section> </body> </html> diff --git a/extension/pages/confirm-create-reserve.js b/extension/pages/confirm-create-reserve.js index 7c3a5a572..5c35121e3 100644 --- a/extension/pages/confirm-create-reserve.js +++ b/extension/pages/confirm-create-reserve.js @@ -1,36 +1,43 @@ "use strict"; -var ConfirmCreateReserve; -(function (ConfirmCreateReserve) { - let url = URI(document.location.href); - let query = URI.parseQuery(url.query()); - function updateAmount() { - let showAmount = document.getElementById("show-amount"); - console.log("Query is " + JSON.stringify(query)); - let s = query.amount_str; - if (!s) { - document.body.innerHTML = "Oops, something went wrong."; - return; - } - showAmount.textContent = s; - } - function clone(obj) { - // This is faster than it looks ... - return JSON.parse(JSON.stringify(obj)); - } - document.addEventListener("DOMContentLoaded", (e) => { - updateAmount(); - document.getElementById("confirm").addEventListener("click", (e) => { - let d = clone(query); - d.mint = document.getElementById('mint-url').value; - chrome.runtime.sendMessage({ type: 'confirm-reserve', detail: d }, (resp) => { - if (resp.success === true) { - document.location.href = resp.backlink; - } - else { - document.body.innerHTML = - React.createElement("div", null, "Oops, something went wrong." + ' ' + "The bank responded with HTTP status code $", resp.status, "." + ' ' + "Here is some more info:", React.createElement("pre", null, resp.text), "`"); - } - }); - }); + +let url = URI(document.location.href); +let query = URI.parseQuery(url.query()); + +function updateAmount() { + let showAmount = document.getElementById("show-amount"); + console.log("Query is " + JSON.stringify(query)); + let s = query.amount_str; + if (!s) { + document.body.innerHTML = "Oops, something went wrong."; + return; + } + showAmount.textContent = s; +} + +function clone(obj) { + // This is faster than it looks ... + return JSON.parse(JSON.stringify(obj)); +} + +document.addEventListener("DOMContentLoaded", (e) => { + updateAmount(); + + document.getElementById("confirm").addEventListener("click", (e) => { + let d = clone(query); + d.mint = document.getElementById('mint-url').value; + chrome.runtime.sendMessage({type:'confirm-reserve', detail: d}, (resp) => { + if (resp.success === true) { + document.location.href = resp.backlink; + } else { + document.body.innerHTML = + `Oops, something went wrong. + The bank responded with HTTP status code ${resp.status}. + Here is some more info: + <pre>${resp.text}</pre>`; + } }); -})(ConfirmCreateReserve || (ConfirmCreateReserve = {})); + + }); +}); + + diff --git a/extension/pages/reserve-success.html b/extension/pages/reserve-success.html index 81de9cb41..05871ca1f 100644 --- a/extension/pages/reserve-success.html +++ b/extension/pages/reserve-success.html @@ -3,10 +3,28 @@ <html> <head> <title>Taler Wallet: Reserve Created</title> - <link rel="stylesheet" type="text/css" href="../style/wallet.css"> + <link rel="stylesheet" type="text/css" href="../style/wallet.css"> </head> <body> - <h1>Success!</h1> - The reserve was created successfully. + + <header> + <div id="logo"></div> + <h1>Reserve Creation</h1> + </header> + + <aside class="sidebar" id="left"> + </aside> + + <section id="main"> + + <article> + <h1>Success!</h1> + + <p>The reserve was created successfully.</p> + </article> + + </section> + </body> + </body> </html> diff --git a/extension/popup/balance-overview.html b/extension/popup/balance-overview.html index bb9726ab2..1bc80d97e 100644 --- a/extension/popup/balance-overview.html +++ b/extension/popup/balance-overview.html @@ -21,7 +21,7 @@ </head> <body> <div id="header" class="nav"> - <a href="wallet.html" class="active">Wallet</a> + <a href="balance-overview.html" class="active">Wallet</a> <a href="transactions.html">Transactions</a> <a href="reserves.html">Reserves</a> <button id="debug">Debug!</button> diff --git a/extension/popup/reserve-create-sepa.html b/extension/popup/reserve-create-sepa.html index 7f851970b..d360f05ed 100644 --- a/extension/popup/reserve-create-sepa.html +++ b/extension/popup/reserve-create-sepa.html @@ -8,7 +8,7 @@ <body> <div id="header" class="nav"> - <a href="wallet.html">Wallet</a> + <a href="balance-overview.html">Wallet</a> <a href="transactions.html">Transactions</a> <a href="reserves.html" class="active">Reserves</a> </div> diff --git a/extension/popup/reserve-create.html b/extension/popup/reserve-create.html index 0cfbe22a4..423e519c1 100644 --- a/extension/popup/reserve-create.html +++ b/extension/popup/reserve-create.html @@ -8,7 +8,7 @@ <body> <div id="header" class="nav"> - <a href="wallet.html">Wallet</a> + <a href="balance-overview.html">Wallet</a> <a href="transactions.html">Transactions</a> <a href="reserves.html" class="active">Reserves</a> </div> diff --git a/extension/style/wallet.css b/extension/style/wallet.css index 487cdd407..01b9cd96f 100644 --- a/extension/style/wallet.css +++ b/extension/style/wallet.css @@ -1,3 +1,72 @@ +body { + background-color: white; + margin: 0; + padding: 0; + font-family: Verdana, sans; +} + +header { + width: 100%; + height: 100px; + margin: 0; + padding: 0; + border-bottom: 1px solid black; +} + +header h1 { + font-size: 200%; + margin: 0; + padding: 0 0 0 120px; + position: relative; + top: 50%; + transform: translateY(-50%); +} + +header #logo { + float: left; + width: 100px; + height: 100px; + padding: 0; + margin: 0; + text-align: center; + border-right: 1px solid black; + background-image: url(../img/logo.png); + background-size: 100px; +} + +aside { + width: 100px; + float: left; +} + +section#main { + margin: 0 0 0 100px; + padding: 20px; + border-left: 1px solid black; + height: 100%; + max-width: 40em; +} + +section#main h1:first-child { + margin-top: 0; +} + +h1 { + font-size: 160%; +} + +h2 { + font-size: 140%; +} + +h3 { + font-size: 120%; +} + +h4, h5, h6 { + font-size: 100%; +} + .form-row { padding-top: 5px; padding-bottom: 5px; @@ -27,3 +96,8 @@ input.url { .json-string { color: olive; } + +button { + font-size: 120%; + padding: 0.5em; +} |