revamping the toy site: more explanations, closer to desired flow

author: Christian Grothoff <christian@grothoff.org> 2015-08-18 18:30:38 +0200
committer: Christian Grothoff <christian@grothoff.org> 2015-08-18 18:30:38 +0200
commit: d09f4dd972c9ef6dce68fca786f9dce964d689d5 (patch)
tree: 80feb740de19c7e7022f6e54b4de4f3b4d422507
parent: 5223abda2bcab0b33a67ff7817034954ec072095 (diff)
download: merchant-d09f4dd972c9ef6dce68fca786f9dce964d689d5.tar.gz
merchant-d09f4dd972c9ef6dce68fca786f9dce964d689d5.tar.bz2
merchant-d09f4dd972c9ef6dce68fca786f9dce964d689d5.zip
7 files changed, 181 insertions, 218 deletions
diff --git a/src/frontend/cert.php b/src/frontend/cert.php
index 501fe31b..5572281c 100644
--- a/src/frontend/cert.php
+++ b/src/frontend/cert.php
@@ -1,7 +1,6 @@
+<!DOCTYPE html>
 <?php 
-
 /*
-
   This file is part of TALER
   Copyright (C) 2014, 2015 Christian Grothoff (and other contributing authors)
 
@@ -15,7 +14,6 @@
 
   You should have received a copy of the GNU General Public License along with
   TALER; see the file COPYING.  If not, If not, see <http://www.gnu.org/licenses/>
-
 */
 
 /*  
@@ -23,11 +21,8 @@
   Here goes all the Taler paying logic. The steps are
 
   1. recover the session
-
   2. generate the JSON to forward to the backend
-
   3. route back to the wallet the certificate just gotten
-
 */
 
 
@@ -37,7 +32,6 @@ if(!isset($_SESSION['maydonate'])){
   http_response_code(404);
   echo "Please try to donate before getting to this page :)";
 }
