feat: Fehlermeldungen anzeigen und Botdetection anhand von Bearbeitunszeit. (#105)

Die URL ist noch hardcoded. Rückmeldung für den User fehlt noch. Die Nachricht geht noch nirgends hin. Spamprotection ohne Captcha ist nur in Ansätzen zu erkennen.

.gitignore

@@ -14,6 +14,7 @@ temp/
 .DS_Store
 .AppleDouble
 .LSOverride
+.nova
 
 # Icon must end with two \r
 Icon
@@ -85,3 +86,13 @@ $RECYCLE.BIN/
 
 # Windows shortcuts
 *.lnk
+
+### Python ###
+# Compiled python
+*.pyc
+
+# Virtaul environments
+.env
+.venv
+env
+venv

assets/css/style.css

@@ -31,6 +31,10 @@
      --wtf-light-grey: #edefeb;
      --wtf-lila: #6600ff;
 
+     /* misc colors */
+      --dark-red: #dc0000;
+      --dark-green: #007000;
+
      --column-count: 3;
 }
 
@@ -876,6 +880,45 @@ hr.-even {
     flex-direction: column;
     justify-content: flex-start;
 }
+
+.contact_form--required,
+.--error {
+    color: var(--dark-red)
+}
+
+.--success {
+   color: var(--dark-green);
+}
+
+.content__contact_form {
+
+}
+
+.contact_form__textarea,
+.contact_form__text_input,
+.contact_form__captcha {
+    display: flex;
+    flex-direction: column;
+}
+
+.contact_form__message {
+    height: 12em;
+}
+
+.contact_form__message,
+.contact_form__name,
+.contact_form__email,
+.contact_form__captcha {
+    font-family: 'Lato', sans-serif;
+    line-height: 1.3rem;
+    font-size: 1rem;
+}
+
+/* Hide captcha field as part of spam protection.
+   We got no real captcha. */
+.contact_form__captcha {
+    display: none;
+}
 /* main - Ende */
 
 /* footer - Start */

assets/js/contact_form.js

@@ -0,0 +1,61 @@
+const ajaxUrl = 'https://spielwiese.wtf-eg.de/php/contact_form.php';
+// const submit_button = document.getElementsByClassName('contact_form__submit_button')[0];
+const contact_form = document.getElementsByClassName('content__contact_form')[0];
+const message = document.getElementsByClassName('contact_form__message')[0];
+const name = document.getElementsByClassName('contact_form__name')[0];
+const email = document.getElementsByClassName('contact_form__email')[0];
+const captcha = document.getElementsByClassName('contact_form__captcha')[0];
+const now = (new Date().getTime()/1000).toFixed();
+const feedback = document.getElementsByClassName('contact_form__feedback')[0];
+
+contact_form.addEventListener('submit', function(event) {
+    event.preventDefault();
+    let formData = new FormData();
+    formData.append('message', message.value);
+    formData.append('name', name.value);
+    formData.append('email', email.value);
+    formData.append('time_sent', now);
+
+    // If some bot entered some value, return.
+    if (typeof captcha.value == 'undefined') {
+        formData.append('captcha', 'Nudelsuppe');
+    } else {
+        console.log('bot detected');
+        return;
+    }
+
+    fetch(ajaxUrl, {
+        method: 'POST',
+        mode:'same-origin',
+        body: formData,
+    })
+    .then(response => response.json())
+    .then(json => {
+        console.log(json)
+        if (json.errors) {
+            feedback.classList.add('--error');
+            // Über errors iterieren und diese ausgeben (evtl. nur ersten Fehler ausgeben?)
+            let error_message = '';
+            json.errors.forEach(function(error){
+                /**
+                 * Nur Zeilenumbrüche wenn mehrer Fehlermeldungen existieren,
+                 * aber bei der letzten nicht.
+                 */
+                if (json.errors.length > 1) {
+                    if (error == json.errors[json.errors.length - 1]) {
+                        error_message = error_message + error;
+                    } else {
+                        error_message = error_message + error + '<br>';
+                    }
+                } else {
+                    error_message = error_message + error;
+                }
+            })
+            feedback.innerHTML = error_message;
+        } else if (json.status == 'ok') {
+            feedback.classList.add('--success');
+            feedback.textContent = "Ihre Nachricht wurde erfolgreich ans Office geschickt.";
+        }
+    })
+    .catch(error => console.log(error));
+}, false);

