Documentação

Este tutorial mostra como adicionar um botão (Olho) para mostrar ou ocultar a senha no formulário de login do WHMCS (Tema Six) editando o arquivo login.tpl.

Passo 1 – Localizar o arquivo do template

O arquivo responsável pelo formulário de login é:

/templates/six/login.tpl

Faça backup do arquivo antes de qualquer alteração.

Passo 2 – Abrir o arquivo para edição

Edite o arquivo usando o editor do WHMCS, cPanel ou um cliente FTP.

Passo 3 – Inserir o script JavaScript

Adicione o seguinte código no final do arquivo, dentro do bloco {literal} para que o Smarty não interprete os caracteres do JS.

{literal}
<script>
document.addEventListener("DOMContentLoaded", function () {

    document.querySelectorAll('input[type="password"]').forEach(function(input) {

        if (input.parentNode.querySelector('.toggle-password')) return;

        var wrapper = document.createElement("div");
        wrapper.style.position = "relative";
        input.parentNode.insertBefore(wrapper, input);
        wrapper.appendChild(input);

        var toggle = document.createElement("i");
        toggle.className = "fas fa-eye fa-fw toggle-password";

        toggle.style.position = "absolute";
        toggle.style.right = "10px";
        toggle.style.top = "50%";
        toggle.style.transform = "translateY(-50%)";
        toggle.style.cursor = "pointer";
        toggle.style.color = "#999";
        toggle.style.fontSize = "16px";

        wrapper.appendChild(toggle);

        toggle.addEventListener("click", function () {
            if (input.type === "password") {
                input.type = "text";
                toggle.classList.remove("fa-eye");
                toggle.classList.add("fa-eye-slash");
            } else {
                input.type = "password";
                toggle.classList.remove("fa-eye-slash");
                toggle.classList.add("fa-eye");
            }
        });

        input.style.paddingRight = "35px";

    });

});
</script>
{/literal}

Passo 4 – Salvar e testar

1. Salve o arquivo login.tpl.
2. Abra a página de login do WHMCS no navegador.
3. Digite uma senha e clique no ícone do olho à direita.
4. Verifique se a senha aparece e desaparece alternadamente e se o ícone muda corretamente.