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 @@
+