diff --git a/assets/css/style.css b/assets/css/style.css index 2a6d9074..a3c0ee0a 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; } @@ -886,10 +887,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 5300af33..c4182dd1 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 + '
'; + } + } 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 ece29924..ebc5b101 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 626c961a..0e128cee 100644 --- a/templates/contact_page.html +++ b/templates/contact_page.html @@ -43,6 +43,7 @@

+