Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Dúvida em relação ao botão de mostrar a senha

Com essa implementação, a primeira digitação da senha permite o clique no botão que troca a visibilidade dos caracteres. Porém, depois de colocarmos a senha da primeira vez e retornar dps ao campo, perdemos essa funcionalidade. O que está acontecendo ?

3 respostas

Oi, Renato, tudo bem?

Peço que você compartilhe o link do seu projeto no GitHub ou uma pasta com todos os arquivos que você utilizou no através do Google Drive. Dessa forma, conseguirei realizar os testes necessários e te ajudar de forma mais assertiva.

Lembre-se que, se enviar os arquivos por meio do Google Drive, é necessário conceder permissão para que eu possa ter acesso.

Fico no aguardo!

Boa tarde, tudo certo sim e por ai ? =)

Descrevendo o cenário para você testar:

  • abrir a página index do curso (tanto faz se abre direto o html ou se usamos o host do Go Live)
  • clicar no botão de senha, digitar algo
  • verificar que existe a opção de mudar a visibilidade
  • clicar em Login
  • voltar para o campo da senha
  • agora não existe mais opção de mudar visibilidade

Meu repositório no github: https://github.com/RenatoAAB/AluraReact

solução!

Oi, Renato, como vai?

Desculpe a demora em te responder!

Fiz o teste e o botão de visibilidade da senha não apareceu para mim, nem na primeira tentativa de colocar senha. Contudo, você pode fazer algumas alterações no componente "CampoDeDigitacao" para conseguir esse resultado. O código ficaria assim:

function CampoDeDigitacao({ label, tipo, placeholder, id, value, setValor }) {
    const [mostrarSenha, setMostrarSenha] = React.useState(false);

    const toggleMostrarSenha = () => {
        setMostrarSenha(!mostrarSenha);
    };

    return (
        <div className='form__campo-digitacao'>
            <label htmlFor={id}>{label}</label>
            <div className="input-with-icon">
                <input 
                    type={tipo === 'password' && mostrarSenha ? 'text' : tipo} // Altera o tipo do input para 'text' se mostrarSenha for true e o tipo for 'password'
                    placeholder={placeholder}
                    required
                    id={id}
                    value={value}
                    onChange={(evento) => setValor(evento.target.value)} 
                />
                {tipo === 'password' && ( // Renderiza o botão apenas se o tipo for 'password'
                    <button 
                        type="button" 
                        className="toggle-password" 
                        onClick={toggleMostrarSenha}
                    >
                        {mostrarSenha ? 'Esconder' : 'Mostrar'}
                    </button>
                )}
            </div>
        </div>
    );
}

Contudo, na atividade Mão na massa: inserindo a senha, essa funcionalidade não foi exigida. Portanto, seria uma funcionalidade extra ao projeto e você pode fazer as alterações necessárias para que o código compartilhado acima fique o mais próximo do que você gostaria para o seu projeto.

Espero que dê tudo certo. Abraços!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!