import { Component , ElementRef , Input , ViewChild } from '@angular/core' ; import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap' ; import { User } from '../../../models/user' ; import { FormControl , FormGroup , Validators } from '@angular/forms' ; import { UserService } from '../../../services/user.service' ; import { ToastService } from '../../../../layout/toast/toast.service' ; @ Component ( { templateUrl : './users-passwd-modal.component.html' , styleUrls : [ './users-passwd-modal.component.scss' ] } ) export class UsersPasswdModalComponent { @ ViewChild ( 'passWordInput' ) public passWordToggle : ElementRef ; @ Input ( ) public user : User ; public passwdForm : FormGroup ; constructor ( private userService , public activeModal , private toast ) { this . passwdForm = new FormGroup ( { public_id : new FormControl ( null ) , password : new FormControl ( '' , Validators . required ) } ) ; } public get password ( ) { return this . passwdForm . get ( 'password' ) ; } public toggleInput ( ) { if ( this . passWordToggle . nativeElement . type === 'password' ) { this . passWordToggle . nativeElement . type = 'text' ; } else { this . passWordToggle . nativeElement . type = 'password' ; } } public onPasswordChange ( ) { if ( this . passwdForm . valid ) { const changePasswd = this . userService . changeUserPassword ( this . user . public_id , this . passwdForm . get ( 'password' ) . value ) . subscribe ( ( user ) => { this . toast . success ( `Password for user with ID: ${ this . user . public_id } was changed` ) ; this . activeModal . close ( user ) ; changePasswd . unsubscribe ( ) ; } ) ; } } }