View Issue Details

IDProjectCategoryView StatusLast Update
0005063Talerauditorpublic2019-04-25 18:52
ReporterChristian GrothoffAssigned ToMarcello Stanisci 
PrioritynormalSeveritytextReproducibilityalways
Status resolvedResolutionfixed 
Platformi7OSDebian GNU/LinuxOS Versionsqueeze
Product VersionSVN HEAD 
Target Version0.6Fixed in Version0.6 
Summary0005063: "add auditor" button on auditor.test.taler.net looks ugly
DescriptionRight now, the button is in the top left corner, and there is no text whatsoever on the page.

The page should first contain some friendly text, i.e.

<h1>TESTKUDOS Auditor</h1>

This is the Web site of the auditor for the TESTKUDOS currency.
In the GNU Taler system, an auditor is responsible for verifying
that an exchange operates correctly. If you trust us to do a good
job auditing, please click on

(centered)
                          [Add Auditor]

to tell your wallet that you are willing to trust exchanges that
we audit to handle the TESTKUDOS currency properly.


Plus some logic to detect absence of the Taler wallet and show some
alternative text (without the [Add auditor]) suggesting installation
of a wallet instead.
TagsNo tags attached.

Activities

Christian Grothoff

2017-06-04 22:05

manager   ~0012224

Also, likely bug: the JS on the page does not seem to actually include the auditor's public key!

LUG

2019-04-19 12:41

developer   ~0014303

A patch that is adding just the explanatory text that 0005063:0012224 suggested in the issue description, with one minor change to:
> This is the web site of the auditor for the currency "{{ currency }}".
Which should hopefully establish the name of the currency a bit more robust than using always "the {{ currency }} currency", which could be counter intuitive if the currency has a misleading name.

I'd also offer to look into handling the no wallet case, if that is still needed?

auditor_description_text.patch (960 bytes)
diff --git a/index.html.j2 b/index.html.j2
index 0dcdead..ac40be6 100644
--- a/index.html.j2
+++ b/index.html.j2
@@ -62,7 +62,16 @@
     <p>You can learn more about Taler on our main <a href="https://taler.net">website</a>.</p>
   </div>
   <section id="main" class="content">
-  <button class="pure-button pure-button-primary" onclick="addAuditor()">Add Auditor</button>
+    <h1>{{ currency }} Auditor</h1>
+
+    This is the web site of the auditor for the currency "{{ currency }}".
+    In the GNU Taler system, an auditor is responsible for verifying that an exchange operates correctly.
+    If you trust us to do a good job auditing, please click on
+    <br><br>
+    <center><button class="pure-button pure-button-primary" onclick="addAuditor()">Add Auditor</button></center>
+    <br>
+    to tell your wallet that you are willing to trust exchanges that
+    we audit to handle the {{ currency }} currency properly.
   </section>
 </body>
 </html>

Christian Grothoff

2019-04-20 13:58

manager   ~0014316

Design fixed in 2e95bd9..c288ba1.

Christian Grothoff

2019-04-20 14:01

manager   ~0014317

Yes, detecting the absence of the Taler wallet is still needed, otherwise the button shows even if there is no wallet.

We also should grab the dropdown-navbar from web-common.

Christian Grothoff

2019-04-20 14:11

manager   ~0014318

Marcello, after going over our repos, it seems that dropdown-navbar from web-common is NOT used in many places, instead the respective menu is manually written in each of them (demo.git/index.html.j2, auditor/index.html.j2, backoffice/talerbackoffice/backoffice/template/backoffice.html, donations.git/talerdonations/donations/templates/base.html).

The last one seems to be using the most generic style (with environment variables to adapt to demo vs. test, I presume)? Still, we want to show the exact same navigation menu in all of the *.demo.taler.net pages, and the best way I see to achieve this would be via a common template in web-common that is grabbed via Git submodule. Could you please look into this and make sure that all (survey, donations, bank, backoffice, essay shop, etc.) subpages share this "one true menu"?

LUG

2019-04-22 15:27

reporter   ~0014325

