Passwort beim Login mit "Auge" sichtbar machen

Mit der folgenden Anpassung lässt sich ein Schalter implementieren mit dem man das Passwort im Passwortfeld sichtbar machen kann.

<style>
.password-toggle {
    position: relative;
}
.password-toggle input[type="password"] {
    padding-right: 40px;
}
.password-eye {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #666;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const passwordFields = document.querySelectorAll('input[type="password"]');
    passwordFields.forEach(function(field) {
        const wrapper = document.createElement('div');
        wrapper.className = 'password-toggle';
        field.parentNode.insertBefore(wrapper, field);
        wrapper.appendChild(field);
        
        const eye = document.createElement('i');
        eye.className = 'fas fa-eye password-eye';
        eye.onclick = function() {
            if (field.type === 'password') {
                field.type = 'text';
                eye.classList.remove('fa-eye');
                eye.classList.add('fa-eye-slash');
            } else {
                field.type = 'password';
                eye.classList.remove('fa-eye-slash');
                eye.classList.add('fa-eye');
            }
        };
        wrapper.appendChild(eye);
    });
});
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">

Das Loginfeld sieht dann wie folgt aus: