Visualização de senha no campo "Senha" Gatitobook

Olá Edgard, tudo bom?

Dei uma pesquisada e encontrei um jeito de mostrar e esconder a senha. Para criar essa funcionalidade eu vou usar o LoginComponent do projeto Gatitobook mesmo e seguindo os passos você pode repetir no NovoUsuarioComponent. Vamos lá.

Primeiro vou criar o botão ao lado do campo de senha, usei um recurso do Input group do Bootstrap. Portanto teremos algumas alterações no campo senha. Vamos envolver o input com uma div de classe input-group e adicionar um elemento irmão para o input, uma div com a classe input-group-append, dentro dele vamos colocar um button e dentro teremos um ícone da biblioteca Font Awesome.

<div class="form-group">
    <div class="input-group">
      <input type="password" class="form-control" placeholder="Senha" [(ngModel)]="senha" name="senha"
        #campoSenha required />
      <div class="input-group-append">
        <button class="btn btn-outline-secondary" type="button" (click)="senhaVisivel(campoSenha)"><i class="fa fa-eye"
            aria-hidden="true"></i></button>
      </div>
    </div>
    <app-mensagem *ngIf="loginForm.controls.senha.invalid && loginForm.controls.senha.touched" mensagem="Senha obrigatória"></app-mensagem>
  </div>

Temos também que mudar os atributos do input. A variável de referência que passamos o ngModel para o formulário vai passar a ser somente uma variável de referência. Com isso vamos ter que alterar a condicional do app-mensagem passando loginForm.controls.senha no lugar de campoSenha.

Pronto. Agora vamos falar sobre o evento click no botão. Vamos vincular esse evento com uma função que vai receber como parâmetro a variável de referência, (click)="senhaVisivel(campoSenha). Precisamos criar essa função dentro do componente também.

senhaVisivel(campoSenha: any){
    console.log(campoSenha)
  }

Isso deve aparecer no console do navegador quando clicar no olhinho: Agora só precisamos acessar o atributo type do input e criar uma condição. Caso o tipo do input seja "password", o type deve receber texto. Senão, o type deve receber password.

senhaVisivel(campoSenha: any){
// PEGAR O ATRIBUTO DO ELEMENTO INPUT
    const typeInput = campoSenha.getAttribute('type')
    if(typeInput == "password"){
//ALTERA O ATRIBUTO DO ELEMENTO INPUT
      campoSenha.setAttribute('type','text');
    } else {
      campoSenha.setAttribute('type','password');
    }
  }

E prontinho. Sobre os métodos .getAttribute e .setAttribute, vou deixar os links da documentação para entender melhor.

Bons estudos, Edgard.

Edgard,

Trocando ideia com alguns colegas encontrei outro jeito de fazer a mesma coisa, e bem mais simples.

Recomendo que use este método.

Seguindo a estrutura do input com o botão com ícone que mostrei acima, agora vamos mexer somente no type do input, que agora será um Property binding, e receberá uma propriedade de dentro do componente, vou chamar essa propriedade de tipoInput. E o evento de click agora não recebe mais parâmetro.

<div class="input-group">
    <input
         [type]="tipoInput"
          class="form-control"
          placeholder="Senha"
          [(ngModel)]="senha"
          name="senha"
          #campoSenha="ngModel"
          required
    />
    <div class="input-group-append">
        <button class="btn btn-outline-secondary" type="button" (click)="senhaVisivel()"><i class="fa fa-eye"
            aria-hidden="true"></i></button>
     </div>
</div>

No LoginComponent, vamos criar a propriedade e iniciar ela como "password". No método senhaVisivel() vamos fazer com que tipoInput verifique o valor, caso for "password" atribuir "text", senão for "password" deve atribuir "password", só que agora usando um if ternário.

tipoInput = 'password';

  constructor( . . . ) {}
  ngOnInit(): void {}
  login() { . . . }

  senhaVisivel(){
    this.tipoInput = this.tipoInput === "password" ? "text" :  "password";
  }

Espero ter ajudado, Edgard. Bons estudos.