assets/js/contact_form_toggle.js

@@ -0,0 +1,5 @@
+/* Unhide contact form if JS is enabled */
+window.addEventListener('DOMContentLoaded', (event) => {
+    const contact_form_wrapper = document.getElementsByClassName('content__contact_form_wrapper')[0];
+    contact_form_wrapper.style.setProperty('display', 'block');
+});

assets/manifest.json

@@ -6,6 +6,6 @@
    "sizes": "96x96",
    "type": "image\/png",
    "density": "2.0"
-  },
+  }
  ]
 }

assets/php/contact_form.php

@@ -0,0 +1,82 @@
+<?php
+$message = '';
+$name = '';
+$email = '';
+
+function sanitize_text(string $name) {
+    $text = filter_var($_POST[$name], FILTER_SANITIZE_FULL_SPECIAL_CHARS);
+    $text = trim($text);
+    $text = stripslashes($text);
+    $text = htmlspecialchars($text);
+
+    return $text;
+}
+
+/**
+ *  Sending email (Platzhalter)
+ *
+ *  mail(): Braucht auf dem Server einen korrekt konfigurierten Mailserver
+ *  phpmailer: Bibliothek, der per Composer installiert wird. Tut ganz gut mit SMTP.
+ */
+function send_message_to_office($message, $name, $email) {
+    return true;
+}
+
+function send_response($response_data) {
+    $json = json_encode($response_data);
+    if ($json === false) {
+        // Avoid echo of empty string (which is invalid JSON), and
+        // JSONify the error message instead:
+        $json = json_encode(["jsonError" => json_last_error_msg()]);
+        if ($json === false) {
+            // This should not happen, but …
+            $json = '{"jsonError":"unknown"}';
+        }
+        // Set HTTP response status code to: 500 - Internal Server Error
+        http_response_code(500);
+    }
+    header('Content-type: application/json');
+    echo $json;
+}
+
+if ($_SERVER["REQUEST_METHOD"] == "POST") {
+    $response = array();
+
+    if (empty($_POST['message'])) {
+        $response['errors'][] = 'Du hast keine Nachricht eingegeben.';
+    }
+    if (empty($_POST['email'])) {
+        $response['errors'][] = 'Du hast keine E-Mail-Adresse eingegeben.';
+    }
+    if (empty($_POST['name'])) {
+        $response['errors'][] = 'Du hast keinen Namen eingegeben.';
+    }
+    /**
+     * Idee zur Bot-Erkennung:
+     * 1. Ein Bot hat das Pseudocaptcha entweder leer abgeschickt, oder sich selbst etwas ausgedacht.
+     * 2. Ein Bot schickt die Daten in unter 5s ab.
+     * 3. Ein Mensch braucht nicht länger als 60min.
+     */
+    if (
+        $_POST['captcha'] != 'Nudelsuppe' or
+        preg_match('/\d{10}/', $_POST['time_sent']) != 1 or
+        time() - intval($_POST['time_sent']) < 5 or
+        time() - intval($_POST['time_sent']) > 3600
+    ) {
+        $response['errors'][] = 'Wir glauben du bist ein Bot.';
+    }
+    if (!array_key_exists('errors', $response)) {
+        $message = sanitize_text('message');
+        $name = sanitize_text('name');
+        $email = sanitize_text('email');
+
+        if (!send_message_to_office($message, $name, $email)) {
+            $response['errors'][] = 'Deine Nachricht konnte nicht übermittelt werden.';
+        } else {
+            $response['status'] = 'ok';
+        }
+    }
+    send_response($response);
+} else {
+    http_response_code(404);
+}

content/kontakt/contents.lr

@@ -1,4 +1,4 @@
-_model: page
+_model: contact_page
 ---
 title: Kontakt
 ---

models/contact_page.ini

@@ -0,0 +1,4 @@
+[model]
+name = Contact Page
+label = {{ this.title }}
+inherits = page

templates/contact_page.html

