From e2652b61c01e36f7980e4af04d7132da57660d0a Mon Sep 17 00:00:00 2001
From: muli <muli@mrmuli.de>
Date: Thu, 16 Jun 2022 18:23:05 +0200
Subject: [PATCH] feat: Fehlermeldungen anzeigen und Botdetection anhand von
 Bearbeitunszeit. (#105)

---
 assets/css/style.css        |  8 +++++-
 assets/js/contact_form.js   | 31 +++++++++++++++++++++--
 assets/php/contact_form.php | 50 ++++++++++++++++---------------------
 templates/contact_page.html |  1 +
 4 files changed, 59 insertions(+), 31 deletions(-)

diff --git a/assets/css/style.css b/assets/css/style.css
index 6532643..c9d5a5d 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -33,6 +33,7 @@
 
      /* misc colors */
       --dark-red: #dc0000;
+      --dark-green: #007000;
 
      --column-count: 3;
 }
@@ -880,10 +881,15 @@ hr.-even {
     justify-content: flex-start;
 }
 
-.contact_form--required {
+.contact_form--required,
+.--error {
     color: var(--dark-red)
 }
 
+.--success {
+   color: var(--dark-green);
+}
+
 .content__contact_form {
 
 }
diff --git a/assets/js/contact_form.js b/assets/js/contact_form.js
index 5300af3..c4182dd 100644
--- a/assets/js/contact_form.js
+++ b/assets/js/contact_form.js
@@ -5,7 +5,8 @@ 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 now = (new Date().getTime()/1000).toFixed();
+const feedback = document.getElementsByClassName('contact_form__feedback')[0];
 
 contact_form.addEventListener('submit', function(event) {
     event.preventDefault();
@@ -29,6 +30,32 @@ contact_form.addEventListener('submit', function(event) {
         body: formData,
     })
     .then(response => response.json())
-    .then(json => console.log(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);
diff --git a/assets/php/contact_form.php b/assets/php/contact_form.php
index ece2992..ebc5b10 100644
--- a/assets/php/contact_form.php
+++ b/assets/php/contact_form.php
@@ -42,36 +42,30 @@ function send_response($response_data) {
 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 (
-        empty($_POST['message']) ||
-        empty($_POST['email']) ||
-        empty($_POST['name']) ||
-        $_POST['captcha'] != 'Nudelsuppe'
+        $_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
     ) {
-        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' ||
-            preg_match('d{10}', $_POST['time_sent']) != 1 ||
-            (preg_match('d{10}', $_POST['time_sent']) != 1 && time() - $_POST['time_sent'] < 5) ||
-            (preg_match('d{10}', $_POST['time_sent']) != 1 && time() - $_POST['time_sent'] > 3600)
-        ) {
-            $response['errors'][] = 'Wir glauben du bist ein Bot.';
-        }
-    } else {
+        $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');
diff --git a/templates/contact_page.html b/templates/contact_page.html
index 626c961..0e128ce 100644
--- a/templates/contact_page.html
+++ b/templates/contact_page.html
@@ -43,6 +43,7 @@
                 </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>