From 5a3a7909ae6a459cd8e6039d1c1ca77293ee9311 Mon Sep 17 00:00:00 2001
From: Nathan Leander Richenzhagen <nathan.richenzhagen@alumni.fh-aachen.de>
Date: Mon, 9 Dec 2024 06:21:34 +0100
Subject: [PATCH] =?UTF-8?q?Hinzuf=C3=BCgen=20der=20'Passwort=20=C3=A4ndern?=
 =?UTF-8?q?'=20Funktion,=20sowie=20Darstellung=20als=20Dropdown-Men=C3=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 webseite/header.php   | 216 ++++++++++++++++++++++++++++++++++++++----
 webseite/password.php |  39 ++++++++
 2 files changed, 238 insertions(+), 17 deletions(-)
 create mode 100644 webseite/password.php

diff --git a/webseite/header.php b/webseite/header.php
index 31b5f69..3e53161 100644
--- a/webseite/header.php
+++ b/webseite/header.php
@@ -28,16 +28,30 @@
                 require_once("classes/User.php");
                 session_start();
                 if (isset($_SESSION['user']) && $_SESSION['user']->isLoggedIn()) {
-                    // Logout Button
-                    echo '<form id="logoutForm" action="logout.php" method="POST" style="display:inline;">
-                                <button id="logoutButton" class="bg-white text-[var(--primary-color)] border-2 border-[var(--primary-color)] w-10 h-10 flex items-center justify-center rounded-lg hover:bg-[var(--primary-color)] hover:text-white transition duration-300">
-                                     <i class="fas fa-sign-out-alt"></i>
-                                </button>                          
-                          </form>';
-                    // Username Dropdown - Weitere Funktionen implementierbar
-                    echo '<div class="relative">
-                              <button id="userDropdownButton" class="bg-[var(--primary-color)] text-white px-4 py-2 rounded-lg hover:bg-[var(--accent-color)] transition duration-300">' . htmlspecialchars($_SESSION['user']->getUsername()) . '</button>
-                          </div>';
+                    ?>
+                    <div class="relative">
+                        <!-- Dropdown Trigger -->
+                        <button id="userDropdownToggle" class="bg-[var(--primary-color)] text-white px-4 py-2 rounded-lg hover:bg-[var(--accent-color)] transition duration-300 flex items-center">
+                            <span><?php echo htmlspecialchars($_SESSION['user']->getUsername()); ?></span>
+                            <i class="fas fa-chevron-down ml-2"></i>
+                        </button>
+
+                        <!-- Dropdown Menu -->
+                        <div id="userDropdownMenu" class="hidden absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg border">
+                            <a href="account.php" class="block px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-t-lg flex items-center">
+                                <i class="fas fa-user mr-2"></i> Accountseite
+                            </a>
+                            <button id="dropdownChangePasswordButton" class="block w-full text-left px-4 py-2 text-gray-700 hover:bg-gray-100 flex items-center">
+                                <i class="fas fa-key mr-2"></i> Passwort ändern
+                            </button>
+                            <form id="dropdownLogoutForm" action="logout.php" method="POST" class="block">
+                                <button type="submit" class="w-full text-left px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-b-lg flex items-center">
+                                    <i class="fas fa-sign-out-alt mr-2"></i> Logout
+                                </button>
+                            </form>
+                        </div>
+                    </div>
+                    <?php
                 } else {
                     // Login Button
                     echo '<button id="loginButton" class="bg-white text-[var(--primary-color)] border-2 border-[var(--primary-color)] w-10 h-10 flex items-center justify-center rounded-lg hover:bg-[var(--primary-color)] hover:text-white transition duration-300">
@@ -84,6 +98,53 @@ if (!isset($_SESSION['user']) || !$_SESSION['user']->isLoggedIn()) {
 }
 ?>
 
+<!-- Passwort-ändern-Popup -->
+<?php
+if (isset($_SESSION['user']) && $_SESSION['user']->isLoggedIn()) {
+    ?>
+    <div id="changePasswordPopup" class="hidden fixed inset-0 bg-black/50 flex items-center justify-center z-50" role="dialog"
+         aria-labelledby="changePasswordTitle" aria-hidden="true">
+        <div class="bg-white p-8 rounded-lg shadow-lg w-full max-w-sm relative">
+            <button id="closeChangePasswordPopupButton" class="absolute top-2 right-2 text-gray-500 text-xl"
+                    aria-label="Close Change Password Popup">&times;
+            </button>
+            <h2 id="changePasswordTitle" class="text-2xl font-bold mb-6 text-center">Passwort ändern</h2>
+            <form id="changePasswordForm" action="password.php" method="POST">
+                <div class="mb-4">
+                    <label for="currentPassword" class="block text-gray-700 mb-2">Aktuelles Passwort:</label>
+                    <input type="password" id="currentPassword" name="currentPassword" class="w-full p-2 border rounded-lg" required>
+                </div>
+                <div class="mb-4">
+                    <label for="newPassword" class="block text-gray-700 mb-2">Neues Passwort:</label>
+                    <input type="password" id="newPassword" name="newPassword" class="w-full p-2 border rounded-lg" required>
+                </div>
+                <div class="mb-4">
+                    <label for="confirmNewPassword" class="block text-gray-700 mb-2">Neues Passwort bestätigen:</label>
+                    <input type="password" id="confirmNewPassword" name="confirmNewPassword" class="w-full p-2 border rounded-lg" required>
+                </div>
+                <button type="submit"
+                        class="w-full bg-[var(--primary-color)] text-white px-4 py-2 rounded-lg hover:bg-[var(--accent-color)] transition duration-300">
+                    Passwort ändern
+                </button>
+            </form>
+            <div id="changePasswordErrorMessage" class="hidden text-red-500 text-center mt-4"></div>
+        </div>
+    </div>
+    <?php
+}
+?>
+
+<!-- Success Message Popup -->
+<div id="passwordSuccessPopup" class="hidden fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+    <div class="bg-white p-6 rounded-lg shadow-lg w-full max-w-sm text-center">
+        <h2 class="text-xl font-bold text-green-600 mb-4">Erfolg!</h2>
+        <p>Passwort wurde erfolgreich geändert.</p>
+        <button id="closeSuccessPopup" class="mt-4 px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700">
+            Schließen
+        </button>
+    </div>
+</div>
+
 <script>
     // JavaScript to handle opening and closing of the login popup
     const loginButton = document.getElementById('loginButton');
@@ -92,14 +153,18 @@ if (!isset($_SESSION['user']) || !$_SESSION['user']->isLoggedIn()) {
     const usernameInput = document.getElementById('username');
     const errorMessage = document.getElementById('errorMessage');
 
-    loginButton.addEventListener('click', function () {
-        loginPopup.classList.remove('hidden');
-        usernameInput.focus(); // Set focus to username field
-    });
+    if (loginButton) { // Überprüfen, ob das Element vorhanden ist
+        loginButton.addEventListener('click', function () {
+            loginPopup.classList.remove('hidden');
+            usernameInput.focus(); // Set focus to username field
+        });
+    }
 
-    closePopupButton.addEventListener('click', function () {
-        loginPopup.classList.add('hidden');
-    });
+    if (closePopupButton) { // Überprüfen, ob das Element vorhanden ist
+        closePopupButton.addEventListener('click', function () {
+            loginPopup.classList.add('hidden');
+        });
+    }
 
     window.addEventListener('click', function (event) {
         if (event.target === loginPopup) {
@@ -123,4 +188,121 @@ if (!isset($_SESSION['user']) || !$_SESSION['user']->isLoggedIn()) {
         }
     });
 
+
+
+    // JavaScript to handle opening and closing of the change password popup
+    const changePasswordButton = document.getElementById('changePasswordButton');
+    const changePasswordPopup = document.getElementById('changePasswordPopup');
+    const closeChangePasswordPopupButton = document.getElementById('closeChangePasswordPopupButton');
+
+    if (changePasswordButton) { // Überprüfen, ob das Element vorhanden ist
+        changePasswordButton.addEventListener('click', function () {
+            if (changePasswordPopup) {
+                changePasswordPopup.classList.remove('hidden');
+            }
+        });
+    }
+    if (closeChangePasswordPopupButton) {
+        closeChangePasswordPopupButton.addEventListener('click', function () {
+            if (changePasswordPopup) {
+                changePasswordPopup.classList.add('hidden');
+            }
+        });
+    }
+
+    window.addEventListener('click', function (event) {
+        if (event.target === changePasswordPopup) {
+            changePasswordPopup.classList.add('hidden');
+        }
+    });
+
+    // Close popup with ESC key
+    document.addEventListener('keydown', function (event) {
+        if (event.key === "Escape" && !changePasswordPopup.classList.contains('hidden')) {
+            changePasswordPopup.classList.add('hidden');
+        }
+    });
+
+    // Zeige Fehlermeldung beim Passwort ändern an
+    window.addEventListener('DOMContentLoaded', () => {
+        const urlParams = new URLSearchParams(window.location.search);
+
+        if (urlParams.has('password_error')) {
+            const changePasswordPopup = document.getElementById('changePasswordPopup');
+            const changePasswordErrorMessage = document.getElementById('changePasswordErrorMessage');
+            const errorType = urlParams.get('password_error');
+
+            changePasswordPopup.classList.remove('hidden');
+            changePasswordErrorMessage.classList.remove('hidden');
+
+            switch (errorType) {
+                case 'wrong_current_password':
+                    changePasswordErrorMessage.textContent = 'Das aktuelle Passwort ist falsch.';
+                    break;
+                case 'password_mismatch':
+                    changePasswordErrorMessage.textContent = 'Die neuen Passwörter stimmen nicht überein.';
+                    break;
+                default:
+                    changePasswordErrorMessage.textContent = 'Fehler beim Ändern des Passworts.';
+            }
+        }
+    });
+
+    // Zeige Erfolgspopup beim Passwortwechsel an
+    window.addEventListener('DOMContentLoaded', (event) => {
+        const urlParams = new URLSearchParams(window.location.search);
+
+        if (urlParams.has('password_success')) {
+            const passwordSuccessPopup = document.getElementById('passwordSuccessPopup');
+            if (passwordSuccessPopup) {
+                passwordSuccessPopup.classList.remove('hidden');
+            }
+            const closeSuccessPopup = document.getElementById('closeSuccessPopup');
+            if (closeSuccessPopup) {
+                closeSuccessPopup.addEventListener('click', () => {
+                    passwordSuccessPopup.classList.add('hidden');
+                    // Optional: Entferne den URL-Parameter ohne Neuladen
+                    const newUrl = window.location.href.split('?')[0];
+                    window.history.replaceState({}, document.title, newUrl);
+                });
+            }
+        }
+    });
+
+    // Dropdown öffnen/schließen
+    const userDropdownToggle = document.getElementById('userDropdownToggle');
+    const userDropdownMenu = document.getElementById('userDropdownMenu');
+
+    if (userDropdownToggle && userDropdownMenu) {
+        userDropdownToggle.addEventListener('click', (event) => {
+            event.stopPropagation(); // Verhindert das Schließen des Menüs bei Klick auf den Button
+            userDropdownMenu.classList.toggle('hidden');
+        });
+
+        // Schließe Dropdown, wenn außerhalb geklickt wird
+        window.addEventListener('click', () => {
+            if (!userDropdownMenu.classList.contains('hidden')) {
+                userDropdownMenu.classList.add('hidden');
+            }
+        });
+
+        // Schließe Dropdown mit ESC
+        document.addEventListener('keydown', (event) => {
+            if (event.key === "Escape" && !userDropdownMenu.classList.contains('hidden')) {
+                userDropdownMenu.classList.add('hidden');
+            }
+        });
+    }
+
+    // Passwort ändern über Dropdown öffnen
+    const dropdownChangePasswordButton = document.getElementById('dropdownChangePasswordButton');
+    if (dropdownChangePasswordButton) {
+        dropdownChangePasswordButton.addEventListener('click', () => {
+            const changePasswordPopup = document.getElementById('changePasswordPopup');
+            if (changePasswordPopup) {
+                changePasswordPopup.classList.remove('hidden');
+            }
+        });
+    }
+
 </script>
diff --git a/webseite/password.php b/webseite/password.php
new file mode 100644
index 0000000..3f66524
--- /dev/null
+++ b/webseite/password.php
@@ -0,0 +1,39 @@
+<?php
+require_once("classes/User.php");
+
+session_start();
+
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+    if (!isset($_SESSION['user']) || !$_SESSION['user']->isLoggedIn()) {
+        header("Location: index.php?password_error=not_logged_in");
+        exit();
+    }
+
+    $currentPassword = $_POST['currentPassword'];
+    $newPassword = $_POST['newPassword'];
+    $confirmNewPassword = $_POST['confirmNewPassword'];
+
+    $user = $_SESSION['user'];
+
+    // Prüfe, ob das aktuelle Passwort korrekt ist
+    if (!$user->isPasswordCorrect($currentPassword)) {
+        header("Location: index.php?password_error=wrong_current_password");
+        exit();
+    }
+
+    // Prüfe, ob die neuen Passwörter übereinstimmen
+    if ($newPassword !== $confirmNewPassword) {
+        header("Location: index.php?password_error=password_mismatch");
+        exit();
+    }
+
+    // Aktualisiere das Passwort
+    if ($user->changePassword($currentPassword, $newPassword)) {
+        header("Location: index.php?password_success=1");
+        exit();
+    } else {
+        header("Location: index.php?password_error=update_failed");
+        exit();
+    }
+}
+?>
\ No newline at end of file