Separieren vom css und js und fixes

public/js/login.js

@@ -0,0 +1,187 @@
+// Supabase configuration
+const SUPABASE_URL = 'https://lfxlplnypzvjrhftaoog.supabase.co';
+const SUPABASE_ANON_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImxmeGxwbG55cHp2anJoZnRhb29nIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NDkyMTQ3NzIsImV4cCI6MjA2NDc5MDc3Mn0.XR4preBqWAQ1rT4PFbpkmRdz57BTwIusBI89fIxDHM8';
+
+// Initialize Supabase client
+const supabase = window.supabase.createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
+
+// Check if user is already logged in
+async function checkAuth() {
+    const { data: { session } } = await supabase.auth.getSession();
+    if (session) {
+        window.location.href = '/';
+    }
+}
+
+// Toggle between login and register forms
+function toggleForm() {
+    const loginForm = document.getElementById('loginForm');
+    const registerForm = document.getElementById('registerForm');
+    
+    if (loginForm.classList.contains('active')) {
+        loginForm.classList.remove('active');
+        registerForm.classList.add('active');
+    } else {
+        registerForm.classList.remove('active');
+        loginForm.classList.add('active');
+    }
+    clearMessage();
+    showPasswordReset(false); // Hide password reset when switching forms
+}
+
+// Show message
+function showMessage(message, type = 'success') {
+    const messageDiv = document.getElementById('message');
+    messageDiv.innerHTML = `<div class="message ${type}">${message}</div>`;
+    setTimeout(() => {
+        messageDiv.innerHTML = '';
+    }, 5000);
+}
+
+// Clear message
+function clearMessage() {
+    document.getElementById('message').innerHTML = '';
+}
+
+// Show/hide password reset container
+function showPasswordReset(show) {
+    const resetContainer = document.getElementById('passwordResetContainer');
+    if (show) {
+        resetContainer.classList.add('active');
+    } else {
+        resetContainer.classList.remove('active');
+    }
+}
+
+// Show/hide loading
+function setLoading(show) {
+    const loading = document.getElementById('loading');
+    if (show) {
+        loading.classList.add('active');
+    } else {
+        loading.classList.remove('active');
+    }
+}
+
+// Event Listeners Setup
+function setupEventListeners() {
+    // Handle login
+    document.getElementById('loginFormElement').addEventListener('submit', async (e) => {
+        e.preventDefault();
+        setLoading(true);
+        clearMessage();
+        showPasswordReset(false); // Hide reset button initially
+
+        const email = document.getElementById('loginEmail').value;
+        const password = document.getElementById('loginPassword').value;
+
+        try {
+            const { data, error } = await supabase.auth.signInWithPassword({
+                email: email,
+                password: password
+            });
+
+            if (error) {
+                showMessage(error.message, 'error');
+                // Show password reset button on login failure
+                showPasswordReset(true);
+            } else {
+                showMessage('Login successful! Redirecting...', 'success');
+                setTimeout(() => {
+                    window.location.href = '/';
+                }, 1000);
+            }
+        } catch (error) {
+            showMessage('An unexpected error occurred', 'error');
+            showPasswordReset(true);
+        } finally {
+            setLoading(false);
+        }
+    });
+
+    // Handle registration
+    document.getElementById('registerFormElement').addEventListener('submit', async (e) => {
+        e.preventDefault();
+        setLoading(true);
+        clearMessage();
+
+        const email = document.getElementById('registerEmail').value;
+        const password = document.getElementById('registerPassword').value;
+        const confirmPassword = document.getElementById('confirmPassword').value;
+
+        if (password !== confirmPassword) {
+            showMessage('Passwords do not match', 'error');
+            setLoading(false);
+            return;
+        }
+
+        if (password.length < 6) {
+            showMessage('Password must be at least 6 characters', 'error');
+            setLoading(false);
+            return;
+        }
+
+        try {
+            const { data, error } = await supabase.auth.signUp({
+                email: email,
+                password: password
+            });
+
+            if (error) {
+                showMessage(error.message, 'error');
+            } else {
+                if (data.user && !data.user.email_confirmed_at) {
+                    showMessage('Registration successful! Please check your email to confirm your account.', 'success');
+                } else {
+                    showMessage('Registration successful! Redirecting...', 'success');
+                    setTimeout(() => {
+                        window.location.href = '/';
+                    }, 1000);
+                }
+            }
+        } catch (error) {
+            showMessage('An unexpected error occurred', 'error');
+        } finally {
+            setLoading(false);
+        }
+    });
+
+    // Handle password reset
+    document.getElementById('resetPasswordBtn').addEventListener('click', async () => {
+        const email = document.getElementById('loginEmail').value;
+        
+        if (!email) {
+            showMessage('Bitte geben Sie zuerst Ihre E-Mail-Adresse ein', 'error');
+            return;
+        }
+
+        setLoading(true);
+        clearMessage();
+
+        try {
+            const { error } = await supabase.auth.resetPasswordForEmail(email, {
+                redirectTo: `${window.location.origin}/reset-password.html`
+            });
+
+            if (error) {
+                showMessage('Fehler beim Senden der E-Mail: ' + error.message, 'error');
+            } else {
+                showMessage('Passwort-Reset-E-Mail wurde gesendet! Bitte überprüfen Sie Ihr E-Mail-Postfach.', 'success');
+                showPasswordReset(false);
+            }
+        } catch (error) {
+            showMessage('Ein unerwarteter Fehler ist aufgetreten', 'error');
+        } finally {
+            setLoading(false);
+        }
+    });
+}
+
+// Initialize page
+async function init() {
+    await checkAuth();
+    setupEventListeners();
+}
+
+// Start the application when DOM is loaded
+document.addEventListener('DOMContentLoaded', init);