273 lines
10 KiB
JavaScript
273 lines
10 KiB
JavaScript
// register.js
|
|
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
const registerForm = document.getElementById('registerForm');
|
|
const registerBtn = document.getElementById('registerSubmit');
|
|
const successMessage = document.getElementById('successMessage');
|
|
const errorMessage = document.getElementById('errorMessage');
|
|
const errorText = document.getElementById('errorText');
|
|
const passwordInput = document.getElementById('password');
|
|
const confirmPasswordInput = document.getElementById('confirmPassword');
|
|
const passwordStrength = document.getElementById('passwordStrength');
|
|
|
|
// Check if user is already logged in
|
|
checkExistingSession();
|
|
|
|
// Password strength checker
|
|
if (passwordInput && passwordStrength) {
|
|
passwordInput.addEventListener('input', function() {
|
|
const password = this.value;
|
|
const strength = checkPasswordStrength(password);
|
|
updatePasswordStrength(strength);
|
|
});
|
|
}
|
|
|
|
// Password confirmation checker
|
|
if (confirmPasswordInput && passwordInput) {
|
|
confirmPasswordInput.addEventListener('input', function() {
|
|
const password = passwordInput.value;
|
|
const confirmPassword = this.value;
|
|
|
|
if (confirmPassword && password !== confirmPassword) {
|
|
this.setCustomValidity('Passwörter stimmen nicht überein');
|
|
} else {
|
|
this.setCustomValidity('');
|
|
}
|
|
});
|
|
}
|
|
|
|
// Registration form submission
|
|
if (registerForm) {
|
|
registerForm.addEventListener('submit', async function(e) {
|
|
e.preventDefault();
|
|
|
|
// Get form data
|
|
const formData = {
|
|
type: 'register',
|
|
name: `${document.getElementById('firstName').value} ${document.getElementById('lastName').value}`,
|
|
email: document.getElementById('email').value,
|
|
phone: document.getElementById('phone').value,
|
|
company: document.getElementById('company').value,
|
|
password: passwordInput.value,
|
|
confirmPassword: confirmPasswordInput.value,
|
|
terms: document.getElementById('terms').checked,
|
|
newsletter: document.getElementById('newsletter').checked,
|
|
registrationTime: new Date().toISOString()
|
|
};
|
|
|
|
// Validation
|
|
const validation = validateRegistrationForm(formData);
|
|
if (!validation.valid) {
|
|
showError(validation.message);
|
|
return;
|
|
}
|
|
|
|
// Show loading state
|
|
setLoadingState(true);
|
|
hideMessages();
|
|
|
|
// Send registration data to PHP API
|
|
try {
|
|
const response = await fetch('../scripts/add/send.php', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify(formData)
|
|
});
|
|
|
|
const result = await response.json();
|
|
|
|
if (result.success) {
|
|
// Store user data (for demo purposes)
|
|
const userData = {
|
|
firstName: document.getElementById('firstName').value,
|
|
lastName: document.getElementById('lastName').value,
|
|
email: formData.email,
|
|
phone: formData.phone,
|
|
company: formData.company,
|
|
registrationTime: formData.registrationTime,
|
|
newsletter: formData.newsletter
|
|
};
|
|
|
|
// Store in localStorage (for demo purposes)
|
|
localStorage.setItem('userData', JSON.stringify(userData));
|
|
localStorage.setItem('userRegistered', 'true');
|
|
|
|
// Show success message
|
|
showSuccess('Registrierung erfolgreich! Sie werden weitergeleitet...');
|
|
|
|
// Redirect after delay
|
|
setTimeout(() => {
|
|
window.location.href = '../index.html';
|
|
}, 2000);
|
|
} else {
|
|
showError('Registrierung fehlgeschlagen: ' + result.message);
|
|
}
|
|
} catch (error) {
|
|
console.error('Registration error:', error);
|
|
showError('Netzwerkfehler bei der Registrierung. Bitte versuchen Sie es später erneut.');
|
|
}
|
|
|
|
setLoadingState(false);
|
|
});
|
|
}
|
|
|
|
// Password strength checker function
|
|
function checkPasswordStrength(password) {
|
|
let strength = 0;
|
|
|
|
// Length check
|
|
if (password.length >= 8) strength++;
|
|
if (password.length >= 12) strength++;
|
|
|
|
// Character variety checks
|
|
if (/[a-z]/.test(password)) strength++; // lowercase
|
|
if (/[A-Z]/.test(password)) strength++; // uppercase
|
|
if (/[0-9]/.test(password)) strength++; // numbers
|
|
if (/[^a-zA-Z0-9]/.test(password)) strength++; // special characters
|
|
|
|
return strength;
|
|
}
|
|
|
|
// Update password strength indicator
|
|
function updatePasswordStrength(strength) {
|
|
const strengthBar = passwordStrength.querySelector('.strength-bar');
|
|
const strengthText = passwordStrength.querySelector('.strength-text');
|
|
|
|
// Remove all strength classes
|
|
passwordStrength.classList.remove('strength-weak', 'strength-medium', 'strength-strong');
|
|
|
|
if (strength <= 2) {
|
|
passwordStrength.classList.add('strength-weak');
|
|
strengthText.textContent = 'Schwach';
|
|
} else if (strength <= 4) {
|
|
passwordStrength.classList.add('strength-medium');
|
|
strengthText.textContent = 'Mittel';
|
|
} else {
|
|
passwordStrength.classList.add('strength-strong');
|
|
strengthText.textContent = 'Stark';
|
|
}
|
|
}
|
|
|
|
// Form validation
|
|
function validateRegistrationForm(data) {
|
|
// Required fields check
|
|
if (!data.firstName || !data.lastName || !data.email || !data.password) {
|
|
return { valid: false, message: 'Bitte füllen Sie alle Pflichtfelder aus.' };
|
|
}
|
|
|
|
// Name validation
|
|
if (data.firstName.length < 2 || data.lastName.length < 2) {
|
|
return { valid: false, message: 'Vorname und Nachname müssen mindestens 2 Zeichen lang sein.' };
|
|
}
|
|
|
|
// Email validation
|
|
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
|
if (!emailRegex.test(data.email)) {
|
|
return { valid: false, message: 'Bitte geben Sie eine gültige E-Mail-Adresse ein.' };
|
|
}
|
|
|
|
// Password validation
|
|
if (data.password.length < 8) {
|
|
return { valid: false, message: 'Das Passwort muss mindestens 8 Zeichen lang sein.' };
|
|
}
|
|
|
|
// Password confirmation
|
|
if (data.password !== data.confirmPassword) {
|
|
return { valid: false, message: 'Die Passwörter stimmen nicht überein.' };
|
|
}
|
|
|
|
// Terms acceptance
|
|
if (!data.terms) {
|
|
return { valid: false, message: 'Sie müssen die Nutzungsbedingungen akzeptieren.' };
|
|
}
|
|
|
|
// Phone validation (if provided)
|
|
if (data.phone) {
|
|
const phoneRegex = /^[\d\s\-\+\(\)]+$/;
|
|
if (!phoneRegex.test(data.phone)) {
|
|
return { valid: false, message: 'Bitte geben Sie eine gültige Telefonnummer ein.' };
|
|
}
|
|
}
|
|
|
|
return { valid: true, message: 'Validierung erfolgreich' };
|
|
}
|
|
|
|
// Loading state management
|
|
function setLoadingState(loading) {
|
|
if (registerBtn) {
|
|
const btnText = registerBtn.querySelector('.btn-text');
|
|
const btnLoading = registerBtn.querySelector('.btn-loading');
|
|
|
|
if (loading) {
|
|
registerBtn.disabled = true;
|
|
if (btnText) btnText.style.display = 'none';
|
|
if (btnLoading) btnLoading.style.display = 'inline-block';
|
|
} else {
|
|
registerBtn.disabled = false;
|
|
if (btnText) btnText.style.display = 'inline-block';
|
|
if (btnLoading) btnLoading.style.display = 'none';
|
|
}
|
|
}
|
|
}
|
|
|
|
// Message display functions
|
|
function showSuccess(message) {
|
|
if (successMessage) {
|
|
const messageElement = successMessage.querySelector('p');
|
|
if (messageElement) {
|
|
messageElement.textContent = message;
|
|
}
|
|
successMessage.classList.add('show');
|
|
}
|
|
}
|
|
|
|
function showError(message) {
|
|
if (errorMessage && errorText) {
|
|
errorText.textContent = message;
|
|
errorMessage.classList.add('show');
|
|
|
|
// Hide after 5 seconds
|
|
setTimeout(() => {
|
|
errorMessage.classList.remove('show');
|
|
}, 5000);
|
|
}
|
|
}
|
|
|
|
function hideMessages() {
|
|
if (successMessage) successMessage.classList.remove('show');
|
|
if (errorMessage) errorMessage.classList.remove('show');
|
|
}
|
|
});
|
|
|
|
// Check existing session (same as login.js) - DISABLED auto-redirect
|
|
function checkExistingSession() {
|
|
const sessionData = localStorage.getItem('userSession') || sessionStorage.getItem('userSession');
|
|
|
|
if (sessionData) {
|
|
try {
|
|
const session = JSON.parse(sessionData);
|
|
const loginTime = new Date(session.loginTime);
|
|
const now = new Date();
|
|
const sessionAge = (now - loginTime) / (1000 * 60 * 60); // hours
|
|
|
|
// Auto-logout after 24 hours
|
|
if (sessionAge < 24) {
|
|
// User is still logged in - just log it, don't redirect
|
|
console.log('User already logged in');
|
|
// DISABLED: window.location.href = '../index.html';
|
|
} else {
|
|
// Session expired, remove it
|
|
console.log('Session expired, removing...');
|
|
localStorage.removeItem('userSession');
|
|
sessionStorage.removeItem('userSession');
|
|
}
|
|
} catch (error) {
|
|
console.error('Session parsing error:', error);
|
|
localStorage.removeItem('userSession');
|
|
sessionStorage.removeItem('userSession');
|
|
}
|
|
}
|
|
}
|