feat: WIP Kontaktformular hinzugefügt. (#105)

Die URL ist noch hardcoded. Rückmeldung für den User fehlt noch. Die Nachricht geht noch nirgends hin. Spamprotection ohne Captcha ist nur in Ansätzen zu erkennen.
This commit is contained in:
muli 2022-06-16 13:02:42 +02:00
parent 436be5830b
commit aeb1ae24fa
8 changed files with 212 additions and 1 deletions

View File

@ -31,6 +31,9 @@
--wtf-light-grey: #edefeb; --wtf-light-grey: #edefeb;
--wtf-lila: #6600ff; --wtf-lila: #6600ff;
/* misc colors */
--dark-red: #dc0000;
--column-count: 3; --column-count: 3;
} }
@ -882,6 +885,40 @@ hr.-even {
flex-direction: column; flex-direction: column;
justify-content: flex-start; justify-content: flex-start;
} }
.contact_form--required {
color: var(--dark-red)
}
.content__contact_form {
}
.contact_form__textarea,
.contact_form__text_input,
.contact_form__captcha {
display: flex;
flex-direction: column;
}
.contact_form__message {
height: 12em;
}
.contact_form__message,
.contact_form__name,
.contact_form__email,
.contact_form__captcha {
font-family: 'Lato', sans-serif;
line-height: 1.3rem;
font-size: 1rem;
}
/* Hide captcha field as part of spam protection.
We got no real captcha. */
.contact_form__captcha {
display: none;
}
/* main - Ende */ /* main - Ende */
/* footer - Start */ /* footer - Start */

31
assets/js/contact_form.js Normal file
View File

@ -0,0 +1,31 @@
const ajaxUrl = 'https://spielwiese.wtf-eg.de/php/contact_form.php';
// const submit_button = document.getElementsByClassName('contact_form__submit_button')[0];
const contact_form = document.getElementsByClassName('content__contact_form')[0];
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];
contact_form.addEventListener('submit', function(event) {
event.preventDefault();
let formData = new FormData();
formData.append('message', message.value);
formData.append('name', name.value);
formData.append('email', email.value);
// If some bot entered some value, return.
if (typeof captcha.value == 'undefined') {
formData.append('captcha', 'Nudelsuppe');
} else {
console.log('bot detected');
return;
}
fetch(ajaxUrl, {
method: 'POST',
mode:'same-origin',
body: formData,
})
.then(response => response.json())
.then(json => {console.log(json)});
}, false);

View File

@ -0,0 +1,5 @@
/* Unhide contact form if JS is enabled */
window.addEventListener('DOMContentLoaded', (event) => {
const contact_form_wrapper = document.getElementsByClassName('content__contact_form_wrapper')[0];
contact_form_wrapper.style.setProperty('display', 'block');
});

View File

@ -0,0 +1,77 @@
<?php
$message = '';
$name = '';
$email = '';
function sanitize_text(string $name) {
$text = filter_var($_POST[$name], FILTER_SANITIZE_FULL_SPECIAL_CHARS);
$text = trim($text);
$text = stripslashes($text);
$text = htmlspecialchars($text);
return $text;
}
/**
* Sending email (Platzhalter)
*
* mail(): Braucht auf dem Server einen korrekt konfigurierten Mailserver
* phpmailer: Bibliothek, der per Composer installiert wird. Tut ganz gut mit SMTP.
*/
function send_message_to_office($message, $name, $email) {
return true;
}
function send_response($response_data) {
$json = json_encode($response_data);
if ($json === false) {
// Avoid echo of empty string (which is invalid JSON), and
// JSONify the error message instead:
$json = json_encode(["jsonError" => json_last_error_msg()]);
if ($json === false) {
// This should not happen, but …
$json = '{"jsonError":"unknown"}';
}
// Set HTTP response status code to: 500 - Internal Server Error
http_response_code(500);
}
header('Content-type: application/json');
echo $json;
}
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.';
}
if (empty($_POST['email'])) {
$response['errors'][] = 'Du hast keine E-Mail-Adresse eingegeben.';
}
if (empty($_POST['name'])) {
$response['errors'][] = 'Du hast keinen Namen eingegeben.';
}
if ($_POST['captcha'] != 'Nudelsuppe') {
$response['errors'][] = 'Wir glauben du bist ein Bot.';
}
} else {
$message = sanitize_text('message');
$name = sanitize_text('name');
$email = sanitize_text('email');
if (!send_message_to_office($message, $name, $email)) {
$response['errors'][] = 'Deine Nachricht konnte nicht übermittelt werden.';
} else {
$response['status'] = 'ok';
}
}
send_response($response);
} else {
http_response_code(404);
}

