Merge pull request '#125_fehler_im_kontaktformular' (#126) from #125_fehler_im_kontaktformular into main

Reviewed-on: ag_kommunikation/webseite#126

assets/js/contact_form.js

@@ -1,29 +1,45 @@
-const ajaxUrl = '../php/contact_form.php';
-const contact_form = document.getElementsByClassName('content__contact_form')[0];
-const subject = document.getElementsByClassName('contact_form__subject')[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];
-const now = (new Date().getTime()/1000).toFixed();
-const feedback = document.getElementsByClassName('contact_form__feedback')[0];
+const contactFormAjaxUrl = '/php/contact_form.php';
 
-window.addEventListener('DOMContentLoaded', function(event) {
+window.addEventListener('DOMContentLoaded', function() {
+    const contact_form = document.getElementsByClassName('content__contact_form')[0];
+    if (contact_form) {
+        contact_form.addEventListener('submit', wtf_submitContactForm, false);
+        wtf_startContactFormSession();
+    }
+});
+
+function wtf_startContactFormSession() {
     let formData = new FormData();
     formData.append('action', 'start_session');
-    fetch(ajaxUrl, {
+    fetch(contactFormAjaxUrl, {
         method: 'POST',
         mode: 'same-origin',
         body: formData,
     })
-    .then(response => response.json())
+    .then(response => {
+        if (!response.ok) {
+            throw new Error('Response was not OK');
+        }
+
+        return response.json();
+    })
     .then(json => {
         console.log(json);
     })
-});
+    .catch(error => {
+        console.error('Could not start the session:', error);
+    });
+}
 
-contact_form.addEventListener('submit', function(event) {
+function wtf_submitContactForm(event) {
     event.preventDefault();
+
+    const subject = document.getElementsByClassName('contact_form__subject')[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];
+
     let formData = new FormData();
     formData.append('action', 'handle_form');
     formData.append('subject', subject.value);
@@ -39,13 +55,14 @@ contact_form.addEventListener('submit', function(event) {
         return;
     }
 
-    fetch(ajaxUrl, {
+    fetch(contactFormAjaxUrl, {
         method: 'POST',
         mode: 'same-origin',
         body: formData,
     })
     .then(response => response.json())
     .then(json => {
+        const feedback = document.getElementsByClassName('contact_form__feedback')[0];
         console.log(json);
         if (json.errors) {
             feedback.classList.remove('--success');
@@ -75,4 +92,4 @@ contact_form.addEventListener('submit', function(event) {
         }
     })
     .catch(error => console.log(error));
-}, false);
+}

assets/js/contact_form_toggle.js

@@ -1,5 +1,7 @@
 /* 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');
+    if (contact_form_wrapper) {
+        contact_form_wrapper.style.setProperty('display', 'block');
+    }
 });

assets/php/contact_form.php

@@ -6,17 +6,16 @@ function sanitize_text(string $name, string $type) {
         'text' => FILTER_SANITIZE_SPECIAL_CHARS,
         'email' => FILTER_SANITIZE_EMAIL,
     );
-    $text = trim($text);
-    $text = filter_var($_POST[$name], $filters[$type]);
+    $text = filter_var(trim($_POST[$name]), $filters[$type]);
     $text = stripslashes($text);
 
     return $text;
 }
 
-function prepare_message_body($message) {
+function prepare_message_body(string $message, string $name) {
     // Replace HTML-Entities with actual carriage returns and line feeds
     $message = str_replace("
", "\r", $message);
-    $message = str_replace("
", "\r", $message);
+    $message = str_replace("
", "\n", $message);
 
     // Ensure line breaks via carriage return + line feed
     $message = str_replace("\r\n", "\n", $message);
@@ -34,22 +33,30 @@ function prepare_message_body($message) {
  *  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($subject, $message, $name, $email) {
+function send_message_to_office(string $subject, string $message, string $name, string $email) {
+    $returnPath = filter_var(getenv('WTF_RETURN_PATH'), FILTER_VALIDATE_EMAIL);
+    $to = filter_var(getenv('WTF_CONTACT_TO'), FILTER_VALIDATE_EMAIL);
+
+    if (!$returnPath || !$to) {
+        error_log('Address for "To" or "Return-Path" is invalid');
+        return false;
+    }
+
     return mail(
-        getenv('WTF_CONTACT_TO'),
+        $to,
         "=?UTF-8?B?" . base64_encode($subject) . "?=",
-        prepare_message_body($message),
-        $additional_headers = array(
+        prepare_message_body($message, $name),
+        array(
             "From" => getenv('WTF_CONTACT_FROM'),
             "Reply-To" => $email,
-            "Return-Path" => getenv('WTF_RETURN_PATH'),
             "Content-Type" => "text/plain; charset=utf-8",
             "Content-Transfer-Encoding" => "base64",
         ),
+        "-f $returnPath"
     );
 }
 
-function send_response($response_data) {
+function send_response(array $response_data) {
     $json = json_encode($response_data);
     if ($json === false) {
         // Avoid echo of empty string (which is invalid JSON), and

templates/layout.html

@@ -63,7 +63,7 @@ __        ____________________
   {% if 'manifest.json'|asseturl is defined -%}
     <link rel="manifest" href="{{ 'manifest.json'|asseturl }}">
   {%- endif %}
-  {% if '/js/contact_form_toggle.js'|asseturl is defined -%}
+  {% if '/js/contact_form_toggle.js'|asseturl is defined and this.title == 'Kontakt' -%}
     <script type="text/javascript" src="{{ '/js/contact_form_toggle.js'|asseturl }}"></script>
   {%- endif %}
 </head>
@@ -131,7 +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 -%}
+    {% if '/js/contact_form_toggle.js'|asseturl is defined and this.title == 'Kontakt' -%}
       <script type="text/javascript" src="{{ '/js/contact_form.js'|asseturl }}"></script>
     {%- endif %}
 </body>