Loader

Reviewed-on: #59

.idea/dataSources.local.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
-  <component name="dataSourceStorageLocal" created-in="IU-261.25134.95">
+  <component name="dataSourceStorageLocal" created-in="IU-253.32098.101">
     <data-source name="articles" uuid="315cb5c9-2b0f-435b-b602-59823b160908">
       <database-info product="SQLite" version="3.51.1" jdbc-version="4.2" driver-name="SQLite JDBC" driver-version="3.51.1.0" dbms="SQLITE" exact-version="3.51.1" exact-driver-version="3.51">
         <identifier-quote-string>&quot;</identifier-quote-string>

content/createArticle.php

@@ -27,8 +27,6 @@ $blocks = array_values($blocks); // sequentielle Indizes 0..n-1 sicherstellen
 -->
 <form method="post" action="php/controller/createArticle-controller.php" id="editor-form" enctype="multipart/form-data" class="article-editor-scope.editor-container article-editor-scope editor-container">
 
-    <?php csrf_field(); ?>
-
     <main class="editor-main">
         <?php include_once "includes/alertMessages.php"?>
 

content/profile.php

@@ -18,8 +18,6 @@ $isEditMode = (isset($_GET["edit"]) && $_GET["edit"] === "1") || !empty($error);
 
             <form method="post" action="index.php?pfad=profile">
 
-                <?php csrf_field(); ?>
-
                 <label class="input-label">Vorname</label>
                 <input type="text"
                        name="vorname"
@@ -84,7 +82,6 @@ $isEditMode = (isset($_GET["edit"]) && $_GET["edit"] === "1") || !empty($error);
             <br>
 
             <form action="php/controller/deleteAccount-controller.php" method="POST">
-                <?php csrf_field(); ?>
                 <button type="submit"
                         class="button"
                         onclick="return confirm('Möchtest du deinen Account und alle deine Beiträge wirklich unwiderruflich löschen?');">
@@ -158,7 +155,6 @@ $isEditMode = (isset($_GET["edit"]) && $_GET["edit"] === "1") || !empty($error);
                             </a>
 
                             <form action="php/controller/deleteArticle-controller.php" method="POST">
-                                <?php csrf_field(); ?>
                                 <input type="hidden"
                                        name="id"
                                        value="<?php echo htmlspecialchars($userArticle->getID()); ?>">

content/search-results.php

