Email aus Kommentar entfernen

content/search-results.php

@@ -137,17 +137,6 @@ $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

@@ -5,6 +5,30 @@ $repliesByParent = [];
 $articleObj = null;
 
 include_once 'php/controller/showArticle-controller.php';
+require_once 'php/model/UserManager.php';
+
+$userManager = UserManager::getInstance();
+
+/**
+ * Liefert den vollständigen Namen zu einer gespeicherten E-Mail-Adresse.
+ * Falls kein Benutzer gefunden wird, wird die E-Mail als Ersatz angezeigt.
+ */
+function getCommentAuthorName($email, $userManager)
+{
+    $email = trim($email);
+    $user = $userManager->findUser($email);
+
+    if ($user === null) {
+        return $email;
+    }
+
+    $vorname = trim($user["vorname"] ?? "");
+    $nachname = trim($user["nachname"] ?? "");
+
+    $fullName = trim($vorname . " " . $nachname);
+
+    return $fullName !== "" ? $fullName : $email;
+}
 /*
  * Ermittelt, ob ohne JavaScript auf einen Kommentar
  * geantwortet werden soll.
@@ -173,7 +197,14 @@ if ($replyAuthor === null) {
 
                             <p>
                                 <strong>
-                                    <?php echo htmlspecialchars($comment->getAuthor()); ?>
+                                    <?php
+                                    echo htmlspecialchars(
+                                            getCommentAuthorName(
+                                                    $comment->getAuthor(),
+                                                    $userManager
+                                            )
+                                    );
+                                    ?>
                                 </strong>
 
                                 <span>
@@ -304,7 +335,14 @@ if ($replyAuthor === null) {
 
                                             <p>
                                                 <strong>
-                                                    <?php echo htmlspecialchars($reply->getAuthor()); ?>
+                                                    <?php
+                                                    echo htmlspecialchars(
+                                                            getCommentAuthorName(
+                                                                    $reply->getAuthor(),
+                                                                    $userManager
+                                                            )
+                                                    );
+                                                    ?>
                                                 </strong>
 
                                                 <span>
@@ -457,18 +495,6 @@ 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">

content/showCategory.php

@@ -113,17 +113,6 @@ $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)): ?>

css/main.css

@@ -154,21 +154,32 @@ h1 {
 
 .button {
     width: 100%;
-    padding: 12px;
+    padding: 14px;
     background-color: #2563eb;
     color: white;
-    border: none;
+    border: 2px solid transparent;
     border-radius: 8px;
     font-size: 1rem;
     font-weight: bold;
     cursor: pointer;
-    transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s;
+    transition:
+            background-color 0.2s ease,
+            transform 0.2s ease,
+            box-shadow 0.2s ease,
+            border-color 0.2s ease;
 }
 
 .button:hover {
+    background-color: #1e40af;
+    border-color: #93c5fd;
+    transform: translateY(-3px) scale(1.01);
+    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.35);
+}
+
+.button:active {
     background-color: #1d4ed8;
-    transform: translateY(-2px);
+    transform: translateY(1px) scale(0.99);
-    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
+    box-shadow: 0 2px 5px rgba(37, 99, 235, 0.25);
 }
 
 .register-link {
@@ -226,33 +237,181 @@ h1 {
     text-decoration: none;
     box-sizing: border-box;
 }
-.comment-loading {
+
-    display: flex;
+/* Deutlichere Klickreaktion für Kategorien */
-    align-items: center;
+.category-link:active {
-    gap: 8px;
+    transform: translateY(1px);
-    margin-top: 10px;
+    box-shadow: none;
 }
 
