summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorChristian Grothoff <christian@grothoff.org>2015-08-18 20:47:19 +0200
committerChristian Grothoff <christian@grothoff.org>2015-08-18 20:47:19 +0200
commit36603d8c745d06a03ef339909d069766cf5a285b (patch)
treeebbe24b4816f06d88b9842a0d89b7829d9d7f8eb
parent088462e69eef74585a74e0517900b78b56f0b09b (diff)
downloadmerchant-36603d8c745d06a03ef339909d069766cf5a285b.tar.gz
merchant-36603d8c745d06a03ef339909d069766cf5a285b.tar.bz2
merchant-36603d8c745d06a03ef339909d069766cf5a285b.zip
towards fixing the work flow in the demo
Diffstat
-rw-r--r--src/frontend/checkout.php32
-rw-r--r--src/frontend/fake_wire_transfer.php78
-rw-r--r--src/frontend/index.html123
3 files changed, 166 insertions, 67 deletions
diff --git a/src/frontend/checkout.php b/src/frontend/checkout.php
index 8d62ca9d..44049987 100644
--- a/src/frontend/checkout.php
+++ b/src/frontend/checkout.php
@@ -100,21 +100,27 @@ function ok(form){
-/* the following event gets fired whenever a customer has a taler
-wallet installed in his browser. In that case, the webmaster can decide
-whether or not displaying Taler as a payment option */
+/* the following event gets fired whenever a customer has a Taler
+ wallet installed in his browser. In that case, the webmaster can decide
+ whether or not displaying Taler as a payment option */
-function hasWallet(aEvent){
+function has_taler_wallet_cb(aEvent){
// event awaited by the wallet to change its button's color
var eve = new Event('taler-currency');
document.body.dispatchEvent(eve);
- // ungrey the Taler payment option from the form
+ // enable the Taler payment option from the form
var tbutton = document.getElementById("t-button-id");
tbutton.removeAttribute("disabled");
};
+// The Taler extension was unloaded, disable the option
+function taler_wallet_unload_cb(aEvent){
+ var tbutton = document.getElementById("t-button-id");
+ tbutton.addAttribute("disabled");
+};
+
function sendContract(jsonContract){
@@ -122,17 +128,13 @@ function sendContract(jsonContract){
document.body.dispatchEvent(cevent);
};
-function closeEnd(aEvent){
-
- var eve = new Event("taler-unload");
- document.body.dispatchEvent(eve);
-
-};
-
+/* FIXME: these triggers do not work when I enable/disable
+ the extension... */
// to be triggered by the wallet
-document.body.addEventListener("taler-wallet", hasWallet, false);
-// to be triggered by the wallet
-document.body.addEventListener("taler-unload", closeEnd, false);
+document.body.addEventListener("taler-wallet", has_taler_wallet_cb, false);
+
+// to be triggered by the wallet when it is unloaded
+document.body.addEventListener("taler-unload", taler_wallet_unload_cb, false);
</script>
diff --git a/src/frontend/fake_wire_transfer.php b/src/frontend/fake_wire_transfer.php
new file mode 100644
index 00000000..8618c7e2
--- /dev/null
+++ b/src/frontend/fake_wire_transfer.php
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Fake Wire Transfer</title>
+ <script>
+ /*
+ @licstart The following is the entire license notice for the
+ JavaScript code in this page.
+
+ Copyright (C) 2014,2015 GNUnet e.V.
+
+ The JavaScript code in this page is free software: you can
+ redistribute it and/or modify it under the terms of the GNU
+ General Public License (GNU GPL) as published by the Free Software
+ Foundation, either version 3 of the License, or (at your option)
+ any later version. The code is distributed WITHOUT ANY WARRANTY;
+ without even the implied warranty of MERCHANTABILITY or FITNESS
+ FOR A PARTICULAR PURPOSE. See the GNU GPL for more details.
+
+ As additional permission under GNU GPL version 3 section 7, you
+ may distribute non-source (e.g., minimized or compacted) forms of
+ that code without the copy of the GNU GPL normally required by
+ section 4, provided you include this license notice and a URL
+ through which recipients can access the Corresponding Source.
+
+ @licend The above is the entire license notice
+ for the JavaScript code in this page.
+ */
+ </script>
+</head>
+<body>
+<!--
+ This page's main aim is to forward the fake wire transfer
+ request to the demonstrator and to inform the customer
+ about the result. In a real-world deployment, this
+ page would not be required as the customer would do a
+ wire transfer with his bank instead.
+ -->
+<?php
+
+// Evaluate form
+$reserve_pk = $_POST['reserve_pk];
+$kudos_amount = $_POST['kudos_amount];
+
+// pack the JSON
+$json = json_encode (array ('reserve_pub' => $reserve_pk,
+ 'execution_date' => "/" . time() . "/",
+ 'wire' => array ('type' => 'test'),
+ 'amount' => array ('value' => $kudos_amount,
+ 'fraction' => 0,
+ 'currency' => 'KUDOS')));
+
+// craft the HTTP request
+$req = new http\Client\Request ("POST",
+ "http://demo.taler.net/admin/add/incoming",
+ array ("Content-Type" => "application/json"));
+$req->getBody()->append ($json);
+
+// execute HTTP request
+$client = new http\Client;
+$client->enqueue($req)->send ();
+$resp = $client->getResponse ();
+
+// evaluate response
+$status_code = $resp->getResponseCode ();
+http_response_code ($status_code);
+
+if ($status_code != 200)
+{
+ echo "Error $status_code when faking the wire transfer. Please report to taler@gnu.org";
+}
+else
+{
+ echo "Pretend wire transfer successful. Go <a href="/">back</a> and enjoy shopping!";
+}
+?>
+</body>
+</html>
diff --git a/src/frontend/index.html b/src/frontend/index.html
index 7b5b16d1..11b6e1d8 100644
--- a/src/frontend/index.html
+++ b/src/frontend/index.html
@@ -30,22 +30,23 @@
</script>
</head>
<body id="css-zen-garden">
- <div id='root' class="page-wrapper">
+ <div class="supporting" id="welcome" role="main">
<h2>Welcome to the Taler "Toy" Demonstrator</h2>
<div class="explanation" id="zen-explanation" role="article">
- This "toy" website provides you with the ability to
- experience using the Taler payment system without using
- valuable currency. Here, we guide you through the steps
- of installing a Taler wallet, withdrawing Taler coins and
- spending them at a merchant. For this demonstrator, we
- will be using a "toy" currency, KUDOS. However, please note that
- Taler is designed to work with ordinary currencies, such
- as Dollars or Euros, not just toy currencies.
+ <p>This "toy" website provides you with the ability to
+ experience using the Taler payment system without using
+ valuable currency. Here, we guide you through the steps
+ of installing a Taler wallet, withdrawing Taler coins and
+ spending them at a merchant. For this demonstrator, we
+ will be using a "toy" currency, KUDOS. However, please note that
+ Taler is designed to work with ordinary currencies, such
+ as Dollars or Euros, not just toy currencies.
+ </p>
</div>
</div>
- <div class="supporting" id="zen-supporting" role="main">
- <h2>Installing the Taler wallet</h2>
- <div class="explanation" id="zen-explanation" role="article">
+ <div class="supporting" id="instructions" role="main">
+ <div class="explanation" id="installation" role="article">
+ <h2>Step 1: Installing the Taler wallet</h2>
<p>First, you need to install the Taler wallet browser extension.
It is currently only available for Firefox. If you run
Firefox, simply click <a href="/extension">here</a>
@@ -55,12 +56,18 @@
of your navigation bar.
</p>
</div>
- <h2>Performing a wire transfer</h2>
- <div class="explanation" id="zen-explanation" role="article">
+ <div class="explanation" id="installation-done" role="article" style="display:none;">
+ <h2>Step 1: Installing the Taler wallet</h2>
+ <p>Congratulations, you have installed the wallet correctly.
+ You can now proceed with the next steps.
+ </p>
+ </div>
+ <div class="explanation" id="wire" role="article" style="display:none;">
+ <h2>Step 2: Performing a wire transfer</h2>
<p>The next step is to transfer currency to the mint to
obtain Taler coins. This is typically done using a
wire transfer. However, as this is just a demonstrator,
- we will allow you to send us "toy" coins using a simple
+ we will allow you to send the mint KUDOS coins using a simple
form on this website instead.</p>
<p>You begin by clicking on the Taler icon and selecting
"Create reserve". The extension will then display some
@@ -68,17 +75,18 @@
clipboard. After that, you can paste it into the form
below. When dealing with real currency, you would do
the same, except that you would have to copy the string
- into the subject area for your wire transfer.
+ into the subject area for your wire transfer instead of
+ into this form.
</p>
- <form id="reserve-form" name="tform" action="never_used" onsubmit="return MERCHtrigSubmission()" method="POST">
+ <form id="reserve-form" name="tform" action="fake_wire_transfer.php" method="POST">
<br>
Paste your reserve public key here (right-click, "paste"):
<br>
- <input type="text" name="pbk"></input>
+ <input type="text" name="reserve_pk"></input>
<br>
- Amount (FIXME: amount should ideally also be told to the wallet, but not during the form submission!):
+ Amount to credit to your reserve:
<br>
- <select id="taler-amount" name="kudos-amount">
+ <select id="amount" name="kudos_amount">
<option value="1">1 KUDOS</option>
<option value="5">5 KUDOS</option>
<option value="10">10 KUDOS</option>
@@ -89,25 +97,25 @@
<br>
</form>
</div>
- <h2>Finally: Pay for something!</h2>
- <div class="explanation" id="zen-explanation" role="article">
+ <div class="explanation" id="payment" role="article" style="display:none;">
+ <h2>Step 3: Select project to donate KUDOS to!</h2>
<p>Now it is time to spend your hard earned KUDOS.
- For your convenience, we integrated a tiny shop
+ For your convenience, we integrated a tiny "shop"
accepting KUDOS right here into this page.</p>
<p>Please choose a project and the amount of KUDOS you
wish to donate.</p>
<form name="tform" action="checkout.php" method="POST">
<div id="opt-form" align="left">
<br>
- <input type="radio" name="group0" value="Taler">Taler</input>
+ <input type="radio" name="group0" value="Taler" checked="true">Taler</input>
<br>
- <input type="radio" name="group0" value="GNUnet" checked="true">GNUnet</input>
+ <input type="radio" name="group0" value="Tor">Tor</input>
<br>
- <input type="radio" name="group0" value="INRIA">INRIA</input>
+ <input type="radio" name="group0" value="GNUnet">GNUnet</input>
<br>
<select id="taler-donation" name="kudos-donation">
<option value="1">1 KUDOS</option>
- <option value="666">5 KUDOS (select this option to spot the merchant giving you the wrong contract)</option>
+ <option value="6">5 KUDOS (*)</option>
<option value="10">10 KUDOS</option>
</select>
<input type="submit" name="keyName" value="Donate!">
@@ -115,6 +123,13 @@
<br>
</div>
</form>
+ <p>(*) To make it a bit more fun, the 5 KUDOS option
+ is deliberately implemented with a fault: the merchant will try to
+ make you donate 6 KUDOS instead of the 5 KUDOS you got to see. But do
+ not worry, you will be given the opportunity to review the
+ final offer from the merchant in a window secured
+ by the Taler extension. That way, you can spot the
+ error before committing to an incorrect contract.</p>
</div>
</div>
<script type="text/javascript">
@@ -122,37 +137,41 @@
It should enable the parts of the page that only make
sense after the Wallet has been loaded.
*/
-
- function MERCHfirstStep(){
- // FIXME: old logic was too complicated, change visibility instead!
+ function wallet_installed_cb(){
+ b = document.getElementById("installation");
+ b.style.display = 'none';
+ b = document.getElementById("installation-done");
+ b.style.display = '';
+ b = document.getElementById("wire");
+ b.style.display = '';
+ b = document.getElementById("payment");
+ b.style.display = '';
};
+ function wallet_uninstalled_cb(){
+ b = document.getElementById("installation");
+ b.style.display = '';
+ b = document.getElementById("installation-done");
+ b.style.display = 'none';
+ b = document.getElementById("wire");
+ b.style.display = 'none';
+ b = document.getElementById("payment");
+ b.style.display = 'none';
+ };
+
+
+ /* FIXME: these triggers do not work when I enable/disable
+ the extension... */
/* Set up a listener to be called whenever a Wallet gets installed
- so that the user is led towards the demo's steps progressively
- */
+ so that the user is led towards the demo's steps progressively */
document.body.addEventListener("taler-wallet-installed",
- MERCHfirstStep,
+ wallet_installed_cb,
false, false);
- /* Notify the extension about the submission. That way it will be
- possible to retrieve the mint's URL and/or other info. from the
- filled form. Actually, the extension will accomplish the POST
- too.
- FIXME: This is bad, as we cannot do this later when
- users submit real forms at the bank. Why is this
- required?
- */
- function MERCHtrigSubmission(){
- // set 'action' attribute to mint's url
- // var mint = document.getElementById("mint-url");
- // var form = document.getElementById("reserve-form");
- // form.setAttribute("action", "http://demo.taler.net/admin/incoming/add");
-
- var subEvent = new Event("submit-reserve");
- document.body.dispatchEvent(subEvent);
- // always return false so that the post is actually done by the extension
- return false;
- }
+ /* Setup callback to be called whenever the wallet is uninstalled */
+ document.body.addEventListener("taler-unload",
+ wallet_uninstalled_cb,
+ false);
</script>
</body>
</html>
generated by cgit v1.2.3 (git 2.39.1) at 2024-05-01 06:48:38 +0000