@@ -137,6 +137,17 @@ $categories = [
             <p class="s-res-meta"><span id="s-res-result-count"><?php echo $totalResultsCount; ?></span> Treffer für Ihre Suchanfrage "<?php echo htmlspecialchars($query); ?>"</p>
         </div>
 
+        <p
+                id="results-loading"
+                class="results-loading"
+                role="status"
+                aria-live="polite"
+                hidden
+        >
+            <span class="results-spinner" aria-hidden="true"></span>
+            Suchergebnisse werden geladen …
+        </p>
+
         <!-- Ergebnisliste -->
         <div class="s-res-list">
             <?php if (!empty($results)): ?>

content/showArticle.php

@@ -45,31 +45,26 @@ if ($replyAuthor === null) {
     <!-- Metadaten & Titel -->
     <div class="article-view-top-section">
 
-        <div class="category-and-likes-row">
+            <div class="category-and-likes-row">
-            <?php if (isset($category) && !empty($category)): ?>
+                <?php if (isset($category) && !empty($category)): ?>
-                <span class="article-view-category"><?php echo htmlspecialchars($category); ?></span>
+                    <span class="article-view-category"><?php echo htmlspecialchars($category); ?></span>
-            <?php endif; ?>
+                <?php endif; ?>
 
-            <!-- Like-Anzeige und dynamischer Like-Button  -->
+                <!-- Like-Anzeige und dynamischer Like-Button  -->
-            <?php if (isset($articleObj) && $articleObj !== null): ?>
+                <?php if (isset($articleObj) && $articleObj !== null): ?>
-                <div class="article-view-likes">
+                    <div class="article-view-likes">
-                    <span>❤️ <span class="like-count"><?php echo $articleObj->getLikeCount(); ?></span></span>
+                        <span>❤️ <span class="like-count"><?php echo $articleObj->getLikeCount(); ?></span></span>
 
-                    <?php if (isset($_SESSION["user_email"])): ?>
+                        <?php if (isset($_SESSION["user_email"])): ?>
-                        <form method="post"
+                            <a href="php/controller/like-controller.php?id=<?php echo $articleObj->getId(); ?>" class="like-toggle-btn">
-                              action="php/controller/like-controller.php?id=<?php echo $articleObj->getId(); ?>"
-                              class="like-toggle-form">
-                            <?php csrf_field(); ?>
-                            <button type="submit" class="like-toggle-btn">
                                 <?php echo $articleObj->hasLiked($_SESSION["user_email"]) ? '👎 Gefällt mir nicht mehr' : '👍 Gefällt mir'; ?>
-                            </button>
+                            </a>
-                        </form>
+                        <?php else: ?>
-                    <?php else: ?>
+                            <span class="login-hint">(Anmelden zum Liken)</span>
-                        <span class="login-hint">(Anmelden zum Liken)</span>
+                        <?php endif; ?>
-                    <?php endif; ?>
+                    </div>
-                </div>
+                <?php endif; ?>
-            <?php endif; ?>
+            </div>
-        </div>
 
         <h1 class="article-view-title">
             <?php if (isset($title)) { echo htmlspecialchars($title); } ?>
@@ -207,8 +202,6 @@ if ($replyAuthor === null) {
                                           action="index.php?pfad=updateComment"
                                           class="edit-comment-form">
 
-                                        <?php csrf_field(); ?>
-
                                         <input type="hidden"
                                                name="comment_id"
                                                value="<?php echo htmlspecialchars(
@@ -246,8 +239,6 @@ if ($replyAuthor === null) {
                                       action="index.php?pfad=deleteComment"
                                       class="delete-comment-form">
 
-                                    <?php csrf_field(); ?>
-
                                     <input type="hidden"
                                            name="comment_id"
                                            value="<?php echo htmlspecialchars(
@@ -343,8 +334,6 @@ if ($replyAuthor === null) {
                                                           action="index.php?pfad=updateComment"
                                                           class="edit-comment-form">
 
-                                                        <?php csrf_field(); ?>
-
                                                         <input type="hidden"
                                                                name="comment_id"
                                                                value="<?php echo htmlspecialchars(
@@ -382,8 +371,6 @@ if ($replyAuthor === null) {
                                                       action="index.php?pfad=deleteComment"
                                                       class="delete-comment-form">
 
-                                                    <?php csrf_field(); ?>
-
                                                     <input type="hidden"
                                                            name="comment_id"
                                                            value="<?php echo htmlspecialchars(
@@ -425,8 +412,6 @@ if ($replyAuthor === null) {
                   method="post"
                   action="php/ajax/add-comment.php">
 
-                <?php csrf_field(); ?>
-
                 <input type="hidden"
                        name="article_id"
                        value="<?php echo htmlspecialchars(
@@ -472,6 +457,18 @@ if ($replyAuthor === null) {
                 <button type="submit" class="button">
                     Kommentar senden
                 </button>
+
+                <p
+                        id="comment-loading"
+                        class="comment-loading"
+                        role="status"
+                        aria-live="polite"
+                        hidden
+                >
+                    <span class="comment-spinner" aria-hidden="true"></span>
+                    Kommentar wird gesendet …
+                </p>
+
             </form>
         <?php else: ?>
             <div class="comment-login-hint">
@@ -480,4 +477,4 @@ if ($replyAuthor === null) {
             </div>
         <?php endif; ?>
     </section>
-</main>
+</main>

content/showCategory.php

@@ -113,6 +113,17 @@ $resultCount = count($results);
             </p>
         </div>
 
+        <p
+                id="results-loading"
+                class="results-loading"
+                role="status"
+                aria-live="polite"
+                hidden
+        >
+            <span class="results-spinner" aria-hidden="true"></span>
+            Kategoriebeiträge werden geladen …
+        </p>
+
         <!-- Ergebnisliste -->
         <div class="s-res-list">
             <?php if (!empty($results)): ?>

content/updateArticle.php

@@ -27,8 +27,6 @@ $blocks = array_values($blocks);
 -->
 <form method="post" action="php/controller/updateArticle-controller.php?id=<?php if(isset($id) && !empty($id)){echo htmlspecialchars($id);}else{$_SESSION["message"] = "missing_id";} ?>" id="editor-form" enctype="multipart/form-data" class="article-editor-scope.editor-container article-editor-scope editor-container">
 
-    <?php csrf_field(); ?>
-
     <main class="editor-main">
         <?php include_once "includes/alertMessages.php"?>
 

css/main.css

@@ -225,4 +225,34 @@ h1 {
     text-align: center;
     text-decoration: none;
     box-sizing: border-box;
+}
+.comment-loading {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-top: 10px;
+}
+
+.comment-loading[hidden] {
+    display: none;
+}
+
+.comment-spinner {
+    width: 16px;
+    height: 16px;
+    border: 2px solid #cbd5e1;
+    border-top-color: #1f2937;
+    border-radius: 50%;
+    animation: comment-spinner-rotation 0.8s linear infinite;
+}
+
+@keyframes comment-spinner-rotation {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+#comment-form button[type="submit"]:disabled {
+    cursor: wait;
+    opacity: 0.65;
 }

css/navbar.css

@@ -250,7 +250,7 @@ CSS für die navbar
         padding: 2rem 1rem;
         box-shadow: 2px 0 10px rgba(0,0,0,0.5);
         overflow-y: auto;
-
+        
         /* Genug Abstand oben rechts, damit Links nicht hinter dem X liegen */
         padding: 4rem 1.5rem 2rem 1.5rem;
     }
@@ -285,32 +285,6 @@ CSS für die navbar
         border-bottom: 1px solid #333d43;
     }
 
-    .nav__logout-form {
-        display: contents;
-        margin: 0;
-    }
-
-    .nav__logout-form .nav__button {
-        width: 100%;
-        height: 100%;
-    }
-
-    .nav__mobile-logout-button {
-        color: #fff;
-        text-decoration: none;
-        font-size: 1.2rem;
-        font-weight: 600;
-        display: block;
-        width: 100%;
-        text-align: left;
-        padding: 0.5rem 1rem;
-        border: none;
-        border-bottom: 1px solid #333d43;
-        background: none;
-        cursor: pointer;
-        font-family: inherit;
-    }
-
     .nav__mobile-submenu {
         display: block;
         list-style: none;

css/search-results.css

@@ -271,4 +271,33 @@ CSS für die Suchergebnis-Seite
         align-items: flex-start;
     }
 }
+/* Ladeanzeige beim Nachladen von Such- und Kategorieergebnissen */
+.results-loading {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin: 15px 0;
+    color: #4a5568;
+    font-size: 0.95rem;
+}
+
+.results-loading[hidden] {
+    display: none;
+}
+
+.results-spinner {
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+    border: 2px solid #cbd5e1;
+    border-top-color: #3182ce;
+    border-radius: 50%;
+    animation: results-spinner-rotation 0.8s linear infinite;
+}
+
+@keyframes results-spinner-rotation {
+    to {
+        transform: rotate(360deg);
+    }
+}
 

includes/alertMessages.php

@@ -89,12 +89,6 @@
         Es ist ein Datenbankfehler aufgetreten. Bitte versuche es erneut.
     </p>
 <?php endif; ?>
-<?php if (isset($_SESSION["message"]) && $_SESSION["message"] == "invalid_csrf_token"): ?>
-    <p class="alert-message is-error">
-        Deine Sitzung ist abgelaufen oder die Anfrage konnte nicht überprüft werden.
-        Bitte lade die Seite neu und versuche es erneut.
-    </p>
-<?php endif; ?>
 <?php
 unset($_SESSION["message"]);
-?>
+?>

includes/csrf.php

@@ -1,88 +0,0 @@
-<?php
-/**
- * CSRF-Schutz nach dem Synchronizer-Token-Pattern.
- *
- * Pro Session wird ein einziges, zufälliges Token erzeugt,
- * das in jedem Formular als verstecktes Feld mitgeschickt und bei jeder
- * zustandsändernden Anfrage serverseitig mit dem Session-Token verglichen
- * wird.
- *
- * @author Niklas Ortmann
- */
-
-if (session_status() === PHP_SESSION_NONE) {
-    session_start();
-}
-
-/**
- * Gibt das aktuelle CSRF-Token der Session zurück.
- *
- * Existiert noch kein Token, wird eines erzeugt und in der Session
- * gespeichert.
- *
- * @return string Das CSRF-Token
- */
-function csrf_token(): string
-{
-    if (empty($_SESSION["csrf_token"]) || !is_string($_SESSION["csrf_token"])) {
-        $_SESSION["csrf_token"] = bin2hex(random_bytes(32));
-    }
-
-    return $_SESSION["csrf_token"];
-}
-
-/**
- * Gibt ein verstecktes Formularfeld mit dem aktuellen CSRF-Token aus.
- *
- * Wird in jedem Formular benötigt, das eine zustandsändernde
- * Aktion auslöst.
- *
- * @return void
- */
-function csrf_field(): void
-{
-    echo '<input type="hidden" name="csrf_token" value="'
-        . htmlspecialchars(csrf_token())
-        . '">';
-}
-
-/**
- * Prüft, ob das per POST gesendete CSRF-Token zum Session-Token passt.
- *
- * Der Vergleich erfolgt zeitkonstant über hash_equals(), um
- * Timing-Angriffe auf den Vergleich selbst auszuschließen.
- *
- * @return bool true, wenn das Token gültig ist
- */
-function csrf_verify(): bool
-{
-    $sentToken = $_POST["csrf_token"] ?? "";
-    $sessionToken = $_SESSION["csrf_token"] ?? "";
-
-    if (!is_string($sentToken) || $sentToken === "" || $sessionToken === "") {
-        return false;
-    }
-
-    return hash_equals($sessionToken, $sentToken);
-}
-
-/**
- * Bricht die Anfrage ab und leitet mit einer Fehlermeldung um,
- * wenn das mitgesendete CSRF-Token ungültig oder nicht vorhanden ist.
- *
- * Muss am Anfang jeder zustandsändernden POST-Aktion aufgerufen werden,
- * bevor irgendeine Änderung an Daten vorgenommen wird.
- *
- * @param string $redirectTo Ziel-URL, zu der bei ungültigem Token
- *                           weitergeleitet wird
- * @return void
- */
-function csrf_require_valid(string $redirectTo = "index.php"): void
-{
-    if (!csrf_verify()) {
-        http_response_code(403);
-        $_SESSION["message"] = "invalid_csrf_token";
-        header("Location: " . $redirectTo);
-        exit();
-    }
-}

includes/navbar.php

@@ -179,4 +179,4 @@ Globales Menü, wird via PHP später in alle Seiten eingebunden
         <?php endif; ?>
 
     </div>
-</nav>
+</nav>

index.php

@@ -2,7 +2,6 @@
 if (session_status() === PHP_SESSION_NONE) {
     session_start();
 }
-include_once "includes/csrf.php";
 include_once "php/controller/index-controller.php";
 ?>
 <!DOCTYPE html>
@@ -36,7 +35,6 @@ include_once "php/controller/index-controller.php";
 
 <?php
 include_once 'includes/navbar.php';
-include_once "includes/alertMessages.php";
 
 // Dynamischer Inhalt
 if (isset($pfad) && $pfad !== "404" && file_exists('content/' . $pfad . '.php')) {

js/comments.js

@@ -11,7 +11,19 @@ document.addEventListener("DOMContentLoaded", function () {
     const parentCommentInput = document.getElementById("parent-comment-id");
     const replyInfo = document.getElementById("reply-info");
 
-    if (!form || !commentsList || !commentContent || !parentCommentInput) {
+    const submitButton = form
+        ? form.querySelector('button[type="submit"]')
+        : null;
+
+    const loadingMessage = document.getElementById("comment-loading");
+
+    if (
+        !form
+        || !commentsList
+        || !commentContent
+        || !parentCommentInput
+        || !submitButton
+    ) {
         return;
     }
 
@@ -53,6 +65,23 @@ document.addEventListener("DOMContentLoaded", function () {
     form.addEventListener("submit", function (event) {
         event.preventDefault();
 
+        /*
+         * Verhindert einen erneuten Submit, während der vorherige
+         * Kommentar noch gespeichert wird.
+         */
+        if (submitButton.disabled) {
+            return;
+        }
+
+        const originalButtonText = submitButton.textContent;
+
+        submitButton.disabled = true;
+        submitButton.textContent = "Wird gesendet …";
+
+        if (loadingMessage) {
+            loadingMessage.hidden = false;
+        }
+
         const formData = new FormData(form);
         const parentCommentId = parentCommentInput.value;
 
@@ -109,12 +138,6 @@ document.addEventListener("DOMContentLoaded", function () {
         action="index.php?pfad=updateComment"
         class="edit-comment-form"
     >
-        <input
-            type="hidden"
-            name="csrf_token"
-            value="${escapeHtml(formData.get("csrf_token"))}"
-        >
-
         <input
             type="hidden"
             name="comment_id"
@@ -143,12 +166,6 @@ document.addEventListener("DOMContentLoaded", function () {
             action="index.php?pfad=deleteComment"
             class="delete-comment-form"
         >
-            <input
-                type="hidden"
-                name="csrf_token"
-                value="${escapeHtml(formData.get("csrf_token"))}"
-            >
-
             <input
                 type="hidden"
                 name="comment_id"
@@ -199,12 +216,6 @@ document.addEventListener("DOMContentLoaded", function () {
         action="index.php?pfad=updateComment"
         class="edit-comment-form"
     >
-        <input
-            type="hidden"
-            name="csrf_token"
-            value="${escapeHtml(formData.get("csrf_token"))}"
-        >
-
         <input
             type="hidden"
             name="comment_id"
@@ -233,12 +244,6 @@ document.addEventListener("DOMContentLoaded", function () {
             action="index.php?pfad=deleteComment"
             class="delete-comment-form"
         >
-            <input
-                type="hidden"
-                name="csrf_token"
-                value="${escapeHtml(formData.get("csrf_token"))}"
-            >
-
             <input
                 type="hidden"
                 name="comment_id"
@@ -293,6 +298,14 @@ document.addEventListener("DOMContentLoaded", function () {
             .catch(function (error) {
                 console.error(error);
                 alert("Kommentar konnte nicht gesendet werden.");
+            })
+            .finally(function () {
+                submitButton.disabled = false;
+                submitButton.textContent = originalButtonText;
+
+                if (loadingMessage) {
+                    loadingMessage.hidden = true;
+                }
             });
     });
 

js/search-results.js

@@ -25,6 +25,7 @@
 
     let listContainer, sortRadios, categorySelect, limitSelect;
     let prevBtn, nextBtn, numbersContainer, jsNav, resultCountEl;
+    let loadingElement;
 
     function init() {
         listContainer = document.querySelector('.s-res-list');
@@ -38,23 +39,41 @@
         numbersContainer = document.getElementById('dynamic-page-numbers');
         jsNav = document.getElementById('js-page-navigation');
         resultCountEl = document.getElementById('s-res-result-count');
+        loadingElement = document.getElementById('results-loading');
 
         const checkedRadio = document.querySelector('.sort-radio:checked');
         state.sort = checkedRadio ? checkedRadio.value : 'alphabet';
         state.category = categorySelect ? categorySelect.value : 'all';
         state.itemsPerPage = limitSelect ? (parseInt(limitSelect.value, 10) || 10) : 10;
 
+        if (loadingElement) {
+            loadingElement.hidden = false;
+        }
+
         fetchFullDataset()
             .then(function (data) {
                 state.allItems = data.results || [];
                 attachEvents();
                 render();
-                if (jsNav) jsNav.style.display = 'flex';
+
+                if (jsNav) {
+                    jsNav.style.display = 'flex';
+                }
             })
             .catch(function (err) {
-                // JSON-Endpoint nicht erreichbar: die serverseitig gerenderte
+                /*
-                // (No-JS-)Ansicht bleibt sichtbar und funktioniert weiter.
+                 * Falls das Nachladen nicht funktioniert, bleibt die bereits
-                console.error('Suchergebnisse konnten nicht nachgeladen werden:', err);
+                 * serverseitig ausgegebene Ergebnisliste sichtbar.
+                 */
+                console.error(
+                    'Suchergebnisse konnten nicht nachgeladen werden:',
+                    err
+                );
+            })
+            .finally(function () {
+                if (loadingElement) {
+                    loadingElement.hidden = true;
+                }
             });
     }
 

js/showCategory.js

@@ -21,6 +21,7 @@
 
     let listContainer, sortRadios, searchInput, limitSelect;
     let prevBtn, nextBtn, numbersContainer, jsNav, resultCountEl;
+    let loadingElement;
     let searchDebounceTimer;
 
     function init() {
@@ -35,23 +36,41 @@
         numbersContainer = document.getElementById('dynamic-page-numbers');
         jsNav = document.getElementById('js-page-navigation');
         resultCountEl = document.getElementById('s-res-result-count');
+        loadingElement = document.getElementById('results-loading');
 
         const checkedRadio = document.querySelector('.sort-radio:checked');
         state.sort = checkedRadio ? checkedRadio.value : 'alphabet';
         state.query = searchInput ? searchInput.value : '';
         state.itemsPerPage = limitSelect ? (parseInt(limitSelect.value, 10) || 10) : 10;
 
+        if (loadingElement) {
+            loadingElement.hidden = false;
+        }
+
         fetchFullDataset()
             .then(function (data) {
                 state.allItems = data.results || [];
                 attachEvents();
                 render();
-                if (jsNav) jsNav.style.display = 'flex';
+
+                if (jsNav) {
+                    jsNav.style.display = 'flex';
+                }
             })
             .catch(function (err) {
-                // JSON-Endpoint nicht erreichbar: die serverseitig gerenderte
+                /*
-                // (No-JS-)Ansicht bleibt sichtbar und funktioniert weiter.
+                 * Falls das Nachladen nicht funktioniert, bleibt die bereits
-                console.error('Kategorie-Beiträge konnten nicht nachgeladen werden:', err);
+                 * serverseitig ausgegebene Kategorieansicht sichtbar.
+                 */
+                console.error(
+                    'Kategorie-Beiträge konnten nicht nachgeladen werden:',
+                    err
+                );
+            })
+            .finally(function () {
+                if (loadingElement) {
+                    loadingElement.hidden = true;
+                }
             });
     }
 

php/controller/logout-controller.php

@@ -1,10 +1,6 @@
 <?php
-if (session_status() === PHP_SESSION_NONE) {
-    session_start();
-}
-
 $_SESSION = [];
 session_destroy();
 
-header("Location: ../../index.php");
+header("Location: index.php");
 exit();

php/model/DatabaseArticleManager.php

@@ -310,21 +310,20 @@ class DatabaseArticleManager implements ArticleManagerDAO {
 
         try {
             $db = $this->getConnection();
-
+            
             $sql = "SELECT id, title, content, author, category, tags, created 
-                    FROM articles 
+                FROM articles 
-                    WHERE title LIKE :keyword 
+                WHERE title LIKE :keyword 
-                       OR content LIKE :keyword
+                OR content LIKE :keyword
-                       OR tags LIKE :keyword";
+                OR tags LIKE :keyword;";
 
             $command = $db->prepare($sql);
             if (!$command) {
                 throw new InternalServerErrorException("internal_error");
             }
 
-            // Wildcards für die Suche hinzufügen
+            // Wildcards für die SQL-Suche hinzufügen
             $searchParam = '%' . $cleankeyword . '%';
-
             $success = $command->execute([
                 ":keyword" => $searchParam
             ]);
@@ -337,10 +336,11 @@ class DatabaseArticleManager implements ArticleManagerDAO {
             $filteredArticles = [];
 
             foreach ($rows as $row) {
-                $likes = $this->getLikesForArticle(intval($row['id']));
+                $articleId = intval($row['id']);
+                $likes = $this->getLikesForArticle($articleId);
 
                 $filteredArticles[] = new Article(
-                    intval($row['id']),
+                    $articleId,
                     $row['title'] ?? '',
                     $row['content'] ?? '',
                     $row['author'] ?? '',
@@ -358,6 +358,7 @@ class DatabaseArticleManager implements ArticleManagerDAO {
         }
     }
 
+
     /**
      * Holt alle User-IDs, die einen bestimmten Beitrag geliked haben.
      *