Enter your credentials to access your account.
<div class="block-auth">
<div class="block-auth-container">
<div class="block-auth-header">
<h5 class="block-auth-title">Welcome Back</h5>
<p class="block-auth-text">Enter your credentials to access your account.</p>
</div>
<form action="" class="form">
<div class="form-field">
<label class="form-label">Email</label>
<input type="text" class="form-input" />
</div>
<div class="form-field form-field-password">
<label class="form-label">Password</label>
<input type="password" class="form-input" />
<button class="form-password-toggle" type="button"><i class="iconoir-eye"></i></button>
</div>
<div class="form-field">
<button class="button button-primary">Sign In</button>
</div>
</form>
<div class="block-auth-footer">
<p class="block-auth-footer-text">
Forgot your password?
<a href="" class="block-auth-footer-link">Reset password</a>
</p>
</div>
</div>
</div>To make password field toggle work, you need to add some JavaScript
const formPasswordToggle = document.querySelectorAll('.form-password-toggle');
formPasswordToggle.forEach(formPasswordToggle => {
formPasswordToggle.addEventListener('click', () => {
const input = formPasswordToggle.parentElement.querySelector('.form-input');
input.type = input.type === 'password' ? 'text' : 'password';
const isShowPassword = input.type === 'text';
formPasswordToggle.innerHTML = isShowPassword ? '<i class="iconoir-eye-closed"></i>' : '<i class="iconoir-eye-solid"></i>';
});
});