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!