Show Password with JavaScipt

HTML5+CSS, JavaScrip, Frameworks Bootstrap 4.3.1 y FontAwesome 5.13

by José Luis Rojo

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
  <div class="container">
   

 <form name="contact" id="contact" action="" method="post">
            <div class="form-group">
                <label for="departamento">
                    Clave:
                    <input type="password" name="password" class="form-control password1" value="clave" placeholder="" />
                    <span class="fa fa-fw fa-eye password-icon show-password"></span>
                </label>

            </div>
            <div class="form-group">
                <label for="departamento">
                    Repita la clave:
                    <input type="password" name="password2" class="form-control password2" value="clave" placeholder="" />
                    <small id="emailHelp" class="form-text text-muted">Las claves deben coincidir</small>
                </label>
            </div>        

        </form>
        </div>

CSS

.password-icon {
        float: right;
        position: relative;
        margin: -25px 10px 0 0;
        cursor: pointer;
    }

JavaScript

window.addEventListener("load", function() {

            // icono para mostrar contraseña
            showPassword = document.querySelector('.show-password');
            showPassword.addEventListener('click', () => {

                // elementos input de tipo clave
                password1 = document.querySelector('.password1');
                password2 = document.querySelector('.password2');

                if ( password1.type === "text" ) {
                    password1.type = "password"
                    password2.type = "password"
                    showPassword.classList.remove('fa-eye-slash');
                } else {
                    password1.type = "text"
                    password2.type = "text"
                    showPassword.classList.toggle("fa-eye-slash");
                }

            })

        });