Thanks for picking this up. In commit c288ba14fd475a03ef148769ffb4146669a34de9 you are adding the descriptive text but still have one hard coded "TESTKUDOS" in index.html.j2:86, that should be the currency template variable.

LUG

2019-04-22 20:00

reporter   ~0014332

Is the JS that affects "taler-installed-show" and "taler-installed-hide" CSS classes in the wallet extension? I created the attached patch in the image of the landing page, but could reproduce the actual wallet detection (like on demo.taler.net) locally for neither auditor nor landing.

Meta question: Is this (going towards) helping you or do you see other "frontend" related things where I could help you more?

auditor_detect_wallet.patch (2,081 bytes)
diff --git a/index.html.j2 b/index.html.j2
index 6945479..72155af 100644
--- a/index.html.j2
+++ b/index.html.j2
@@ -69,23 +69,32 @@
   </div>
   <section id="main" class="content">
     <h1>{{ _("%(curr)s Auditor", curr=currency) }} </h1>
-    <p style="color: black;">
-      {{ _("This is the Web site of the auditor for the %(curr)s currency.",curr=currency) }}
+    <p class="bluebox taler-installed-hide">
       {% trans %}
-      In the GNU Taler system, an auditor is responsible for verifying
-      that an exchange operates correctly. If you trust us to do a good
-      job auditing, please click here:
+      You don't have a wallet installed yet.<br>
+      Install the wallet from the <a href="https://taler.net/wallet-installation.html">installation page</a>.
+      It only takes one click.
       {% endtrans %}
     </p>
-    <div style="text-align: center;">
-      <button class="pure-button pure-button-primary" style="text-allign: center;" click="addAuditor()">{{ _("Add Auditor") }}</button>
+    <div class="taler-installed-show">
+      <p style="color: black;">
+        {{ _("This is the Web site of the auditor for the %(curr)s currency.",curr=currency) }}
+        {% trans %}
+        In the GNU Taler system, an auditor is responsible for verifying
+        that an exchange operates correctly. If you trust us to do a good
+        job auditing, please click here:
+        {% endtrans %}
+      </p>
+      <div style="text-align: center;">
+        <button class="pure-button pure-button-primary" style="text-allign: center;" click="addAuditor()">{{ _("Add Auditor") }}</button>
+      </div>
+      <p>
+        {% trans %}
+        This will tell your wallet that you are willing to trust exchanges that
+        we audit to handle the TESTKUDOS currency properly.
+        {% endtrans %}
+      </p>
     </div>
-    <p>
-      {% trans %}
-      This will tell your wallet that you are willing to trust exchanges that
-      we audit to handle the TESTKUDOS currency properly.
-      {% endtrans %}
-    </p>
   </section>
 </body>
 </html>

Christian Grothoff

2019-04-22 21:21

manager   ~0014334

14325 fixed in 175f0b0..4f14650. And yes, those CSS are in the wallet extension.

Christian Grothoff

2019-04-22 21:30

manager   ~0014335

LUG's wallet detection patch applied in 4f14650..f1e1c46 (plus typo fix), thanks, that was helpful. Getting the menu inlined from a central place and the CI job remain to be done.

LUG

2019-04-23 08:25

reporter   ~0014336

I can try to fix the menu issue, if Marcello doesn't beat me to it ;)

Marcello Stanisci

2019-04-23 11:43

reporter   ~0014337

Ah :-)

I would say help more than beat. In fact, let me know if you need any. I don't feel to pick this up as long as someone else is doing something (we risk: duplicate work / repos conflicts / ..)

Thanks!

LUG

2019-04-24 18:56

reporter   ~0014340

