Social_Cooking/js/signup.js

// =============================================
// Signup-Logik
// Diese Datei validiert das Formular, speichert
// neue Benutzer lokal und startet direkt die Session.
// =============================================

// Formular und Felder aus dem HTML holen.
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 für 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 Schliessen des Welcome Modals
function closeWelcomeModal() {
    welcomeModal.classList.remove('show');
    document.body.style.overflow = 'auto';
    window.location.href = 'event_overview.html';
}

// Hauptfunktion für Formularvalidierung und Speicherung.
function validateForm(event) {
    event.preventDefault();

    // Wir zeigen pro Submit nur den ersten Fehler an.
    // So bleibt der Formularfluss klar und ruhig.
    const vornameValue = vornameInput.value.trim();
    const vornameGroup = vornameInput.parentElement;
    const nachnameGroup = nachnameInput.parentElement;
    const emailGroup = emailInput.parentElement;
    const passwortGroup = passwortInput.parentElement;

    vornameGroup.classList.remove('has-error');
    nachnameGroup.classList.remove('has-error');
    emailGroup.classList.remove('has-error');
    passwortGroup.classList.remove('has-error');

    if (!vornameValue) {
        vornameGroup.classList.add('has-error');
        vornameInput.focus();
        return;
    }

    // Nachname-Validierung
    const nachnameValue = nachnameInput.value.trim();

    if (!nachnameValue) {
        nachnameGroup.classList.add('has-error');
        nachnameInput.focus();
        return;
    }

    // Email-Validierung
    const emailValue = emailInput.value.trim();
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

    if (!emailValue) {
        emailGroup.classList.add('has-error');
        document.getElementById('emailError').textContent = 'Bitte gib deine E-Mail Adresse ein.';
        emailInput.focus();
        return;
    }

    if (!emailRegex.test(emailValue)) {
        emailGroup.classList.add('has-error');
        document.getElementById('emailError').textContent = 'Bitte gib eine gültige E-Mail Adresse ein.';
        emailInput.focus();
        return;
    }

    // Passwort-Validierung
    const passwortValue = passwortInput.value;

    if (!passwortValue) {
        passwortGroup.classList.add('has-error');
        document.getElementById('passwortError').textContent = 'Bitte gib ein Passwort ein.';
        passwortInput.focus();
        return;
    }

    if (passwortValue.length < 8) {
        passwortGroup.classList.add('has-error');
        document.getElementById('passwortError').textContent = 'Dein Passwort muss mindestens 8 Zeichen lang sein.';
        passwortInput.focus();
        return;
    }

    // Wenn alles gültig ist:
    // 1) auf doppelte E-Mail prüfen
    // 2) neuen Benutzer speichern
    // 3) als aktuellen Benutzer einloggen
    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.';
        emailInput.focus();
        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();
    // Weiterleitung erfolgt beim Klick auf "Weiter zu den Events".
}

// 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 schliessen wenn ausserhalb geklickt wird
welcomeModal.addEventListener('click', function(event) {
    if (event.target === welcomeModal) {
        closeWelcomeModal();
    }
});

// Form Submit Event
signupForm.addEventListener('submit', validateForm);