@@ -0,0 +1,52 @@
+{% extends "header_slim.html" %}
+{%- block title -%}{{ this.title }}{%- endblock -%}
+{%- block meta_description -%}
+  {%- if this.meta_description is defined and this.meta_description != "" -%}
+    {{ this.meta_description }}
+  {%- else -%}
+    Werkkooperative der Technikfreundinnen eG
+  {%- endif -%}
+{%- endblock -%}
+{% block body %}
+    <div class="content__box">
+        <div class="content__inner_box">
+            <h1>{{ this.title }}</h1>
+        </div>
+    </div>
+    <section class="content -odd">
+        <div class="content__box">
+            <div class="content__inner_box -width_constraint">
+                {{ this.body }}
+            </div>
+            <div class="content__inner_box -width_constraint content__contact_form_wrapper" style="display:none">
+              <h2>Kontaktformular</h2>
+              <form id="contact_form" class="content__contact_form">
+                <p class="contact_form__note">
+                  Deine E-Mail-Adresse wird nicht veröffentlicht.<br>
+                  <span aria-hidden="true">Erforderliche Felder sind gekennzeichnet <span class="contact_form--required" aria-hidden="true">*</span></span>
+                </p>
+                <p class="contact_form__textarea">
+                  <label for="message">Nachricht <span class="contact_form--required" aria-hidden="true">*</span></label>
+                  <textarea id="message" class="contact_form__message" aria-label="message" aria-hidden="true" cols="65" rows="7" name="message" required></textarea>
+                </p>
+                <p class="contact_form__text_input">
+                  <label for="name">Name <span class="contact_form--required" aria-hidden="true">*</span></label>
+                  <input id="name" class="contact_form__name" name="name" type="text" value="" size="30" maxlength="245" required />
+                </p>
+                <p class="contact_form__text_input">
+                  <label for="email">E-Mail-Adresse <span class="contact_form--required" aria-hidden="true">*</span></label>
+                  <input id="email" class="contact_form__email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-address" required />
+                </p>
+                <p class="contact_form__captcha">
+                  <label for="captcha">Captcha <span class="contact_form--required" aria-hidden="true">*</span></label>
+                  <input id="captcha" class="contact_form__captcha" name="captcha" type="captcha" value="…" size="30" maxlength="100" required placeholder="Wie viele Ecken hat ein Pentagramm?"/>
+                </p>
+                <p class="contact_form__submit">
+                  <input name="submit" type="submit" id="submit" class="contact_form__submit_button" value="Kommentar abschicken" />
+                  <p class="contact_form__feedback"></p>
+                </p>
+              </form>
+            </div>
+        </div>
+    </section>
+{% endblock %}

templates/layout.html

@@ -63,6 +63,9 @@ __        ____________________
   {% if 'manifest.json'|asseturl is defined -%}
     <link rel="manifest" href="{{ 'manifest.json'|asseturl }}">
   {%- endif %}
+  {% if '/js/contact_form_toggle.js'|asseturl is defined -%}
+    <script type="text/javascript" src="{{ '/js/contact_form_toggle.js'|asseturl }}"></script>
+  {%- endif %}
 </head>
 <body>
     <header>
@@ -128,4 +131,7 @@ __        ____________________
     {%- if '/js/nav_toggle.js'|asseturl is defined -%}
       <script type="text/javascript" src="{{ '/js/nav_toggle.js'|asseturl }}"></script>
     {%- endif %}
+    {% if '/js/contact_form_toggle.js'|asseturl is defined -%}
+      <script type="text/javascript" src="{{ '/js/contact_form.js'|asseturl }}"></script>
+    {%- endif %}
 </body>

wtf-eg.lektorproject

@@ -13,6 +13,15 @@ default = yes
 locale = de_DE
 target = rsync://wtf@www.wtf-eg.net:/srv/www/www.wtf-eg.de/
 
+[servers.dev]
+name = dev
+url = https://spielwiese.wtf-eg.de/
+url_style = absolute
+enabled = yes
+default = yes
+locale = de_DE
+target = rsync://wtf@www.wtf-eg.net:/srv/www/spielwiese.wtf-eg.de/
+
 [alternatives.de]
 name = Deutsch
 primary = true