@Christian, you said the the dropdown-navbar from web-common isn't used everywhere. To me it looks like it isn't used anywhere. Could you point me to an example where it is used, please?
It also comes as a surprise to me to see dropdown-navbar* files being removed from web-common altogether in [[https://git.taler.net/web-common.git/commit/?id=e9554baf0f3f880d656284ef5e9089bbd8313464|e9554baf0f3f880d656284ef5e9089bbd8313464]].

In general, if someone is able to point me to an example where content from web-common files is used to create the static html pages, I'd be happy to follow that example to move redundant stuff into web-common.

LUG

2019-04-24 18:56

reporter   ~0014341

Huh, apologies for that weird link, I don't know why Mantis isn't able to render what is describe as possible text formatting in their wiki.

Christian Grothoff

2019-04-24 19:45

manager   ~0014342

LUG: I'm indeed not sure it is used anywhere either. In fact, as you pointed out, Marcello recently removed them as "unneeded". Anyway, clearly the menu IS currently duplicated across multiple repos, and we should avoid this. My general feeling is that since web-common should be checked out in all of those repos anyway (for Taler wallet detection), it seems like a reasonable place for putting the shared menu logic, at least for now. Once it is in there, it should be easy to use jinja2 to simply include the respective HTML ({% include "path/to/file.inc" %} should do the trick.

So feel free to give it a shot, Marcello should be the one to apply the resulting patch(es), as he likely knows this part of the deployment best.

LUG

2019-04-24 21:05

reporter   ~0014343

So here would be a "demobar-menu.html" one could add to the web-common repo and matching patches for the auditor and landing repos for how to embed this file in place of the menu. This now isolates only the menu items and leaves the rest to the specific repo implementation.
However, what seems to make more sense to me would be a hierarchical approach where we have a base template (like e.g. in the backoffice repo) but in the web-common repo and then only inherit from this base to specify the content block depending on the individual repo. This would actually go nicely hand in hand with a re-implementation of the menu according to more recent CSS practices. What do you think? In case you think these are valuable ideas to pursue, I'd create matching issues and start working on it.

taler_auditor_demobar.patch (671 bytes)
diff --git a/index.html.j2 b/index.html.j2
index dfe5783..e46b47b 100644
--- a/index.html.j2
+++ b/index.html.j2
@@ -55,12 +55,7 @@
     <p>
       {{ _("This is an auditor for the %(curr)s currency.", curr=currency) }}
     </p>
-    <ul>
-      <li><a href="{{ intro_url }}">Introduction</a></li>
-      <li><a href="{{ bank_url }}">Bank</a></li>
-      <li><a href="{{ merchant_blog_url }}">Essay Shop</a></li>
-      <li><a href="{{ merchant_donations_url }}">Donations</a></li>
-    </ul>
+    {% include "static/web-common/demobar-menu.html" %}
     <p>
       {% trans %}
       You can learn more about Taler on our main <a href="https://taler.net/">website</a>.
taler_landing_demobar.patch (1,012 bytes)
diff --git a/demo/index.html.j2 b/demo/index.html.j2
index 2e1da37..3279a68 100644
--- a/demo/index.html.j2
+++ b/demo/index.html.j2
@@ -40,14 +40,7 @@
     <h1><span class="tt adorn-brackets">Taler Demo</span></h1>
     <h1><span class="it"><a href="#">Introduction</a></span></h1>
     <p>This is the entry point of the Taler demo.  Follow the instructions and try Taler with the other pages linked below!</p>
-    <ul>
-      <li><a href="{{ intro_url }}">Introduction</a></li>
-      <li><a href="{{ bank_url }}">Bank</a></li>
-      <li><a href="{{ merchant_blog_url }}">Essay Shop</a></li>
-      <li><a href="{{ merchant_donations_url }}">Donations</a></li>
-      <li><a href="{{ merchant_survey_url }}">Tipping/Survey</a></li>
-      <li><a href="{{ backoffice_url }}">Back-office</a></li>
-    </ul>
+    {% include "static/web-common/demobar-menu.html" %}
     <p>You can learn more about Taler on our main <a href="https://taler.net">website</a>.</p>
   </div>
   <section id="main" class="content">
demobar-menu.html (357 bytes)

Christian Grothoff

2019-04-24 22:53

manager   ~0014344

First of all, you are aware of the other git repos used for the demo (like bank.git and the other demo sub-sites)? Those should also be patched.

Second, there is a slight complication with the backoffice: that one must work standalone, outside of the demo (and thus without the "demo"-specific menu). If your hierarchical approach can handle that, great.

As for re-implementing the menu "to more recent CSS practices", I'm all for making it look "nicer" (and am far from an expert on this), so sure, feel free to give it a shot.

Two questions:
1) should Marcello consider applying the above patches already, or should we just wait?
2) Would you please sign the GNUnet copyright sharing agreement? (see https://gnunet.org/en/copyright.html)? Given that you're starting to make more regular and complex contributions, I think that would be important least we get into legal insecurity. Note that you may sign using a pseudonym (like "LUG").

LUG

2019-04-25 18:21

reporter   ~0014346

Thanks for pointing this out again, I am aware of the other repos.

I'll prepare the hierarchical idea for all regular demo pages and then we can see if backoffice also works with a variation of that. My current impression is that it should.
A general note of caution: I can't judge to which extent the overall project architecture of the different frontend repos and their components makes sense. In that regard I'm trusting you that this was created in the way it is (and e.g. not as a single repo) with reason.

I'm also not incredibly comfortable in the design space, but maybe we can improve things in small steps over time. At least mobile device compatibility and stuff like that I should be able to improve a bit.

Accordingly, 2 answers:
1) I'd suggest to refrain from applying the patches above since I'll take look at the bigger picture.
2) I'll sign the agreement and send it to you at TUM.