-.comment-loading[hidden] {
+/* Sichtbare Tastatur-Markierung */
+.button:focus-visible,
+.category-link:focus-visible,
+.article-link a:focus-visible,
+.register-link a:focus-visible {
+    outline: 3px solid #fbbf24;
+    outline-offset: 3px;
+}
+/* Kommentarbereich */
+
+#comments-list {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    margin-bottom: 40px;
+}
+
+#comments-list > div,
+.comment {
+    background-color: #ffffff;
+    border: 1px solid #dbe3ec;
+    border-radius: 12px;
+    padding: 24px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
+    transition:
+            transform 0.2s ease,
+            box-shadow 0.2s ease,
+            border-color 0.2s ease;
+}
+
+#comments-list > div:hover,
+.comment:hover {
+    transform: translateY(-3px);
+    border-color: #93c5fd;
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
+}
+
+#comments-list textarea,
+#comment-content {
+    width: 100%;
+    box-sizing: border-box;
+    padding: 14px;
+    border: 1px solid #cbd5e1;
+    border-radius: 8px;
+    font-size: 1rem;
+    resize: vertical;
+    transition:
+            border-color 0.2s ease,
+            box-shadow 0.2s ease;
+}
+
+#comments-list textarea:focus,
+#comment-content:focus {
+    outline: none;
+    border-color: #2563eb;
+    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.18);
+}
+
+#comments-list a {
+    color: #2563eb;
+    font-weight: bold;
+    text-decoration: none;
+    border-radius: 4px;
+    transition:
+            color 0.2s ease,
+            background-color 0.2s ease;
+}
+
+#comments-list a:hover {
+    color: #1e40af;
+    background-color: #dbeafe;
+    text-decoration: underline;
+}
+
+#comments-list button {
+    cursor: pointer;
+}
+.delete-comment-button {
+     display: inline-block;
+     background: #ffffff;
+     color: #dc2626;
+     border: 2px solid #dc2626;
+     border-radius: 8px;
+     padding: 10px 18px;
+     font-size: 0.95rem;
+     font-weight: 600;
+     cursor: pointer;
+     transition:
+             background-color 0.25s ease,
+             color 0.25s ease,
+             transform 0.2s ease,
+             box-shadow 0.2s ease;
+ }
+
+.delete-comment-button:hover {
+    background: #dc2626;
+    color: #ffffff;
+    transform: translateY(-2px);
+    box-shadow: 0 6px 14px rgba(220,38,38,0.25);
+}
+
+.delete-comment-button:active {
+    transform: translateY(1px);
+    box-shadow: none;
+}
+.delete-comment-form {
+    margin-top: 12px;
+    margin-bottom: 12px;
+}
+/* Button zum Öffnen der Kommentarbearbeitung */
+.edit-comment-button {
+    display: inline-block;
+    width: auto;
+    padding: 10px 18px;
+    background-color: #2563eb;
+    color: #ffffff;
+    border: 2px solid #2563eb;
+    border-radius: 8px;
+    font-size: 0.95rem;
+    font-weight: 600;
+    cursor: pointer;
+    list-style: none;
+    transition:
+            background-color 0.2s ease,
+            border-color 0.2s ease,
+            transform 0.2s ease,
+            box-shadow 0.2s ease;
+}
+
+/* Entfernt das normale Dreieck in einigen Browsern */
+.edit-comment-button::-webkit-details-marker {
     display: none;
 }
 
-.comment-spinner {
+/* Eigenes Symbol vor dem Text */
-    width: 16px;
+.edit-comment-button::before {
-    height: 16px;
+    content: "✏ ";
-    border: 2px solid #cbd5e1;
-    border-top-color: #1f2937;
-    border-radius: 50%;
-    animation: comment-spinner-rotation 0.8s linear infinite;
 }
 
-@keyframes comment-spinner-rotation {
+.edit-comment-button:hover {
-    to {
+    background-color: #1e40af;
-        transform: rotate(360deg);
+    border-color: #1e40af;
-    }
+    transform: translateY(-2px);
+    box-shadow: 0 5px 12px rgba(37, 99, 235, 0.3);
 }
 
-#comment-form button[type="submit"]:disabled {
+.edit-comment-button:active {
-    cursor: wait;
+    transform: translateY(1px);
-    opacity: 0.65;
+    box-shadow: none;
+}
+
+.edit-comment-button:focus-visible {
+    outline: 3px solid #fbbf24;
+    outline-offset: 3px;
+}
+
+/* Abstand zwischen Bearbeiten und Löschen */
+.edit-comment-details {
+    margin-bottom: 12px;
+}
+
+/* Geöffneter Bearbeitungsbereich */
+.edit-comment-details[open] .edit-comment-button {
+    margin-bottom: 12px;
+    background-color: #1e40af;
+}
+
+/* Geändertes Symbol, wenn der Bereich geöffnet ist */
+.edit-comment-details[open] .edit-comment-button::before {
+    content: "▲ ";
 }

css/navbar.css

@@ -248,7 +248,7 @@ CSS für die navbar
         z-index: 1000;
         transition: left 0.3s ease;
         padding: 2rem 1rem;
-        box-shadow: 2px 0 10px rgba(0,0,0,0.5);
+        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 */
@@ -302,5 +302,89 @@ CSS für die navbar
         padding: 0.8rem 1rem;
         cursor: pointer;
     }
-
 }
+    /* Deutlichere Hover-Effekte für die Navigation */
+
+    .nav__dropdown-toggle,
+    .nav__link {
+        border-radius: 6px;
+        transition:
+                background-color 0.2s ease,
+                color 0.2s ease,
+                transform 0.2s ease;
+    }
+
+    .nav__dropdown-toggle:hover,
+    .nav__link:hover {
+        background-color: #ffffff;
+        color: #1d4ed8;
+        transform: translateY(-2px);
+    }
+
+    /* Sichtbare Reaktion beim Anklicken */
+    .nav__dropdown-toggle:active,
+    .nav__link:active {
+        transform: translateY(1px);
+    }
+
+    /* Deutlichere Effekte für Anmelden, Registrieren usw. */
+    .nav__button {
+        transition:
+                background-color 0.2s ease,
+                color 0.2s ease,
+                transform 0.2s ease,
+                box-shadow 0.2s ease;
+    }
+
+    .nav__button:hover {
+        background-color: #2563eb;
+        color: #ffffff;
+        transform: translateY(-2px);
+        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
+    }
+
+    .nav__button:active {
+        transform: translateY(1px);
+        box-shadow: none;
+    }
+
+    /* Deutlichere Hervorhebung der Einträge im Dropdown-Menü */
+    .nav__dropdown-menu a {
+        display: block;
+        transition:
+                background-color 0.2s ease,
+                color 0.2s ease,
+                padding-left 0.2s ease;
+    }
+
+    .nav__dropdown-menu a:hover {
+        background-color: #dbeafe;
+        color: #1d4ed8;
+        padding-left: 1.4rem;
+    }
+
+    /* Effekt für den Suchbutton */
+    .nav__search-button {
+        transition:
+                background-color 0.2s ease,
+                color 0.2s ease,
+                transform 0.2s ease;
+    }
+
+    .nav__search-button:hover {
+        background-color: #2563eb;
+        color: #ffffff;
+    }
+
+    .nav__search-button:active {
+        transform: scale(0.95);
+    }
+
+    /* Sichtbare Markierung bei Tastaturbedienung */
+    .nav a:focus-visible,
+    .nav button:focus-visible,
+    .nav input:focus-visible,
+    .nav label:focus-visible {
+        outline: 3px solid #fbbf24;
+        outline-offset: 3px;
+    }

