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

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

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!