Merge branch 'feature/Loginsystem_Accountseite' into 'dev'
Feature/loginsystem accountseite See merge request eb2342s/swe-b1-a!25
This commit was merged in pull request #85.
This commit is contained in:
Eric Blommel
171
webseite/assets/js/dropdown_menu.js
Normal file
171
webseite/assets/js/dropdown_menu.js
Normal file
@@ -0,0 +1,171 @@
|
||||
// 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');
|
||||
}
|
||||
});
|
||||
}
|
||||
document.getElementById('openSearchDialog').addEventListener('click', function () {
|
||||
document.getElementById('searchDialog').classList.remove('hidden');
|
||||
});
|
||||
|
||||
document.getElementById('closeSearchDialog').addEventListener('click', function () {
|
||||
document.getElementById('searchDialog').classList.add('hidden');
|
||||
});
|
||||
|
||||
function debounce(func, delay) {
|
||||
let debounceTimer;
|
||||
return function () {
|
||||
const context = this;
|
||||
const args = arguments;
|
||||
clearTimeout(debounceTimer);
|
||||
debounceTimer = setTimeout(() => func.apply(context, args), delay);
|
||||
};
|
||||
}
|
||||
|
||||
const searchInput = document.getElementById('searchInput');
|
||||
const resultsContainer = document.getElementById('searchResults');
|
||||
|
||||
searchInput.addEventListener('input', debounce(function () {
|
||||
const query = this.value.toLowerCase();
|
||||
resultsContainer.innerHTML = '';
|
||||
|
||||
if (query.length > 0) {
|
||||
fetch('search.php?query=' + query)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
data.forEach(item => {
|
||||
const resultItem = document.createElement('div');
|
||||
resultItem.classList.add('p-4', 'mb-2', 'rounded-lg', 'bg-white', 'hover:bg-gray-100', 'transition', 'duration-100', 'flex', 'items-center', 'space-x-2', 'cursor-pointer');
|
||||
|
||||
const subjectSpan = document.createElement('span');
|
||||
subjectSpan.classList.add('font-bold');
|
||||
subjectSpan.textContent = item.displayName.split(' - ')[0];
|
||||
|
||||
const breadcrumbSpan = document.createElement('span');
|
||||
breadcrumbSpan.classList.add('text-gray-500');
|
||||
breadcrumbSpan.textContent = item.displayName.split(' - ').slice(1).join(' > ');
|
||||
|
||||
resultItem.appendChild(subjectSpan);
|
||||
resultItem.appendChild(breadcrumbSpan);
|
||||
|
||||
resultItem.addEventListener('click', function () {
|
||||
if (item.type === 'subject') {
|
||||
window.location.href = 'subject.php?subject=' + item.id;
|
||||
} else {
|
||||
window.location.href = 'topic.php?subject=' + item.subjectId + '&topic=' + item.id;
|
||||
}
|
||||
});
|
||||
|
||||
resultsContainer.appendChild(resultItem);
|
||||
});
|
||||
});
|
||||
}
|
||||
}, 300));
|
||||
41
webseite/assets/js/login.js
Normal file
41
webseite/assets/js/login.js
Normal file
@@ -0,0 +1,41 @@
|
||||
// JavaScript to handle opening and closing of the login popup
|
||||
const loginButton = document.getElementById('loginButton');
|
||||
const loginPopup = document.getElementById('loginPopup');
|
||||
const closePopupButton = document.getElementById('closePopupButton');
|
||||
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) {
|
||||
loginPopup.classList.add('hidden');
|
||||
}
|
||||
});
|
||||
|
||||
// Schließe Popup mit ESC
|
||||
document.addEventListener('keydown', function (event) {
|
||||
if (event.key === "Escape" && !loginPopup.classList.contains('hidden')) {
|
||||
loginPopup.classList.add('hidden');
|
||||
}
|
||||
});
|
||||
|
||||
// Zeige Fehlermeldung beim Login an
|
||||
window.addEventListener('DOMContentLoaded', (event) => {
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
if (urlParams.has('error') && urlParams.get('error') === '1') {
|
||||
loginPopup.classList.remove('hidden');
|
||||
errorMessage.classList.remove('hidden');
|
||||
}
|
||||
});
|
||||
@@ -41,11 +41,6 @@
|
||||
<!-- Dropdown Menu -->
|
||||
<div id="userDropdownMenu"
|
||||
class="hidden absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg border">
|
||||
<!-- TODO: Accountseite entsprechend verlinken -->
|
||||
<a href="index.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
|
||||
@@ -172,221 +167,6 @@ if (isset($_SESSION['user']) && $_SESSION['user']->isLoggedIn()) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// JavaScript to handle opening and closing of the login popup
|
||||
const loginButton = document.getElementById('loginButton');
|
||||
const loginPopup = document.getElementById('loginPopup');
|
||||
const closePopupButton = document.getElementById('closePopupButton');
|
||||
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) {
|
||||
loginPopup.classList.add('hidden');
|
||||
}
|
||||
});
|
||||
|
||||
// Schließe Popup mit ESC
|
||||
document.addEventListener('keydown', function (event) {
|
||||
if (event.key === "Escape" && !loginPopup.classList.contains('hidden')) {
|
||||
loginPopup.classList.add('hidden');
|
||||
}
|
||||
});
|
||||
|
||||
// Zeige Fehlermeldung beim Login an
|
||||
window.addEventListener('DOMContentLoaded', (event) => {
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
if (urlParams.has('error') && urlParams.get('error') === '1') {
|
||||
loginPopup.classList.remove('hidden');
|
||||
errorMessage.classList.remove('hidden');
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
// 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');
|
||||
}
|
||||
});
|
||||
}
|
||||
document.getElementById('openSearchDialog').addEventListener('click', function () {
|
||||
document.getElementById('searchDialog').classList.remove('hidden');
|
||||
});
|
||||
|
||||
document.getElementById('closeSearchDialog').addEventListener('click', function () {
|
||||
document.getElementById('searchDialog').classList.add('hidden');
|
||||
});
|
||||
|
||||
function debounce(func, delay) {
|
||||
let debounceTimer;
|
||||
return function () {
|
||||
const context = this;
|
||||
const args = arguments;
|
||||
clearTimeout(debounceTimer);
|
||||
debounceTimer = setTimeout(() => func.apply(context, args), delay);
|
||||
};
|
||||
}
|
||||
|
||||
const searchInput = document.getElementById('searchInput');
|
||||
const resultsContainer = document.getElementById('searchResults');
|
||||
|
||||
searchInput.addEventListener('input', debounce(function () {
|
||||
const query = this.value.toLowerCase();
|
||||
resultsContainer.innerHTML = '';
|
||||
|
||||
if (query.length > 0) {
|
||||
fetch('search.php?query=' + query)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
data.forEach(item => {
|
||||
const resultItem = document.createElement('div');
|
||||
resultItem.classList.add('p-4', 'mb-2', 'rounded-lg', 'bg-white', 'hover:bg-gray-100', 'transition', 'duration-100', 'flex', 'items-center', 'space-x-2', 'cursor-pointer');
|
||||
|
||||
const subjectSpan = document.createElement('span');
|
||||
subjectSpan.classList.add('font-bold');
|
||||
subjectSpan.textContent = item.displayName.split(' - ')[0];
|
||||
|
||||
const breadcrumbSpan = document.createElement('span');
|
||||
breadcrumbSpan.classList.add('text-gray-500');
|
||||
breadcrumbSpan.textContent = item.displayName.split(' - ').slice(1).join(' > ');
|
||||
|
||||
resultItem.appendChild(subjectSpan);
|
||||
resultItem.appendChild(breadcrumbSpan);
|
||||
|
||||
resultItem.addEventListener('click', function () {
|
||||
if (item.type === 'subject') {
|
||||
window.location.href = 'subject.php?subject=' + item.id;
|
||||
} else {
|
||||
window.location.href = 'topic.php?subject=' + item.subjectId + '&topic=' + item.id;
|
||||
}
|
||||
});
|
||||
|
||||
resultsContainer.appendChild(resultItem);
|
||||
});
|
||||
});
|
||||
}
|
||||
}, 300));
|
||||
|
||||
</script>
|
||||
<!-- JavaScript Login, User-Menu -->
|
||||
<script src="assets/js/login.js"></script>
|
||||
<script src="assets/js/dropdown_menu.js"></script>
|
||||
Reference in New Issue
Block a user