forked from ag_kommunikation/webseite
feat: Fehlermeldungen anzeigen und Botdetection anhand von Bearbeitunszeit. (#105)
This commit is contained in:
parent
2af9144fcb
commit
487f2268b6
@ -33,6 +33,7 @@
|
|||||||
|
|
||||||
/* misc colors */
|
/* misc colors */
|
||||||
--dark-red: #dc0000;
|
--dark-red: #dc0000;
|
||||||
|
--dark-green: #007000;
|
||||||
|
|
||||||
--column-count: 3;
|
--column-count: 3;
|
||||||
}
|
}
|
||||||
@ -886,10 +887,15 @@ hr.-even {
|
|||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
}
|
}
|
||||||
|
|
||||||
.contact_form--required {
|
.contact_form--required,
|
||||||
|
.--error {
|
||||||
color: var(--dark-red)
|
color: var(--dark-red)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.--success {
|
||||||
|
color: var(--dark-green);
|
||||||
|
}
|
||||||
|
|
||||||
.content__contact_form {
|
.content__contact_form {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -5,7 +5,8 @@ const message = document.getElementsByClassName('contact_form__message')[0];
|
|||||||
const name = document.getElementsByClassName('contact_form__name')[0];
|
const name = document.getElementsByClassName('contact_form__name')[0];
|
||||||
const email = document.getElementsByClassName('contact_form__email')[0];
|
const email = document.getElementsByClassName('contact_form__email')[0];
|
||||||
const captcha = document.getElementsByClassName('contact_form__captcha')[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) {
|
contact_form.addEventListener('submit', function(event) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
@ -29,6 +30,32 @@ contact_form.addEventListener('submit', function(event) {
|
|||||||
body: formData,
|
body: formData,
|
||||||
})
|
})
|
||||||
.then(response => response.json())
|
.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));
|
.catch(error => console.log(error));
|
||||||
}, false);
|
}, false);
|
||||||
|
@ -42,36 +42,30 @@ function send_response($response_data) {
|
|||||||
if ($_SERVER["REQUEST_METHOD"] == "POST") {
|
if ($_SERVER["REQUEST_METHOD"] == "POST") {
|
||||||
$response = array();
|
$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 (
|
if (
|
||||||
empty($_POST['message']) ||
|
$_POST['captcha'] != 'Nudelsuppe' or
|
||||||
empty($_POST['email']) ||
|
preg_match('/\d{10}/', $_POST['time_sent']) != 1 or
|
||||||
empty($_POST['name']) ||
|
time() - intval($_POST['time_sent']) < 5 or
|
||||||
$_POST['captcha'] != 'Nudelsuppe'
|
time() - intval($_POST['time_sent']) > 3600
|
||||||
) {
|
) {
|
||||||
if (empty($_POST['message'])) {
|
$response['errors'][] = 'Wir glauben du bist ein Bot.';
|
||||||
$response['errors'][] = 'Du hast keine Nachricht eingegeben.';
|
}
|
||||||
}
|
if (!array_key_exists('errors', $response)) {
|
||||||
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 {
|
|
||||||
$message = sanitize_text('message');
|
$message = sanitize_text('message');
|
||||||
$name = sanitize_text('name');
|
$name = sanitize_text('name');
|
||||||
$email = sanitize_text('email');
|
$email = sanitize_text('email');
|
||||||
|
@ -43,6 +43,7 @@
|
|||||||
</p>
|
</p>
|
||||||
<p class="contact_form__submit">
|
<p class="contact_form__submit">
|
||||||
<input name="submit" type="submit" id="submit" class="contact_form__submit_button" value="Kommentar abschicken" />
|
<input name="submit" type="submit" id="submit" class="contact_form__submit_button" value="Kommentar abschicken" />
|
||||||
|
<p class="contact_form__feedback"></p>
|
||||||
</p>
|
</p>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
Reference in New Issue
Block a user