-
 else{
   // fake product id
   $p_id = rand(0,1001);
@@ -83,7 +77,6 @@ else{
   else{
     echo $resp->body->toString ();
   }
-
 }
 
 
diff --git a/src/frontend/checkout.php b/src/frontend/checkout.php
index 51c3023a..8d62ca9d 100644
--- a/src/frontend/checkout.php
+++ b/src/frontend/checkout.php
@@ -1,38 +1,42 @@
+<!DOCTYPE html>
 <html>
 <head>
 <title>Choose payment method</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 file is part of TALER
-  Copyright (C) 2014, 2015 Christian Grothoff (and other contributing authors)
-
-  TALER is free software; you can redistribute it and/or modify it under the
-  terms of the GNU General Public License as published by the Free Software
-  Foundation; either version 3, or (at your option) any later version.
-
-  TALER is distributed in the hope that it will be useful, but WITHOUT ANY
-  WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
-  A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
-
-  You should have received a copy of the GNU General Public License along with
-  TALER; see the file COPYING.  If not, If not, see <http://www.gnu.org/licenses/>
-
--->
-
-<!-- This page's main aim is to show to the customer all the accepted payments methods
-  and actually implementing just Taler; technically the steps are:
+<!-- 
+  This page's main aim is to show to the customer all the accepted
+  payments methods and actually implementing just Taler; technically
+  the steps are:
   
-
-
   1. retrieve the name of who will receive this donation
-
   2. show a menu with all the required payments means
-
   3. create a session
-
   4. (JavaScript) implement the "checkout" button for the sole Taler way.
   Actually, this button's duty is to notice this web portal that the customer
   wants to see a certificate, and optionally to pay.
@@ -46,10 +50,6 @@ $got_donation = $_POST['group0'];
 // create session
 session_start();
 $_SESSION['maydonate'] = true;
-
-
-
-
 ?>
 
 <form name="tform" action="" method="POST">
diff --git a/src/frontend/create-reserve-form.html b/src/frontend/create-reserve-form.html
deleted file mode 100644
index 229ae349..00000000
--- a/src/frontend/create-reserve-form.html
+++ /dev/null
@@ -1,19 +0,0 @@
-<form id="reserve-form" name="tform" action="never_used" onsubmit="return MERCHtrigSubmission()" method="POST">
- Which mint? Indicate mint's URL below :<br><input id="mint-url" type="text" name="pbk" value="demo.taler.net"></input><br>
- Your Public Key Here :<br><input type="text" name="pbk"></input><br>
- Amount :<br> 
-   <select id="taler-amount" name="kudos-amount">
-     <option value="1000">1000</option>
-     <option value="1">1</option>
-     <option value="5">5</option>
-     <option value="10">10</option>
-   </select><br><br>
- Currency :<br> 
-   <select id="taler-amount-currency" name="kudos-currency">
-     <option value="EUR">Euro</option>
-     <option value="JPY">Yen</option>
-     <option value="LRD">Liberian Dollar</option>
-   </select><br><br>
-
-<input type="submit" value="Submit"></input><br>
-</form>
diff --git a/src/frontend/index.html b/src/frontend/index.html
index e249635a..f937d7ee 100644
--- a/src/frontend/index.html
+++ b/src/frontend/index.html
@@ -1,40 +1,160 @@
+<!DOCTYPE html>
 <html lang="en">
 <head>
-	<title>Taler's "Toy" Shop</title>
+  <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.
 
-	<link rel="stylesheet" type="text/css" href="style.css">
+        Copyright (C) 2015 GNUnet e.V.
 
-</head>
+        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">
-<div id='root' class="page-wrapper">
-
-	<section class="intro" id="zen-intro">
-		<header>
-			<h1></h1>
-			<h2></h2>
-		</header>
-
-		<div class="preamble" id="zen-preamble" role="article">
-			<h3>"Toy" Merchant as a demo for Taler</h3>
-			<p>We provide a guided utilization of latest Taler's Wallet.</p>
-		</div>
-	</section>
-
-	<div class="supporting" id="zen-supporting" role="main">
-		<div class="explanation" id="zen-explanation" role="article">
-			<p>The latest version of the Wallet is available at the following link:
-                        <a href="http://toy.taler.net/extension">http://toy.taler.net/extension</a>
-                        </p>
-			<p>In case you already have a wallet installed, and some coins in it, please
-			move in the <a href="shopping.html">shopping area</a>
-			</p>
-		</div>
+  <div id='root' class="page-wrapper">
+    <section class="intro" id="zen-intro">
+      <h1>Welcome to the Taler "Toy" Demonstrator</h1>
+      <div class="preamble" id="zen-preamble" 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.
+      </div>
+    </section>
+  </div>
+  <div class="supporting" id="zen-supporting" role="main">
+    <h2>Installing the Taler wallet</h2>
+    <div class="explanation" id="zen-explanation" role="article">
+      <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>
+    <h2>Performing a wire transfer</h2>
+    <div class="explanation" id="zen-explanation" role="article">
+      <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
+         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.
+      </p>
+      <form id="reserve-form" name="tform" action="never_used" onsubmit="return MERCHtrigSubmission()" method="POST">
+        <br>
+        Paste your reserve public key here (right-click, "paste"):
+        <br>
+        <input type="text" name="pbk"></input>
+        <br>
+        Amount (FIXME: amount should ideally also be told to the wallet, but not during the form submission!):
+        <br> 
+        <select id="taler-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>
+      </form>
+    </div>
+    <h2>Finally: Pay for something!</h2>
+    <div class="explanation" id="zen-explanation" role="article">
+      <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 id="opt-form" align="left">
+          <br>
+          <input type="radio" name="group0" value="Taler">Taler</input>
+          <br>
+          <input type="radio" name="group0" value="GNUnet" checked="true">GNUnet</input>
+          <br>
+          <input type="radio" name="group0" value="INRIA">INRIA</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="10">10 KUDOS</option>
+          </select>
+          <input type="submit" name="keyName" value="Donate!">
+          <br>
+          <br>
         </div>
-</div>
+      </form>
+    </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 MERCHfirstStep(){
+       // FIXME: old logic was too complicated, change visibility instead!
+    };
+
+    /* 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", 
+                                   MERCHfirstStep, 
+                                   false, false);
 
-	<script type="text/javascript" src="merchant.js">
-	</script>
+    /* 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;
+    }  
+  </script>
 </body>
 </html>
diff --git a/src/frontend/merchant.js b/src/frontend/merchant.js
deleted file mode 100644
index a65b5008..00000000
--- a/src/frontend/merchant.js
+++ /dev/null
@@ -1,81 +0,0 @@
-/*
-
-  This file is part of TALER
-  Copyright (C) 2014, 2015 Christian Grothoff (and other contributing authors)
-
-  TALER is free software; you can redistribute it and/or modify it under the
-  terms of the GNU General Public License as published by the Free Software
-  Foundation; either version 3, or (at your option) any later version.
-
-  TALER is distributed in the hope that it will be useful, but WITHOUT ANY
-  WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
-  A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
-
-  You should have received a copy of the GNU General Public License along with
-  TALER; see the file COPYING.  If not, If not, see <http://www.gnu.org/licenses/>
-
-
-*/
-
-/* Set up a listener to be called whenever a Wallet gets installed
-so that the user is led towards the demo's steps progressively
-*/
-
-function MERCHfirstStep(){
-
- // NOTE: NO 'let' declarations liked by FF here.
- var resDiv = document.createElement("div");
- var resTitle = document.createElement("h3");
- var resPar = document.createElement("p");
-
- resTitle.innerHTML = "How To Create A Reserve";
- resPar.innerHTML = "Click on 'Create Reserve' on the Wallet's menu, and fill in the followong form"
-
- resTitle.setAttribute('class', 'preamble');
- resDiv.appendChild(resTitle);
- resDiv.appendChild(resPar);
- var root = document.getElementById('root');
- root.appendChild(resDiv);
-
- // get the form
- var getform = new XMLHttpRequest();
-
- getform.onload = function (){
- var parser = new DOMParser();
- var formDom = parser.parseFromString(getform.responseText, "text/html");
- var form = formDom.getElementById('reserve-form');
- 
- resDiv.appendChild(form);
- 
- };
-
-
- getform.open("GET", "create-reserve-form.html", true);
- getform.send();
- 
-}
-
-document.body.addEventListener("taler-wallet-installed", MERCHfirstStep, 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.
-
-*/
-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://" + mint.value + "/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;
-
-}
diff --git a/src/frontend/pay.php b/src/frontend/pay.php
index 7232c2d5..5fd2cd20 100644
--- a/src/frontend/pay.php
+++ b/src/frontend/pay.php
@@ -1,14 +1,12 @@
+<!DOCTYPE html>
 <html>
 <head>
 <title>Fullfillment page</title>
 </head>
 <body>
 
-
 <?php 
-
 /*
-
   This file is part of TALER
   Copyright (C) 2014, 2015 Christian Grothoff (and other contributing authors)
 
@@ -25,7 +23,6 @@
 
 */
 
-
  /*
 // recover the session
 	session_start();
@@ -40,7 +37,6 @@
 
 */
 ?>
-
 Payment successful, thanks!
 
 </body>
diff --git a/src/frontend/shopping.html b/src/frontend/shopping.html
deleted file mode 100644
index 8853eef8..00000000
--- a/src/frontend/shopping.html
+++ /dev/null
@@ -1,46 +0,0 @@
-<html>
-<head>
-<title>Merchant</title>
-<link rel="stylesheet" type="text/css" href="style.css">
-</head>
-<body>
-<div id='root' class="page-wrapper">
-
-<!--
-
-  This file is part of TALER
-  Copyright (C) 2014, 2015 Christian Grothoff (and other contributing authors)
-
-  TALER is free software; you can redistribute it and/or modify it under the
-  terms of the GNU General Public License as published by the Free Software
-  Foundation; either version 3, or (at your option) any later version.
-
-  TALER is distributed in the hope that it will be useful, but WITHOUT ANY
-  WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
-  A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
-
-  You should have received a copy of the GNU General Public License along with
-  TALER; see the file COPYING.  If not, If not, see <http://www.gnu.org/licenses/>
-
--->
-<h1>Donation Page</h1>
-<p>Please choose a project and an amount you whish 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<br>
-<input type="radio" name="group0" value="Gnunet" checked="true">Gnunet<br>
-<input type="radio" name="group0" value="INRIA">INRIA<br><br><br>
-EUR <select id="taler-donation" name="kudos-donation">
-     <option value="5">10</option>
-</select>
-<input type="submit" name="keyName" value="Donate!"><br><br>
-
-</div>
-</form>
-
-<!--button onclick='sendContract();'>buy</a-->
-</div>
-</body>
-
-</html>
author	Christian Grothoff <christian@grothoff.org>	2015-08-18 18:30:38 +0200
committer	Christian Grothoff <christian@grothoff.org>	2015-08-18 18:30:38 +0200
commit	d09f4dd972c9ef6dce68fca786f9dce964d689d5 (patch)
tree	80feb740de19c7e7022f6e54b4de4f3b4d422507
parent	5223abda2bcab0b33a67ff7817034954ec072095 (diff)
download	merchant-d09f4dd972c9ef6dce68fca786f9dce964d689d5.tar.gz merchant-d09f4dd972c9ef6dce68fca786f9dce964d689d5.tar.bz2 merchant-d09f4dd972c9ef6dce68fca786f9dce964d689d5.zip