- Added a new profile page (my_profil.html) for users to manage their events and personal information. - Introduced a new CSS file (my_profil.css) for styling the profile page. - Created a JavaScript file (my_profil.js) to handle profile data retrieval, event registration management, and form submission. - Updated navigation logic (navigation.js) to dynamically display login/signup or event management links based on user authentication status. - Enhanced event creation and detail pages to support user-specific actions (registration/unregistration). - Improved login and signup processes to handle user data more robustly, including fallback user creation. - Refactored event overview to show user-specific events and registrations. - Added error handling and validation for user input in profile management.
175 lines
5.6 KiB
JavaScript
175 lines
5.6 KiB
JavaScript
const signupForm = document.getElementById('signupForm');
|
|
const vornameInput = document.getElementById('vorname');
|
|
const nachnameInput = document.getElementById('nachname');
|
|
const emailInput = document.getElementById('email');
|
|
const passwortInput = document.getElementById('passwort');
|
|
const welcomeModal = document.getElementById('welcomeModal');
|
|
|
|
const USERS_STORAGE_KEY = 'socialCookingUsers';
|
|
const CURRENT_USER_KEY = 'socialCookingCurrentUser';
|
|
|
|
// Liest bestehende Benutzerliste robust aus localStorage.
|
|
function getStoredUsers() {
|
|
try {
|
|
const raw = localStorage.getItem(USERS_STORAGE_KEY);
|
|
return raw ? JSON.parse(raw) : [];
|
|
} catch (error) {
|
|
console.error('Benutzerdaten konnten nicht gelesen werden.', error);
|
|
return [];
|
|
}
|
|
}
|
|
|
|
// Schreibt die komplette Benutzerliste in localStorage.
|
|
function setStoredUsers(users) {
|
|
localStorage.setItem(USERS_STORAGE_KEY, JSON.stringify(users));
|
|
}
|
|
|
|
// Speichert den aktiven Benutzer fuer nachfolgende Seiten.
|
|
function setCurrentUser(user) {
|
|
localStorage.setItem(CURRENT_USER_KEY, JSON.stringify(user));
|
|
}
|
|
|
|
// Funktion zum Öffnen des Welcome Modals
|
|
function openWelcomeModal() {
|
|
welcomeModal.classList.add('show');
|
|
document.body.style.overflow = 'hidden';
|
|
}
|
|
|
|
// Funktion zum Schließen des Welcome Modals
|
|
function closeWelcomeModal() {
|
|
welcomeModal.classList.remove('show');
|
|
document.body.style.overflow = 'auto';
|
|
}
|
|
|
|
// Validierungsfunktion
|
|
function validateForm(event) {
|
|
event.preventDefault();
|
|
|
|
let isValid = true;
|
|
|
|
// Vorname-Validierung
|
|
const vornameValue = vornameInput.value.trim();
|
|
const vornameGroup = vornameInput.parentElement;
|
|
|
|
if (!vornameValue) {
|
|
vornameGroup.classList.add('has-error');
|
|
isValid = false;
|
|
} else {
|
|
vornameGroup.classList.remove('has-error');
|
|
}
|
|
|
|
// Nachname-Validierung
|
|
const nachnameValue = nachnameInput.value.trim();
|
|
const nachnameGroup = nachnameInput.parentElement;
|
|
|
|
if (!nachnameValue) {
|
|
nachnameGroup.classList.add('has-error');
|
|
isValid = false;
|
|
} else {
|
|
nachnameGroup.classList.remove('has-error');
|
|
}
|
|
|
|
// Email-Validierung
|
|
const emailValue = emailInput.value.trim();
|
|
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
|
const emailGroup = emailInput.parentElement;
|
|
|
|
if (!emailValue) {
|
|
emailGroup.classList.add('has-error');
|
|
document.getElementById('emailError').textContent = 'Bitte gib deine E-Mail Adresse ein.';
|
|
isValid = false;
|
|
} else if (!emailRegex.test(emailValue)) {
|
|
emailGroup.classList.add('has-error');
|
|
document.getElementById('emailError').textContent = 'Bitte gib eine gültige E-Mail Adresse ein.';
|
|
isValid = false;
|
|
} else {
|
|
emailGroup.classList.remove('has-error');
|
|
}
|
|
|
|
// Passwort-Validierung
|
|
const passwortValue = passwortInput.value;
|
|
const passwortGroup = passwortInput.parentElement;
|
|
|
|
if (!passwortValue) {
|
|
passwortGroup.classList.add('has-error');
|
|
document.getElementById('passwortError').textContent = 'Bitte gib ein Passwort ein.';
|
|
isValid = false;
|
|
} else if (passwortValue.length < 8) {
|
|
passwortGroup.classList.add('has-error');
|
|
document.getElementById('passwortError').textContent = 'Dein Passwort muss mindestens 8 Zeichen lang sein.';
|
|
isValid = false;
|
|
} else {
|
|
passwortGroup.classList.remove('has-error');
|
|
}
|
|
|
|
// Wenn alle Validierungen bestanden, Benutzer speichern und Session setzen.
|
|
if (isValid) {
|
|
const existingUsers = getStoredUsers();
|
|
const emailLower = emailValue.toLowerCase();
|
|
const emailAlreadyUsed = existingUsers.some(user => user.email?.toLowerCase() === emailLower);
|
|
|
|
if (emailAlreadyUsed) {
|
|
emailGroup.classList.add('has-error');
|
|
document.getElementById('emailError').textContent = 'Diese E-Mail ist bereits registriert. Bitte nutze den Login.';
|
|
return;
|
|
}
|
|
|
|
const newUser = {
|
|
id: Date.now(),
|
|
vorname: vornameValue,
|
|
nachname: nachnameValue,
|
|
email: emailValue,
|
|
passwort: passwortValue,
|
|
createdAt: new Date().toISOString(),
|
|
source: 'signup'
|
|
};
|
|
|
|
setStoredUsers([newUser, ...existingUsers]);
|
|
setCurrentUser(newUser);
|
|
|
|
openWelcomeModal();
|
|
// Hier würde spaeter die Registrierung zum Backend gesendet.
|
|
|
|
// Weiterleitung zur Event-Overview-Seite.
|
|
window.location.href = 'event_overview.html';
|
|
}
|
|
}
|
|
|
|
// Fehlerbehandlung bei Input-Änderung (entfernt Fehler wenn Benutzer korrigiert)
|
|
vornameInput.addEventListener('input', function() {
|
|
const vornameGroup = this.parentElement;
|
|
if (this.value.trim()) {
|
|
vornameGroup.classList.remove('has-error');
|
|
}
|
|
});
|
|
|
|
nachnameInput.addEventListener('input', function() {
|
|
const nachnameGroup = this.parentElement;
|
|
if (this.value.trim()) {
|
|
nachnameGroup.classList.remove('has-error');
|
|
}
|
|
});
|
|
|
|
emailInput.addEventListener('input', function() {
|
|
const emailGroup = this.parentElement;
|
|
if (this.value.trim()) {
|
|
emailGroup.classList.remove('has-error');
|
|
}
|
|
});
|
|
|
|
passwortInput.addEventListener('input', function() {
|
|
const passwortGroup = this.parentElement;
|
|
if (this.value) {
|
|
passwortGroup.classList.remove('has-error');
|
|
}
|
|
});
|
|
|
|
// Modal schließen wenn außerhalb geklickt wird
|
|
welcomeModal.addEventListener('click', function(event) {
|
|
if (event.target === welcomeModal) {
|
|
closeWelcomeModal();
|
|
}
|
|
});
|
|
|
|
// Form Submit Event
|
|
signupForm.addEventListener('submit', validateForm); |