document.addEventListener('DOMContentLoaded', function() {
// Initialize auth forms
renderAuthForms();
// Setup event listeners
setupAuthEventListeners();
});
function renderAuthForms() {
const authFormsContainer = document.getElementById('auth-forms');
authFormsContainer.innerHTML = `
`;
feather.replace();
}
function setupAuthEventListeners() {
// Toggle between login and register forms
document.getElementById('show-register-link')?.addEventListener('click', (e) => {
e.preventDefault();
document.getElementById('login-form').classList.remove('active');
document.getElementById('login-form').classList.add('hidden');
document.getElementById('register-form').classList.remove('hidden');
document.getElementById('register-form').classList.add('active');
});
document.getElementById('show-login-link')?.addEventListener('click', (e) => {
e.preventDefault();
document.getElementById('register-form').classList.remove('active');
document.getElementById('register-form').classList.add('hidden');
document.getElementById('login-form').classList.remove('hidden');
document.getElementById('login-form').classList.add('active');
});
// Forgot password flow
document.getElementById('forgot-password-link')?.addEventListener('click', (e) => {
e.preventDefault();
document.getElementById('login-form').classList.remove('active');
document.getElementById('login-form').classList.add('hidden');
document.getElementById('forgot-password-form').classList.remove('hidden');
document.getElementById('forgot-password-form').classList.add('active');
});
document.getElementById('back-to-login-link')?.addEventListener('click', (e) => {
e.preventDefault();
document.getElementById('forgot-password-form').classList.remove('active');
document.getElementById('forgot-password-form').classList.add('hidden');
document.getElementById('login-form').classList.remove('hidden');
document.getElementById('login-form').classList.add('active');
});
// Form submissions
document.getElementById('login-form-element')?.addEventListener('submit', (e) => {
e.preventDefault();
const email = document.getElementById('login-email').value;
const password = document.getElementById('login-password').value;
// Simulate login
if (email && password) {
// In a real app, this would be an API call
setTimeout(() => {
// Show verification notice for demo purposes
document.getElementById('user-email').textContent = email;
document.getElementById('login-form').classList.remove('active');
document.getElementById('login-form').classList.add('hidden');
document.getElementById('verify-email-notice').classList.remove('hidden');
document.getElementById('verify-email-notice').classList.add('active');
}, 500);
}
});
document.getElementById('register-form-element')?.addEventListener('submit', (e) => {
e.preventDefault();
const name = document.getElementById('register-name').value;
const email = document.getElementById('register-email').value;
const password = document.getElementById('register-password').value;
const confirmPassword = document.getElementById('register-confirm-password').value;
// Simple validation
if (password !== confirmPassword) {
document.getElementById('register-confirm-password-error').textContent = "Passwords don't match";
document.getElementById('register-confirm-password').classList.add('input-error');
return;
}
// Simulate registration
if (name && email && password) {
// In a real app, this would be an API call
setTimeout(() => {
// Show verification notice
document.getElementById('user-email').textContent = email;
document.getElementById('register-form').classList.remove('active');
document.getElementById('register-form').classList.add('hidden');
document.getElementById('verify-email-notice').classList.remove('hidden');
document.getElementById('verify-email-notice').classList.add('active');
}, 500);
}
});
document.getElementById('forgot-password-form-element')?.addEventListener('submit', (e) => {
e.preventDefault();
const email = document.getElementById('forgot-password-email').value;
// Simulate password reset request
if (email) {
// In a real app, this would be an API call
setTimeout(() => {
alert(`Password reset link sent to ${email}`);
document.getElementById('forgot-password-form').classList.remove('active');
document.getElementById('forgot-password-form').classList.add('hidden');
document.getElementById('login-form').classList.remove('hidden');
document.getElementById('login-form').classList.add('active');
}, 500);
}
});
document.getElementById('resend-verification')?.addEventListener('click', (e) => {
e.preventDefault();
// Simulate resending verification email
const successMessage = document.getElementById('resend-success');
successMessage.classList.remove('hidden');
setTimeout(() => successMessage.classList.add('hidden'), 3000);
});
}