Login/register page password toggle button – What am I doing wrong?

document.getElementById('login-toggle').addEventListener('click', function() {
    document.getElementById('login-form').style.display = 'flex';
    document.getElementById('register-form').style.display = 'none';
    document.getElementById('login-toggle').classList.add('active');
    document.getElementById('register-toggle').classList.remove('active');
});

document.getElementById('register-toggle').addEventListener('click', function() {
    document.getElementById('login-form').style.display = 'none';
    document.getElementById('register-form').style.display = 'flex';
    document.getElementById('register-toggle').classList.add('active');
    document.getElementById('login-toggle').classList.remove('active');
});

const trailContainer = document.getElementById('trail');
document.addEventListener('mousemove', (e) => {
    const trailDot = document.createElement('div');
    trailDot.className = 'trail-dot';
    trailDot.style.left = `${e.pageX}px`;
    trailDot.style.top = `${e.pageY}px`;
    trailContainer.appendChild(trailDot);
    setTimeout(() => {
        trailContainer.removeChild(trailDot);
    }, 1000);
});

const forms = document.querySelectorAll('form');
forms.forEach(form => {
    form.addEventListener('submit', (e) => {
        e.preventDefault();
        const loader = document.getElementById('loader');
        loader.style.display = 'block';
        setTimeout(() => {
            loader.style.display = 'none';
            // Simulate successful submission
            alert(`${form.id === 'login-form' ? 'Login' : 'Register'} successful!`);
        }, 2000);
    });
});

const passwordToggles = document.querySelectorAll('.password-toggle');
passwordToggles.forEach(toggle => {
    toggle.addEventListener('click', function() {
        const passwordField = this.previousElementSibling;
        if (passwordField.type === 'password') {
            passwordField.type = 'text';
            this.innerHTML = '<i class="fas fa-eye-slash"></i>';
        } else {
            passwordField.type = 'password';
            this.innerHTML = '<i class="fas fa-eye"></i>';
        }
    });
});

body {
    font-family: 'Arial', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    position: relative;
    background: url('google.com') no-repeat center center fixed;
    background-size: cover;
    color: #fff;
    overflow: hidden;
}

body::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* Dark overlay */
    z-index: 1;
}

.container {
    position: relative;
    z-index: 2;
    background: rgba(30, 30, 30, 0.85);
    padding: 3rem;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    width: 50%;
    height: 70vh; /* Set a fixed height */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Distribute space between elements */
    align-items: center;
}

.form-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.form-toggle {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2rem;
    width: 100%; /* Ensure full width */
}

.form-toggle button {
    flex: 1;
    padding: 1rem;
    border: none;
    background: #333;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    transition: background 0.3s ease;
    border-radius: 8px; /* Slightly rounded corners */
    margin: 0 5px; /* Space between buttons */
    display: flex;
    align-items: center;
    justify-content: center;
}

.form-toggle button i {
    margin-right: 0.5rem;
    font-size: 1.2rem; /* Adjust icon size */
}

.form-toggle button:hover {
    background: #555;
}

form {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center form elements horizontally */
    width: 100%; /* Ensure full width */
}

form input {
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid #333;
    border-radius: 5px;
    background: #2c2c2c;
    color: #fff;
    font-size: 1rem;
    width: 80%; /* Make input fields responsive */
}

.password-container {
    position: relative;
    width: 80%;
}

.password-container input {
    width: 100%;
    padding-right: 40px; /* Ensure padding to avoid overlap with the toggle button */
}

.password-toggle {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 0; /* Remove padding */
    margin: 0; /* Remove margin */
}

form button {
    padding: 1rem;
    border: none;
    background: #444;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    transition: background 0.3s ease;
    border-radius: 8px; /* Slightly rounded corners */
    width: 80%; /* Make button responsive */
}

form button:hover {
    background: #666;
}

.error-message {
    color: red;
    font-size: 0.9rem;
    margin-top: 0.5rem;
    display: none; /* Initially hidden */
}

footer {
    text-align: center;
    color: #888;
    font-size: 0.9rem;
}

#trail {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000;
}

.trail-dot {
    position: absolute;
    width: 10px;
    height: 10px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    animation: fade 1s linear infinite;
}

@keyframes fade {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

.loader {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 12px solid #f3f3f3;
    border-radius: 50%;
    border-top: 12px solid #444;
    width: 60px;
    height: 60px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

input:focus {
    outline: 2px solid #555;
    background: #1c1c1c;
}

    <main class="container">
        <header class="form-toggle">
            <button id="login-toggle" aria-label="Login form"><i class="fas fa-sign-in-alt"></i> Login</button>
            <button id="register-toggle" aria-label="Register form"><i class="fas fa-user-plus"></i> Register</button>
        </header>
        <section class="form-container">
            <form id="login-form" novalidate>
                <input type="email" placeholder="Email" required aria-label="Email">
                <div class="password-container">
                    <input type="password" placeholder="Password" required aria-label="Password">
                    <button type="button" class="password-toggle" aria-label="Toggle password visibility">
                        <i class="fas fa-eye"></i>
                    </button>
                </div>
                <button type="submit">Login</button>
                <div class="error-message" id="login-error"></div>
            </form>
            <form id="register-form" style="display: none;" novalidate>
                <input type="text" placeholder="Username" required aria-label="Username">
                <input type="email" placeholder="Email" required aria-label="Email">
                <div class="password-container">
                    <input type="password" placeholder="Password" required aria-label="Password">
                    <button type="button" class="password-toggle" aria-label="Toggle password visibility">
                        <i class="fas fa-eye"></i>
                    </button>
                </div>
                <button type="submit">Register</button>
                <div class="error-message" id="register-error"></div>
            </form>
        </section>
        <footer>
            &copy; 2024 Your Company
        </footer>
    </main>
    <div id="trail"></div>
    <div id="loader" class="loader" style="display: none;"></div>