1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
|
<!DOCTYPE html>
<html lang="en">
<head>
<title>Taler's "Toy" Shop</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script>
/*
@licstart The following is the entire license notice for the
JavaScript code in this page.
Copyright (C) 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 id="css-zen-garden">
<h1>Welcome to the Taler "Toy" Demonstrator</h1>
<div class="supporting" id="welcome" role="main">
<h2>Background</h2>
<div class="explanation" id="zen-explanation" role="article">
<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="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>
to download and install the extension. You will have to
click on "allow" and "install" dialogs shown by Firefox.
After that, the Taler logo should appear on the right side
of your navigation bar.
</p>
</div>
<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 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
hexadecimal reserve public key, which you should copy to the
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 instead of
into this form.
</p>
<form id="reserve-form" name="tform" action="fake_wire_transfer.php" method="POST">
<div class="participation" id="fake-wire">
<br>
Paste your reserve public key here (right-click, "paste"):
<input type="text" name="reserve_pk"></input>
<br>
Amount to credit to your reserve:
<select id="amount" name="kudos_amount">
<option value="1">1 KUDOS</option>
<option value="5">5 KUDOS</option>
<option value="10">10 KUDOS</option>
<option value="1000">1000 KUDOS</option>
</select>
<br>
<input type="submit" value="Submit"></input>
<br>
</div>
</form>
</div>
<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"
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 class="participation" id="fake-shop">
<br>
<input type="radio" name="group0" value="Taler" checked="true">Taler</input>
<br>
<input type="radio" name="group0" value="Tor">Tor</input>
<br>
<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="6">5 KUDOS (*)</option>
<option value="10">10 KUDOS</option>
</select>
<input type="submit" name="keyName" value="Donate!">
<br>
<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">
/* This function is called if/when a Wallet is installed.
It should enable the parts of the page that only make
sense after the Wallet has been loaded.
*/
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 */
document.body.addEventListener("taler-wallet-installed",
wallet_installed_cb,
false, false);
/* Setup callback to be called whenever the wallet is uninstalled */
document.body.addEventListener("taler-unload",
wallet_uninstalled_cb,
false);
</script>
</body>
</html>
|
