Input Password

<form method="POST" action="">
    <label for="pass">Senha:</label> 
    <div class="password">
        <input id="pass" class="pswd" type="password" placeholder="Inserir senha" name="" />
    </div>
</form>

<form method="POST" action="">
    <label for="pass">Senha:</label> 
    <div class="password">
        <input id="pass" class="pswd" type="text" placeholder="Inserir senha" name="" />
    </div>
</form>

.password {
    display: flex;
    flex-wrap: wrap;
    border: var(--input__border);
    background-color: var(--input__background);
    box-shadow: var(--input__box-shadow);
    border-radius: 2px;
}
.password input[type=password].pswd, .password input[type=text].pswd {
    flex: 1 1 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background-color: transparent;
}
.password .look {
    position: relative;
    display: block;
    line-height: 0.8;
    padding: 0 9px 0 5px;
    font-size: 40px;
    cursor: pointer;
    border-left: none;
}
.password .look.hidden {
    position: relative;
}
.password .look.hidden::after {
    position: absolute;
    content: "";
    top: 18.5px;
    right: 9px;
    width: 37px;
    height: 4px;
    border-radius: 3px;
    background-color: var(--color);
    transform: rotate(-50deg);
}
.password:focus-within {
    border: var(--inputFocus__border);
    box-shadow: var(--inputFocus__box-shadow);
}

.password.sm .look {
    padding: 0 6px 0 4px;
    font-size: 34px;
}
.password.sm .look.hidden::after {
    top: 15px;
    right: 7.5px;
    width: 30px;
    height: 3px;
}
.password.lg .look {
    line-height: 0.85;
    padding: 0 12px 0 8px;
    font-size: 45px;
}
.password.lg .look.hidden::after {
    top: 22px;
    right: 12px;
    width: 42px;
}

let password = {
    pass: document.querySelectorAll("input.pswd"),
    inputpassword: function() {
        this.pass.forEach(pswd => {
            var look = document.createElement("span");
            look.classList.add("look");
            look.innerHTML = "👁";
            pswd.after(look);

            var inputype = pswd.getAttribute("type");
            if(inputype == "text") {
                look.setAttribute("title", "Ocultar senha");
            }
            if(inputype == "password") {
                look.setAttribute("title", "Visualizar senha");
                look.classList.add("hidden");
            }

            look.addEventListener('click', function() {
                var inputype = pswd.getAttribute("type");
                if(inputype == "text") {
                    pswd.setAttribute("type", "password");
                    this.setAttribute("title", "Visualizar senha");
                    if(this.classList.contains("hidden")) {
                        this.classList.remove("hidden");
                    } else {
                        this.classList.add("hidden");
                    }
                }
                if(inputype == "password") {
                    pswd.setAttribute("type", "text");
                    this.setAttribute("title", "Ocultar senha");
                    if(this.classList.contains("hidden")) {
                        this.classList.remove("hidden");
                    } else {
                        this.classList.add("hidden");
                    }
                }
            });
        });
    }
}.inputpassword();