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.

assets/css/style.css

@@ -31,6 +31,9 @@
      --wtf-light-grey: #edefeb;
      --wtf-lila: #6600ff;
 
+     /* misc colors */
+      --dark-red: #dc0000;
+
      --column-count: 3;
 }
 
@@ -876,6 +879,40 @@ hr.-even {
     flex-direction: column;
     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 */
 
 /* footer - Start */

assets/js/contact_form.js

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

assets/js/contact_form_toggle.js

@@ -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');
+});

assets/php/contact_form.php

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

content/kontakt/contents.lr

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

models/contact_page.ini

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

templates/contact_page.html

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

templates/layout.html

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