Finalizing my adjustments for the contact form

5 files changed, 18 insertions, 94 deletions

diff --git a/web/GNUmakefile b/web/GNUmakefile
index 5016a60..022d6d9 100644
--- a/web/GNUmakefile
+++ b/web/GNUmakefile
@@ -7,7 +7,7 @@ STYLESHEET:=templates/include/styles.css
 
 all: $(HTMLPAGES)
 
-$(AUTOMENU): $(filter-out %.j2.tmpl,$(TEMPLATES))
+$(AUTOMENU): $(TEMPLATES)
 	(echo "[%\npages = ["; for i in $^; do FNAME="$${i##*/}"; echo " {\n   fname = '$${FNAME%.tmpl}'"; grep -E '^\s+(description|norder|uuid|title) = ' $$i; echo " }\n"; done; echo "\n]\n%]";) > $@
 
 %: templates/%.tmpl $(AUTOMENU) $(TMPLINCLS) $(STYLESHEET)
diff --git a/web/templates/contact.html.j2.tmpl b/web/templates/contact.html.j2.tmpl
index b351fdb..e099255 100644
--- a/web/templates/contact.html.j2.tmpl
+++ b/web/templates/contact.html.j2.tmpl
@@ -2,12 +2,12 @@
    title = 'Contact'
    description = 'Contact the team or a team member'
    uuid = '6dcfe529-89ef-44f1-903c-2614d8d56432'
-   norder = '-1'
+   norder = '8000'
 %]
 [%- PROCESS 'constants.tt' -%]
 {% if page.get and page.form %}
 <p>All the fields have to be filled in ...</p>
