SocialMediaApp/script.js

document.addEventListener('DOMContentLoaded', () => {
    const loginForm = document.querySelector('.login-form');
    const emailInput = document.getElementById('email');
    const passwordInput = document.getElementById('password');
    const confirmPasswordInput = document.getElementById('confirm-password');
    const confirmPasswordGroup = document.getElementById('confirm-password-group');
    const submitBtn = document.querySelector('.btn-primary');
    const btnText = submitBtn.querySelector('span');
    const helperText = document.querySelector('.signup-link');
    const toggleLink = document.querySelector('.signup-link a');
    const title = document.querySelector('.brand-section h1');
    const subtitle = document.querySelector('.brand-section p');

    let isLoginMode = true;

    // Toggle between Login and Signup
    if (toggleLink) {
        toggleLink.addEventListener('click', (e) => {
            e.preventDefault();
            isLoginMode = !isLoginMode;
            updateUI();
        });
    }

    function updateUI() {
        if (isLoginMode) {
            title.innerText = 'Welcome Back';
            subtitle.innerText = 'Enter your details below';
            btnText.innerText = 'Sign In';
            helperText.innerHTML = 'Don\'t have an account? <a href="#">Create One</a>';
            confirmPasswordGroup.classList.add('hidden');
            confirmPasswordInput.required = false;
        } else {
            title.innerText = 'Create Account';
            subtitle.innerText = 'Start your journey with us';
            btnText.innerText = 'Sign Up';
            helperText.innerHTML = 'Already have an account? <a href="#">Sign In</a>';
            confirmPasswordGroup.classList.remove('hidden');
            confirmPasswordInput.required = true;
        }

        // Re-attach listener to the new link element
        const newLink = document.querySelector('.signup-link a');
        newLink.addEventListener('click', (e) => {
            e.preventDefault();
            isLoginMode = !isLoginMode;
            updateUI();
        });

        // Reset form and styles
        loginForm.reset();
        resetButton();
    }

    function resetButton() {
        submitBtn.style.background = '';
        submitBtn.style.transform = '';
        btnText.innerText = isLoginMode ? 'Sign In' : 'Sign Up';
    }

    function showFeedback(isSuccess, message) {
        btnText.innerText = message;
        if (isSuccess) {
            submitBtn.style.background = 'linear-gradient(135deg, #10B981 0%, #059669 100%)'; // Success Green
        } else {
            submitBtn.style.background = 'linear-gradient(135deg, #EF4444 0%, #B91C1C 100%)'; // Error Red
            submitBtn.animate([
                { transform: 'translateX(0)' },
                { transform: 'translateX(-5px)' },
                { transform: 'translateX(5px)' },
                { transform: 'translateX(0)' }
            ], { duration: 300 });
        }

        setTimeout(() => {
            resetButton();
        }, 2000);
    }

    if (loginForm) {
        loginForm.addEventListener('submit', (e) => {
            e.preventDefault();

            const email = emailInput.value.trim();
            const password = passwordInput.value.trim();
            const confirmPassword = confirmPasswordInput.value.trim();
            const timestamp = new Date().toISOString();

            // Get existing users
            const existingUsers = JSON.parse(localStorage.getItem('socialAppUsers') || '[]');

            if (isLoginMode) {
                // --- LOGIN LOGIC ---
                const user = existingUsers.find(u => u.email === email && u.password === password);

                if (user) {
                    console.log('Login Successful:', user);
                    showFeedback(true, 'Success!');
                    // Here you would redirect to the app
                } else {
                    console.warn('Login Failed: Invalid credentials');
                    showFeedback(false, 'Incorrect details');
                }

            } else {
                // --- SIGNUP LOGIC ---
                // 1. Check if user already exists
                if (existingUsers.some(u => u.email === email)) {
                    showFeedback(false, 'User exists');
                    return;
                }

                // 2. Validate Password Match
                if (password !== confirmPassword) {
                    showFeedback(false, 'Passwords do not match');
                    return;
                }

                const newUser = { email, password, joinedAt: timestamp };
                existingUsers.push(newUser);
                localStorage.setItem('socialAppUsers', JSON.stringify(existingUsers));

                console.log('New User Registered:', newUser);
                showFeedback(true, 'Account Created!');

                // Switch to login mode after success
                setTimeout(() => {
                    isLoginMode = true;
                    updateUI();
                }, 1500);
            }
        });
    }
});