fix: Fixed Syntax in manifest.json.

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.

.gitignore

@@ -14,6 +14,7 @@ temp/
 .DS_Store
 .AppleDouble
 .LSOverride
+.nova
 
 # Icon must end with two \r
 Icon
@@ -85,3 +86,13 @@ $RECYCLE.BIN/
 
 # Windows shortcuts
 *.lnk
+
+### Python ###
+# Compiled python
+*.pyc
+
+# Virtaul environments
+.env
+.venv
+env
+venv

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/manifest.json

@@ -6,6 +6,6 @@
    "sizes": "96x96",
    "type": "image\/png",
    "density": "2.0"
-  },
+  }
  ]
 }

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>