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

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 {
 
 }

assets/js/contact_form.js

@@ -5,6 +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 feedback = document.getElementsByClassName('contact_form__feedback')[0];
 
 contact_form.addEventListener('submit', function(event) {
     event.preventDefault();
@@ -12,6 +14,7 @@ contact_form.addEventListener('submit', function(event) {
     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') {
@@ -27,5 +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);

assets/php/contact_form.php

@@ -42,12 +42,6 @@ function send_response($response_data) {
 if ($_SERVER["REQUEST_METHOD"] == "POST") {
     $response = array();
 
-    if (
-        empty($_POST['message']) ||
-        empty($_POST['email']) ||
-        empty($_POST['name']) ||
-        $_POST['captcha'] != 'Nudelsuppe'
-    ) {
     if (empty($_POST['message'])) {
         $response['errors'][] = 'Du hast keine Nachricht eingegeben.';
     }
@@ -57,10 +51,21 @@ if ($_SERVER["REQUEST_METHOD"] == "POST") {
     if (empty($_POST['name'])) {
         $response['errors'][] = 'Du hast keinen Namen eingegeben.';
     }
-        if ($_POST['captcha'] != 'Nudelsuppe') {
+    /**
+     * 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.';
     }
-    } else {
+    if (!array_key_exists('errors', $response)) {
         $message = sanitize_text('message');
         $name = sanitize_text('name');
         $email = sanitize_text('email');

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>