export class AUsuariosComponent {

  model: any = {};
  userObj: User;
  users: User;
  users2: User;

  constructor(private userService: UserService, private router: Router) { }

  register() {
    this.users2 = new User();
    this.users2.email = this.users.email;
    this.users2.password = this.users.password;
    this.users2.user = this.users.user;
    this.userService.create(this.users2).subscribe(
      data => {
        this.refresh()
      },
      error => {
        console.log(Error)
      }
    )
  }

  refresh(): void {
    window.location.reload();
  }

  ngOnInit() {
    this.userService.getUsers().subscribe(
      response => {
        if (!response) {
          console.log(Error)
        } else {
          console.log(response)
          this.users = response
        }
      })
  }

  getUser(user: User) {
    this.userObj = user;
    this.userService.getUserById(user.id).subscribe(
      response => {
        if (!response) {
          console.log(Error)
        } else {
          this.users = response
        }
      })
  }

  updateUser(user: User) {
     this.userService.update(user).subscribe(
      data => {
        this.refresh()
      },
      error => {
        console.log(Error)
      })
  }

  desativarUsuario(user: User) {
    this.getUser(user);

    if (user.active == true){
      user.active = false;
      this.userService.update(user).subscribe(
        data => {
          this.refresh()
        },
        error => {
          console.log(Error)
        })
    } else if (user.active == false) {
      user.active = true;
      this.userService.update(user).subscribe(
        data => {
          this.refresh()
        },
        error => {
          console.log(Error)
        })
    }
  }

}

<div class="container" style="padding-top: 10px;">
    <form class="form-inline" (ngSubmit)="register()" #usuarioForm="ngForm" style="padding-top: 100px; padding-left: 90px;">
        <br>
        <br>

        <input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0" id="inlineFormInputName2" placeholder="Digite seu Nome Completo" required [(ngModel)]="users.user" #user="ngModel" name="user">

                <div class="input-group mb-2 mr-sm-2 mb-sm-0">
                    <input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Digite seu E-mail" required [(ngModel)]="users.email" #email="ngModel" name="email">
                </div>

                <input type="password" class="form-control mb-2 mr-sm-2 mb-sm-0" id="inlineFormInputName2" placeholder="Crie uma Senha" required [(ngModel)]="users.password" #password="ngModel" name="password">

        <button type="submit" class="btn btn-primary" [disabled]="!usuarioForm.valid">Criar novo Usuario</button>
    </form>
    <br>
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
            <table class="table table-striped table-hover">
                <thead>
                    <tr>
                        <th>Nome</th>
                        <th>Email</th>
                        <th>Trocar Senha</th>
                        <th>Desativar</th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let user of users" >
                        <td [ngClass]="user.active == false ? 'bg-gray' : 'bg-green'" >{{user.user}}</td>
                        <td [ngClass]="user.active == false ? 'bg-gray' : 'bg-green'" >{{user.email}}</td>
                        <td [ngClass]="user.active == false ? 'bg-gray' : 'bg-green'" >
                            <button class="btn btn-danger" data-toggle="modal" (click)="getUser(user)" data-target="#exampleModal">Recuperar Senha</button>
                        </td>
                        <td [ngClass]="user.active == false ? 'bg-gray' : 'bg-green'" >
                            <button [hidden]="user.active == false" class="btn btn-danger" (click)="desativarUsuario(user)" >Desativar</button>
                            <button [hidden]="user.active == true" class="btn btn-danger" (click)="desativarUsuario(user)" >Ativar</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Recuperar Senha</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
            <input type="password" class="form-control mb-2 mr-sm-2 mb-sm-0" id="inlineFormInputName2" placeholder="Crie uma Senha"required>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
          <button type="button" class="btn btn-primary" (click)="updateUser(userObj)" >Salvar</button>
        </div>
      </div>
    </div>
  </div>