I'd be fine with closing this issue, then.

Christian Grothoff

2019-04-25 18:52

manager   ~0014347

Ok, let's resolve this one then. Please open new issues for the "better menu" or "better mobile device support" if/when you have time for it.

Issue History

Date Modified Username Field Change
2017-06-04 22:04 Christian Grothoff New Issue
2017-06-04 22:04 Christian Grothoff Status new => assigned
2017-06-04 22:04 Christian Grothoff Assigned To => Marcello Stanisci
2017-06-04 22:05 Christian Grothoff Note Added: 0012224
2017-10-23 10:48 Christian Grothoff Assigned To Marcello Stanisci =>
2017-10-23 10:48 Christian Grothoff Status assigned => confirmed
2017-12-14 15:59 Christian Grothoff Target Version => 0.7
2019-04-19 12:41 LUG File Added: auditor_description_text.patch
2019-04-19 12:41 LUG Note Added: 0014303
2019-04-20 13:58 Christian Grothoff Note Added: 0014316
2019-04-20 14:01 Christian Grothoff Note Added: 0014317
2019-04-20 14:11 Christian Grothoff Note Added: 0014318
2019-04-20 14:11 Christian Grothoff Assigned To => Marcello Stanisci
2019-04-20 14:11 Christian Grothoff Status confirmed => assigned
2019-04-22 15:27 LUG Note Added: 0014325
2019-04-22 20:00 LUG File Added: auditor_detect_wallet.patch
2019-04-22 20:00 LUG Note Added: 0014332
2019-04-22 21:21 Christian Grothoff Note Added: 0014334
2019-04-22 21:30 Christian Grothoff Note Added: 0014335
2019-04-23 08:25 LUG Note Added: 0014336
2019-04-23 11:43 Marcello Stanisci Note Added: 0014337
2019-04-24 18:56 LUG Note Added: 0014340
2019-04-24 18:56 LUG Note Added: 0014341
2019-04-24 19:45 Christian Grothoff Note Added: 0014342
2019-04-24 21:05 LUG File Added: taler_auditor_demobar.patch
2019-04-24 21:05 LUG File Added: taler_landing_demobar.patch
2019-04-24 21:05 LUG File Added: demobar-menu.html
2019-04-24 21:05 LUG Note Added: 0014343
2019-04-24 22:53 Christian Grothoff Note Added: 0014344
2019-04-25 18:21 LUG Note Added: 0014346
2019-04-25 18:52 Christian Grothoff Note Added: 0014347
2019-04-25 18:52 Christian Grothoff Status assigned => resolved
2019-04-25 18:52 Christian Grothoff Resolution open => fixed
2019-04-25 18:52 Christian Grothoff Fixed in Version => 0.6
2019-04-25 18:52 Christian Grothoff Target Version 0.7 => 0.6