I have made this login/register page and I’m trying to add this password toggle button to hide or show the password, but I can’t make it align to the right of the password field. What am I doing wrong? How do I align the toggle button with the “eye”-icon to the right of the password text field?
I’m using Fontawesome 6
Here is my code that I’ve been running in Codepen:
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>
© 2024 Your Company
</footer>
</main>
<div id="trail"></div>
<div id="loader" class="loader" style="display: none;"></div>