Botão de mostrar/esconder senha com Javascript

Oie pessoal, tudo bem com vocês? No artigo de hoje vamos criar um input de senha com um botão que poderá mostrar ou esconder essa senha. Vamos lá?

Primeiramente vamos baixar os dois ícones necessários. Para isso, acessei o site: feather icons e pesquisei por 'eye', fiz o download desses dois ícones:

Agora vamos criar nosso projeto! Criei uma pasta com 3 arquivos dentro: index.html, style.css e main.js. Além disso, dentro dessa pasta eu criei uma pasta chamada 'assets', onde coloquei as duas imagens do ícone dentro.

A imagem eye é quando nossa senha não estará visível.

A imagem eye-off é quando nossa senha estará visível.

Agora vamos para nosso arquivo HTML, vamos criar toda a estrutura e dentro do body, ficará assim:

Basicamente temos um campo input do tipo password (senha) e a imagem do ícone logo abaixo. Por padrão, vamos começar com a imagem 'eye', já que no início nossa senha não estará visível.

Agora vamos dar uma estilizada básica com nosso CSS:

Coloquei um display: flex; para alinhar melhor os elementos. No input, tirei a borda e deixei apenas embaixo, com 1px de largura e a cor roxa. Já na imagem, diminuí o tamanho dela e coloquei o cursor: pointer; que é a mãozinha insinuando que é clicável.

Pega essa dica: eu estilizei também a borda dos ícones para o mesmo roxo. Fiz isso abrindo os arquivos SVG pelo próprio editor e procurando a propriedade "stroke", e então mudei a cor.

Nosso resultado ficou assim:

Ficou grande dessa maneira porque eu dei zoom na página, ok?

Agora a lógica vai basicamente funcionar da seguinte maneira:

Quando clicarmos no botão, eu quero que o JS acrescente uma classe na nossa div, chamada visible. E assim, vamos fazer a lógica baseada nessa classe. Quando ela está com a classe visible, nós mudamos o ícone para o 'eye-off' e alteramos o input para o tipo texto, dessa maneira ficará visível. Quando ela não tem a classe visible, nós colocamos o input como tipo password e o ícone volta para o 'eye'. Deu pra entender? Vamos ver o nosso código JS e explicar passo a passo:

Nas primeiras 3 linhas eu crio variáveis com base no querySelector, assim ele me retorna o elemento HTML. Pra quem não entendeu, eu recomendo que você estude melhor sobre a manipulação da DOM =)

Na variável icon, adicionamos um evento de clique (porque é assim que queremos mostrar se a senha está visível ou não).

Pegamos a classe da div (container) e alternamos ela (com a função toggle) para visible ou vazio. Ou seja, a primeira vez que clicarmos no ícone, ela vai adicionar a classe visible na div. Quando clicarmos novamente, ela vai tirar a classe visible da div. É isso que a função toggle faz, alterna.

Depois fazemos uma verificação, pra ver se a div possui a classe visible ou não. Caso possua, vamos fazer com que a senha seja visível, alterando a imagem para o ícone 'eye-off' e o input para o tipo texto. Caso não possua a classe, a senha não será visível, portanto voltamos a imagem para 'eye' e o tipo do input como password, assim como é o padrão.

Nosso resultado final:

E aí, curtiu? ❤️