Hinzufügen der 'Passwort ändern' Funktion, sowie Darstellung als Dropdown-Menü
This commit is contained in:
Nathan Leander Richenzhagen
@@ -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>
|
||||
?>
|
||||
<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>
|
||||
</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>';
|
||||
|
||||
<!-- 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">×
|
||||
</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');
|
||||
|
||||
if (loginButton) { // Überprüfen, ob das Element vorhanden ist
|
||||
loginButton.addEventListener('click', function () {
|
||||
loginPopup.classList.remove('hidden');
|
||||
usernameInput.focus(); // Set focus to username field
|
||||
});
|
||||
}
|
||||
|
||||
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>
|
||||
|
||||
39
webseite/password.php
Normal file
39
webseite/password.php
Normal file
@@ -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();
|
||||
}
|
||||
}
|
||||
?>
|
||||
Reference in New Issue
Block a user