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

This commit is contained in:
muli 2022-06-16 18:23:05 +02:00
parent 2af9144fcb
commit 487f2268b6
4 changed files with 59 additions and 31 deletions

View File

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

View File

@ -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);

View File

@ -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,21 +51,21 @@ if ($_SERVER["REQUEST_METHOD"] == "POST") {
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.
/**
* 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)
$_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');

View File

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