https://static.eldia.com/js/mustang/js/inputsPassword.js

1/*
2 * Logica para mostrar/ocultar contrasenias de los inputs, dejo ejemplo del html
3 *
4 * <div class="form-group form-group-pass form-group-last">
5    <label for="password">Contraseña</label>
6    <input type="password" name="password" id="password">
7    <img class="icon-eye-password show-password" style="display: none;" src="/img/eye.svg" alt="mostrar password" />
8    <img class="icon-eye-password hide-password" src="/img/eye-close.svg" alt="ocultar password" />
9  </div>
10
11  para que funcione solamente hay que tener el html adecuado y llamar al script
12  esto es importado y llamado en common.js
13 * */ export function initInputsPassword() {
14    var eyes = document.querySelectorAll('.icon-eye-password');
15    if (!eyes) return;
16    eyes.forEach(function(element) {
17        var htmlElement = element;
18        htmlElement.addEventListener('click', function() {
19            htmlElement.style.display = 'none';
20            var parent = element.parentElement;
21            if (!parent) return;
22            var input = parent.querySelector('input');
23            if (!input) return;
24            if (element.classList.contains('show-password')) {
25                var brother = parent.querySelector('.hide-password');
26                var brotherElement = brother;
27                if (!brotherElement) return;
28                brotherElement.style.display = 'block';
29                input.type = 'password';
30            } else if (element.classList.contains('hide-password')) {
31                var brother1 = parent.querySelector('.show-password');
32                var brotherElement1 = brother1;
33                if (!brotherElement1) return;
34                brotherElement1.style.display = 'block';
35                input.type = 'text';
36            }
37        });
38    });
39}