-<pre>{{ page|pprint }}</pre>
+{#<pre>{{ page|pprint }}</pre>#}
 <form action="{{ page.form.uri|urlencode }}" method="post" accept-charset="utf-8">
 <table width="100%" summary="Mailform">
 <colgroup>
@@ -46,7 +46,7 @@
 <tr>
  <td colspan="2">
  <div><b>Here goes your text (barring technical issues it will be transmitted as encrypted email!):</b></div>
- <textarea name="{{ page.form.message|e }}" class="feld3"></textarea>
+ <textarea name="{{ page.form.message|e }}" class="feld_" rows="20" cols="80" placeholder="Your message here (English or German). Deine Nachricht hier (Deutsch oder Englisch)."></textarea>
  </td>
  </tr>
 <tr>
@@ -71,10 +71,9 @@ If you can't remember the names, use the dropdown box above to receive a clue ;)
 </p>
 <h3>Using PGP to encrypt communication or to verify emails we send out</h3>
 <p>
-You can use the following <a class="wdslnk" href="https://en.wikipedia.org/wiki/Pretty_Good_Privacy">PGP</a>
-public keys to encrypt <em>to</em>. The keys will be available from commonly used key servers such as
-pgp.mit.edu or subkeys.pgp.net. Please use the traditional ASCII armor in your first communication to
-establish whether PGP/MIME can be used in future communication.
+You are encouraged to use the following <a class="wdslnk" href="https://en.wikipedia.org/wiki/Pretty_Good_Privacy">PGP</a>
+public keys to encrypt communication <em>to</em> us. The keys will be available from commonly used key servers such as
+pgp.mit.edu or subkeys.pgp.net.
 </p>
 <ul>
 [%- FOREACH key IN gpg_keys.sort('name') -%]
diff --git a/web/templates/contact.html.tmpl b/web/templates/contact.html.tmpl
deleted file mode 100644
index ae7f90a..0000000
--- a/web/templates/contact.html.tmpl
+++ /dev/null
@@ -1,84 +0,0 @@
-[% WRAPPER 'html-body.tt'
-   title = 'Contact'
-   description = 'Contact the team or a team member'
-   uuid = 'a57cd25d-42ee-4e3a-aa24-f42b9548dbdd'
-   norder = '9989'
-%]
-[%- PROCESS 'constants.tt' -%]
-<p>All the fields have to be filled in ...</p>
-<p><strong>NB:</strong> As a matter of courtesy you should consider adding your name (or even a pseudonym) in the message to us. You know our names as well. Besides, it makes it easier to address you in a response. Thanks.</p>
-<form action="/bin/sendmail.cgi" method="post" accept-charset="utf-8">
-<table width="100%" summary="Mailform">
-<colgroup>
- <col width="30%" />
- <col width="70%" />
-</colgroup>
-<tr>
- <td>
- <b>Who should receive the message?:</b>
- </td>
- <td>
- <select name="Recipient">
-  <option value="developers" selected="selected">Developers</option>
-  [%- FOREACH key IN gpg_keys.sort('name') -%]<option value="[%- key.name | lower -%]">[%- key.name -%]</option>[%- END -%]
-  <option value="team">The whole team</option>
- </select>
- </td>
- </tr>
-<tr>
- <td>
- <b>Your email address (max. 100 chars):</b>
- </td>
- <td>
- <input type="text" name="SenderEmail" maxlength="100" class="feld_" />
- </td>
- </tr>
-<tr>
- <td>
- <b>Subject (max. 100 chars):</b>
- </td>
-
- <td>
- <input type="text" name="Subject" maxlength="100" class="feld_" />
- </td>
- </tr>
-<tr>
- <td colspan="2">
- <b>Here goes your text:</b><br />
- <textarea name="Mailtext" rows="15" cols="60" class="feld3"></textarea>
- </td>
- </tr>
-<tr>
- <td colspan="2" style="text-align:center; ">
- <input type="submit" value="Send" class="btn" />
- </td>
- </tr>
-</table>
-</form>
-<h3>Report an issue or defect ("bug")?</h3>
-<p>
-Please use <a class="wdslnk" href="[%- tracker_url -%]">the issue tracker over on Bitbucket</a> or for
-security-related reports use a PGP-encrypted email. See below for public keys available.
-</p>
-<h3>Email from your own client?</h3>
-<p>
-If you prefer to send an email, i.e. not use this contact form, you can use the lowercase form of the team
-member's first name and append the at sign and then <tt>windirstat.net</tt> to it to get the email address
-of that team member (i.e. <tt>&lt;name&gt;@windirstat.net</tt>).
-If you can't remember the names, use the dropdown box above to receive a clue ;)
-</p>
-<h3>Using PGP to encrypt communication or to verify emails we send out</h3>
-<p>
-You can use the following <a class="wdslnk" href="https://en.wikipedia.org/wiki/Pretty_Good_Privacy">PGP</a>
-public keys to encrypt <em>to</em>. The keys will be available from commonly used key servers such as
-pgp.mit.edu or subkeys.pgp.net. Please use the traditional ASCII armor in your first communication to
-establish whether PGP/MIME can be used in future communication.
-</p>
-<ul>
-[%- FOREACH key IN gpg_keys.sort('name') -%]
-[%- IF key.id -%]
-<li><strong>[%- key.name -%]:</strong><br />&nbsp;&nbsp;PGP key ID: <a class="wdslnk" href="[%- key.id | format(gpg_search_fmt) -%]">[%- key.id -%]</a>,<br />&nbsp;&nbsp;&nbsp;&nbsp;key fingerprint: <tt>[%- key.fingerprint -%]</tt></li>
-[%- END -%]
-[%- END -%]
-</ul>
-[% END %]
diff --git a/web/templates/include/html-body.tt b/web/templates/include/html-body.tt
index f2f8b70..6d4c36a 100644
--- a/web/templates/include/html-body.tt
+++ b/web/templates/include/html-body.tt
@@ -51,7 +51,7 @@
     [%- IF uuid == page.uuid -%]
     <p class="selected">
     [%- ELSE -%]
-    <p><a href="/[% page.fname | uri %]">
+    <p><a href="/[% page.fname | remove('\.j2$') | uri %]">
     [%- END -%]
       [%- IF page.uuid == '51f50289-c61f-4cf7-ac07-fd236f442f39' -%]
       <img src="/images/logo_50px.png" alt="Colored WinDirStat logo" height="50" width="50" />
diff --git a/web/templates/include/styles.css b/web/templates/include/styles.css
index 3cf4654..d19fbe2 100644
--- a/web/templates/include/styles.css
+++ b/web/templates/include/styles.css
@@ -154,12 +154,21 @@ td.bordleft {
   width : 100%;
 }
 
-.feld3 {
+textarea.feld_ {
   border : 1px solid #cccccc;
   width : 100%;
   height: 25ex;
 }
 
+input:focus::-webkit-input-placeholder { color:transparent; }
+input:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */
+input:focus::-moz-placeholder { color:transparent; } /* FF 19+ */
+input:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */
+textarea:focus::-webkit-input-placeholder { color:transparent; }
+textarea:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */
+textarea:focus::-moz-placeholder { color:transparent; } /* FF 19+ */
+textarea:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */
+
 ul.download {
   border : 1px dashed #cccccc;
   padding : 1em;