View File

@ -1,4 +1,4 @@
_model: page _model: contact_page
--- ---
title: Kontakt title: Kontakt
--- ---

4
models/contact_page.ini Normal file
View File

@ -0,0 +1,4 @@
[model]
name = Contact Page
label = {{ this.title }}
inherits = page

View File

@ -0,0 +1,51 @@
{% extends "header_slim.html" %}
{%- block title -%}{{ this.title }}{%- endblock -%}
{%- block meta_description -%}
{%- if this.meta_description is defined and this.meta_description != "" -%}
{{ this.meta_description }}
{%- else -%}
Werkkooperative der Technikfreundinnen eG
{%- endif -%}
{%- endblock -%}
{% block body %}
<div class="content__box">
<div class="content__inner_box">
<h1>{{ this.title }}</h1>
</div>
</div>
<section class="content -odd">
<div class="content__box">
<div class="content__inner_box -width_constraint">
{{ this.body }}
</div>
<div class="content__inner_box -width_constraint content__contact_form_wrapper" style="display:none">
<h2>Kontaktformular</h2>
<form id="contact_form" class="content__contact_form">
<p class="contact_form__note">
Deine E-Mail-Adresse wird nicht veröffentlicht.<br>
<span aria-hidden="true">Erforderliche Felder sind gekennzeichnet <span class="contact_form--required" aria-hidden="true">*</span></span>
</p>
<p class="contact_form__textarea">
<label for="message">Nachricht <span class="contact_form--required" aria-hidden="true">*</span></label>
<textarea id="message" class="contact_form__message" aria-label="message" aria-hidden="true" cols="65" rows="7" name="message" required></textarea>
</p>
<p class="contact_form__text_input">
<label for="name">Name <span class="contact_form--required" aria-hidden="true">*</span></label>
<input id="name" class="contact_form__name" name="name" type="text" value="" size="30" maxlength="245" required />
</p>
<p class="contact_form__text_input">
<label for="email">E-Mail-Adresse <span class="contact_form--required" aria-hidden="true">*</span></label>
<input id="email" class="contact_form__email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-address" required />
</p>
<p class="contact_form__captcha">
<label for="captcha">Captcha <span class="contact_form--required" aria-hidden="true">*</span></label>
<input id="captcha" class="contact_form__captcha" name="captcha" type="captcha" value="…" size="30" maxlength="100" required placeholder="Wie viele Ecken hat ein Pentagramm?"/>
</p>
<p class="contact_form__submit">
<input name="submit" type="submit" id="submit" class="contact_form__submit_button" value="Kommentar abschicken" />
</p>
</form>
</div>
</div>
</section>
{% endblock %}

View File

@ -63,6 +63,9 @@ __ ____________________
{% if 'manifest.json'|asseturl is defined -%} {% if 'manifest.json'|asseturl is defined -%}
<link rel="manifest" href="{{ 'manifest.json'|asseturl }}"> <link rel="manifest" href="{{ 'manifest.json'|asseturl }}">
{%- endif %} {%- endif %}
{% if '/js/contact_form_toggle.js'|asseturl is defined -%}
<script type="text/javascript" src="{{ '/js/contact_form_toggle.js'|asseturl }}"></script>
{%- endif %}
</head> </head>
<body> <body>
<header> <header>
@ -128,4 +131,7 @@ __ ____________________
{%- if '/js/nav_toggle.js'|asseturl is defined -%} {%- if '/js/nav_toggle.js'|asseturl is defined -%}
<script type="text/javascript" src="{{ '/js/nav_toggle.js'|asseturl }}"></script> <script type="text/javascript" src="{{ '/js/nav_toggle.js'|asseturl }}"></script>
{%- endif %} {%- endif %}
{% if '/js/contact_form_toggle.js'|asseturl is defined -%}
<script type="text/javascript" src="{{ '/js/contact_form.js'|asseturl }}"></script>
{%- endif %}
</body> </body>