script.js

document.addEventListener('DOMContentLoaded', function() {
    // Initialize auth forms
    renderAuthForms();
    
    // Setup event listeners
    setupAuthEventListeners();
});

function renderAuthForms() {
    const authFormsContainer = document.getElementById('auth-forms');
    
    authFormsContainer.innerHTML = `
        <div id="login-form" class="auth-form active">
            <h2 class="text-2xl font-bold text-gray-800 mb-6 text-center">Welcome back</h2>
            <form id="login-form-element" class="space-y-4">
                <div>
                    <label for="login-email" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
                    <input type="email" id="login-email" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500" placeholder="you@example.com" required>
                    <div id="login-email-error" class="error-message"></div>
                </div>
                <div>
                    <label for="login-password" class="block text-sm font-medium text-gray-700 mb-1">Password</label>
                    <input type="password" id="login-password" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500" placeholder="••••••••" required>
                    <div id="login-password-error" class="error-message"></div>
                </div>
                <div class="flex items-center justify-between">
                    <div class="flex items-center">
                        <input id="remember-me" type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
                        <label for="remember-me" class="ml-2 block text-sm text-gray-700">Remember me</label>
                    </div>
                    <a href="#" id="forgot-password-link" class="text-sm text-indigo-600 hover:text-indigo-500">Forgot password?</a>
                </div>
                <button type="submit" class="w-full bg-indigo-600 text-white py-2 px-4 rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Sign in</button>
            </form>
            <div class="mt-4 text-center text-sm text-gray-600">
                Don't have an account? <a href="#" id="show-register-link" class="text-indigo-600 hover:text-indigo-500">Sign up</a>
            </div>
        </div>
        
        <div id="register-form" class="auth-form hidden">
            <h2 class="text-2xl font-bold text-gray-800 mb-6 text-center">Create your account</h2>
            <form id="register-form-element" class="space-y-4">
                <div>
                    <label for="register-name" class="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
                    <input type="text" id="register-name" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500" placeholder="John Doe" required>
                    <div id="register-name-error" class="error-message"></div>
                </div>
                <div>
                    <label for="register-email" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
                    <input type="email" id="register-email" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500" placeholder="you@example.com" required>
                    <div id="register-email-error" class="error-message"></div>
                </div>
                <div>
                    <label for="register-password" class="block text-sm font-medium text-gray-700 mb-1">Password</label>
                    <input type="password" id="register-password" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500" placeholder="••••••••" required>
                    <div id="register-password-error" class="error-message"></div>
                </div>
                <div>
                    <label for="register-confirm-password" class="block text-sm font-medium text-gray-700 mb-1">Confirm Password</label>
                    <input type="password" id="register-confirm-password" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500" placeholder="••••••••" required>
                    <div id="register-confirm-password-error" class="error-message"></div>
                </div>
                <button type="submit" class="w-full bg-indigo-600 text-white py-2 px-4 rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Create account</button>
            </form>
            <div class="mt-4 text-center text-sm text-gray-600">
                Already have an account? <a href="#" id="show-login-link" class="text-indigo-600 hover:text-indigo-500">Sign in</a>
            </div>
        </div>
        
        <div id="forgot-password-form" class="auth-form hidden">
            <h2 class="text-2xl font-bold text-gray-800 mb-6 text-center">Reset your password</h2>
            <form id="forgot-password-form-element" class="space-y-4">
                <p class="text-sm text-gray-600 mb-4">Enter your email and we'll send you a link to reset your password.</p>
                <div>
                    <label for="forgot-password-email" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
                    <input type="email" id="forgot-password-email" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500" placeholder="you@example.com" required>
                    <div id="forgot-password-email-error" class="error-message"></div>
                </div>
                <button type="submit" class="w-full bg-indigo-600 text-white py-2 px-4 rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Send reset link</button>
            </form>
            <div class="mt-4 text-center text-sm text-gray-600">
                <a href="#" id="back-to-login-link" class="text-indigo-600 hover:text-indigo-500">Back to sign in</a>
            </div>
        </div>
        
        <div id="verify-email-notice" class="auth-form hidden">
            <div class="flex justify-center mb-6">
                <i data-feather="mail" class="text-indigo-600 w-12 h-12"></i>
            </div>
            <h2 class="text-2xl font-bold text-gray-800 mb-4 text-center">Verify your email</h2>
            <p class="text-sm text-gray-600 mb-6 text-center">We've sent a verification link to <span id="user-email" class="font-medium">user@example.com</span>. Please check your inbox and click the link to verify your account.</p>
            <div class="text-center">
                <button id="resend-verification" class="text-sm text-indigo-600 hover:text-indigo-500">Didn't receive the email? Resend</button>
            </div>
            <div id="resend-success" class="success-message text-center mt-2 hidden">Verification email resent successfully!</div>
        </div>
    `;
    
    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);
    });
}