import { Component , OnInit } from '@angular/core' ; import { FormControl , FormGroup , Validators } from '@angular/forms' ; import { BehaviorSubject , Observable , of } from 'rxjs' ; import { catchError , map , switchMap , take , throttleTime } from 'rxjs/operators' ; import { ApiService } from '../../../../../common/api/api.service' ; import { AbstractSubscriberComponent } from '../../../../../common/components/abstract-subscriber/abstract-subscriber.component' ; import { FormToastService } from '../../../../../common/services/form-toast.service' ; import { SettingsTwoFactorV2Service } from '../two-factor-v2.service' ; /**
 * Password confirm component - force a user to verify their password before enabling or removing 2fa
 */ @ Component ( { selector : 'm-twoFactor__passwordConfirm' , template : `
    <form class="m-twoFactor_passwordConfirmationForm" [formGroup]="form">
      <label i18n="@@2FA_PASSWORD_CONFIRM__PASSWORD">Password</label>
      <input
        type="password"
        name="password"
        formControlName="password"
        [ngModel]="password$ | async"
        (ngModelChange)="passwordValueChanged($event)"
      />

      <m-button
        [color]="'blue'"
        (onAction)="onConfirmClick()"
        [saving]="inProgress$ | async"
      >
        <ng-container i18n="@@2FA_PASSWORD_CONFIRM__CONFIRM"
          >Confirm</ng-container
        >
      </m-button>
    </form>
  ` , styleUrls : [ './confirm-password.component.ng.scss' ] , } ) export class SettingsTwoFactorPasswordComponent extends AbstractSubscriberComponent implements OnInit { public form : FormGroup ; public readonly password$ : BehaviorSubject < string > = new BehaviorSubject < string > ( '' ) ; public readonly inProgress$ : BehaviorSubject < boolean > = new BehaviorSubject < boolean > ( false ) ; returns { Observable < boolean > } get disabled$ ( ) : Observable < boolean > { return this . password$ . pipe ( map ( ( password ) => ! password || password . length < 6 ) ) ; } constructor ( private service , private api , private toast ) { super ( ) ; } ngOnInit ( ) { this . form = new FormGroup ( { password : new FormControl ( '' , { validators : [ Validators . required ] , } ) , } ) ; } returns { void } public onConfirmClick ( ) { this . inProgress$ . next ( true ) ; this . subscriptions . push ( this . password$ . pipe ( take ( 1 ) , throttleTime ( 2000 ) , switchMap ( ( password ) => { return this . api . post ( 'api/v2/settings/password/validate' , { password : password , } ) ; } ) , catchError ( e => { this . inProgress$ . next ( false ) ; this . toast . error ( 'Incorrect password. Please try again.' ) ; return of ( null ) ; } ) ) . subscribe ( response => { this . inProgress$ . next ( false ) ; if ( response && response . status === 'success' ) { this . onSuccess ( ) ; return ; } this . password$ . next ( '' ) ; } ) ) ; } param { string } $event public passwordValueChanged ( $event ) { this . password$ . next ( $event ) ; } returns { void } private onSuccess ( ) { this . subscriptions . push ( this . service . activePanel$ . pipe ( take ( 1 ) ) . subscribe ( activePanel => { this . service . passwordConfirmed$ . next ( true ) ; this . password$ . next ( '' ) ; switch ( activePanel ?. intent ) { case 'setup-app' : this . service . activePanel$ . next ( { panel : 'app-connect' } ) ; break ; case 'disable' : this . service . activePanel$ . next ( { panel : 'disable' } ) ; break ; case 'sms' : this . service . activePanel$ . next ( { panel : 'sms' } ) ; break ; } } ) ) ; } }