117 lines
3.7 KiB
JavaScript
117 lines
3.7 KiB
JavaScript
// Version: 24.09.2025 16:29
|
|
|
|
// === DOM-Elemente ===
|
|
const loginFormContainer = document.getElementById('login-form-container');
|
|
const registerFormContainer = document.getElementById('register-form-container');
|
|
const showRegisterLink = document.getElementById('showRegister');
|
|
const showLoginLink = document.getElementById('showLogin');
|
|
const registerForm = document.getElementById('registerForm');
|
|
const loginForm = document.getElementById('loginForm');
|
|
|
|
const AUTH_API_URL = 'auth_api.php';
|
|
|
|
// === Toast-Funktion (isoliert für diese Seite) ===
|
|
function showToast(message, isError = false) {
|
|
const existingToast = document.querySelector('.toast');
|
|
if (existingToast) existingToast.remove();
|
|
|
|
const toast = document.createElement('div');
|
|
toast.className = `toast ${isError ? 'error' : ''}`;
|
|
toast.textContent = message;
|
|
document.body.appendChild(toast);
|
|
|
|
setTimeout(() => toast.classList.add('show'), 10);
|
|
|
|
setTimeout(() => {
|
|
toast.classList.remove('show');
|
|
setTimeout(() => document.body.removeChild(toast), 300);
|
|
}, 3000);
|
|
}
|
|
|
|
|
|
// === Event Handlers ===
|
|
|
|
function switchForms(e) {
|
|
e.preventDefault();
|
|
if (loginFormContainer.style.display === 'none') {
|
|
registerFormContainer.style.display = 'none';
|
|
loginFormContainer.style.display = 'block';
|
|
} else {
|
|
loginFormContainer.style.display = 'none';
|
|
registerFormContainer.style.display = 'block';
|
|
}
|
|
}
|
|
|
|
async function handleRegister(e) {
|
|
e.preventDefault();
|
|
const submitBtn = registerForm.querySelector('button[type="submit"]');
|
|
submitBtn.disabled = true;
|
|
submitBtn.textContent = 'Erstelle Konto...';
|
|
|
|
const formData = new FormData(registerForm);
|
|
const data = Object.fromEntries(formData.entries());
|
|
data.action = 'register';
|
|
|
|
try {
|
|
const response = await fetch(AUTH_API_URL, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(data),
|
|
});
|
|
const result = await response.json();
|
|
if (!response.ok) throw new Error(result.error);
|
|
|
|
showToast(result.message || 'Registrierung erfolgreich!');
|
|
registerForm.reset();
|
|
switchForms(e); // Zum Login wechseln
|
|
} catch (error) {
|
|
showToast(error.message, true);
|
|
} finally {
|
|
submitBtn.disabled = false;
|
|
submitBtn.textContent = 'Konto erstellen';
|
|
}
|
|
}
|
|
|
|
|
|
async function handleLogin(e) {
|
|
e.preventDefault();
|
|
const submitBtn = loginForm.querySelector('button[type="submit"]');
|
|
submitBtn.disabled = true;
|
|
submitBtn.textContent = 'Logge ein...';
|
|
|
|
const formData = new FormData(loginForm);
|
|
const data = Object.fromEntries(formData.entries());
|
|
data.action = 'login';
|
|
|
|
try {
|
|
const response = await fetch(AUTH_API_URL, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(data),
|
|
});
|
|
const result = await response.json();
|
|
if (!response.ok) throw new Error(result.error);
|
|
|
|
// Login war erfolgreich, lade die Seite neu
|
|
// Der Server wird uns jetzt die Pflanzen-Ansicht schicken
|
|
location.reload();
|
|
|
|
} catch(error) {
|
|
showToast(error.message, true);
|
|
} finally {
|
|
submitBtn.disabled = false;
|
|
submitBtn.textContent = 'Einloggen';
|
|
}
|
|
}
|
|
|
|
|
|
// === Initialisierung ===
|
|
function init() {
|
|
showRegisterLink.addEventListener('click', switchForms);
|
|
showLoginLink.addEventListener('click', switchForms);
|
|
registerForm.addEventListener('submit', handleRegister);
|
|
loginForm.addEventListener('submit', handleLogin);
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', init);
|
|
|