css/search-results.css

@@ -271,33 +271,4 @@ 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);
-    }
-}
 

js/comments.js

@@ -11,19 +11,7 @@ document.addEventListener("DOMContentLoaded", function () {
     const parentCommentInput = document.getElementById("parent-comment-id");
     const replyInfo = document.getElementById("reply-info");
 
-    const submitButton = form
+    if (!form || !commentsList || !commentContent || !parentCommentInput) {
-        ? form.querySelector('button[type="submit"]')
-        : null;
-
-    const loadingMessage = document.getElementById("comment-loading");
-
-    if (
-        !form
-        || !commentsList
-        || !commentContent
-        || !parentCommentInput
-        || !submitButton
-    ) {
         return;
     }
 
@@ -65,23 +53,6 @@ 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;
 
@@ -298,14 +269,6 @@ 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,7 +25,6 @@
 
     let listContainer, sortRadios, categorySelect, limitSelect;
     let prevBtn, nextBtn, numbersContainer, jsNav, resultCountEl;
-    let loadingElement;
 
     function init() {
         listContainer = document.querySelector('.s-res-list');
@@ -39,41 +38,23 @@
         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
-                 * Falls das Nachladen nicht funktioniert, bleibt die bereits
+                // (No-JS-)Ansicht bleibt sichtbar und funktioniert weiter.
-                 * serverseitig ausgegebene Ergebnisliste sichtbar.
+                console.error('Suchergebnisse konnten nicht nachgeladen werden:', err);
-                 */
-                console.error(
-                    'Suchergebnisse konnten nicht nachgeladen werden:',
-                    err
-                );
-            })
-            .finally(function () {
-                if (loadingElement) {
-                    loadingElement.hidden = true;
-                }
             });
     }
 

js/showCategory.js

@@ -21,7 +21,6 @@
 
     let listContainer, sortRadios, searchInput, limitSelect;
     let prevBtn, nextBtn, numbersContainer, jsNav, resultCountEl;
-    let loadingElement;
     let searchDebounceTimer;
 
     function init() {
@@ -36,41 +35,23 @@
         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
-                 * Falls das Nachladen nicht funktioniert, bleibt die bereits
+                // (No-JS-)Ansicht bleibt sichtbar und funktioniert weiter.
-                 * serverseitig ausgegebene Kategorieansicht sichtbar.
+                console.error('Kategorie-Beiträge konnten nicht nachgeladen werden:', err);
-                 */
-                console.error(
-                    'Kategorie-Beiträge konnten nicht nachgeladen werden:',
-                    err
-                );
-            })
-            .finally(function () {
-                if (loadingElement) {
-                    loadingElement.hidden = true;
-                }
             });
     }
 

php/ajax/add-comment.php

@@ -4,6 +4,7 @@ if (session_status() === PHP_SESSION_NONE) {
 }
 
 require_once "../model/CommentManager.php";
+require_once "../model/UserManager.php";
 
 /**
  * Prüft, ob die Anfrage durch JavaScript per AJAX gesendet wurde.
@@ -40,7 +41,6 @@ function sendCommentResponse(
                 $additionalData
             )
         );
-
         exit();
     }
 
@@ -162,13 +162,29 @@ try {
         $parentCommentId
     );
 
+    $userManager = UserManager::getInstance();
+    $user = $userManager->findUser($_SESSION["user_email"]);
+
+    $authorName = $_SESSION["user_email"];
+
+    if ($user !== null) {
+        $vorname = trim($user["vorname"] ?? "");
+        $nachname = trim($user["nachname"] ?? "");
+
+        $fullName = trim($vorname . " " . $nachname);
+
+        if ($fullName !== "") {
+            $authorName = $fullName;
+        }
+    }
+
     sendCommentResponse(
         true,
         "Der Kommentar wurde erfolgreich gespeichert.",
         $articleId,
         [
             "commentId" => $commentId,
-            "author" => $_SESSION["user_email"],
+            "author" => $authorName,
             "content" => $content,
             "created" => date("Y-m-d H:i:s"),
             "parentCommentId" => $parentCommentId