import { Observable , Subscription } from "rxjs" ; import { Store , select } from "@ngrx/store" ; import { filter , map , pairwise } from "rxjs/operators" ; import type { AfterViewInit , OnDestroy } from "@angular/core" ; import { Directive , ElementRef , Injector , QueryList , ViewChildren } from "@angular/core" ; import { FormControl , Validators } from "@angular/forms" ; import { NOTIFICATION_ACTIONS , OPTIONS_ACTIONS } from "src/web/browser-window/app/store/actions" ; import { OptionsSelectors } from "src/web/browser-window/app/store/selectors" ; import { SAVE_PASSWORD_WARN_TRUSTED_HTML } from "./const" ; import { State } from "src/web/browser-window/app/store/reducers/options" ; @ Directive ( ) export abstract class LoginBaseComponent implements AfterViewInit , OnDestroy { readonly password = new FormControl ( null , Validators . required ) ; readonly savePassword = new FormControl ( false ) ; @ ViewChildren ( "passwordRef" ) passwordElementRefQuery ! : QueryList < ElementRef > ; protected readonly store : Store < State > ; readonly signingIn$ : Observable < boolean > ; readonly loadingDatabase$ : Observable < boolean > ; protected readonly subscription = new Subscription ( ) ; constructor ( protected injector ) { this . store = this . injector . get < Store < State > > ( Store ) ; this . signingIn$ = this . store . pipe ( select ( OptionsSelectors . FEATURED . progress ) , map ( ( progress ) => Boolean ( progress . signingIn ) ) ) ; this . loadingDatabase$ = this . store . pipe ( select ( OptionsSelectors . FEATURED . progress ) , map ( ( progress ) => Boolean ( progress . loadingDatabase ) ) ) ; this . subscription . add ( this . store . pipe ( select ( OptionsSelectors . FEATURED . keytarSupport ) ) . subscribe ( ( value ) => { this . savePassword [ value ? "enable" : "disable" ] ( ) ; } ) ) ; this . enableMasterPasswordWarning ( ) ; } ngAfterViewInit ( ) { if ( this . passwordElementRefQuery . length ) { this . passwordElementRefQuery . first . nativeElement . focus ( ) ; } } submit ( ) { this . store . dispatch ( OPTIONS_ACTIONS . SignInRequest ( { password : String ( this . password . value ) , savePassword : Boolean ( this . savePassword . value ) , } ) ) ; } ngOnDestroy ( ) { this . subscription . unsubscribe ( ) ; } private enableMasterPasswordWarning ( ) { this . subscription . add ( this . savePassword . valueChanges . pipe ( pairwise ( ) , filter ( ( [ prev , curr ] ) => Boolean ( curr ) && Boolean ( curr ) !== Boolean ( prev ) ) ) . subscribe ( ( ) => { this . store . dispatch ( NOTIFICATION_ACTIONS . Message ( { message : SAVE_PASSWORD_WARN_TRUSTED_HTML , style : "warning" , html : true } ) ) ; } ) ) ; this . savePassword . patchValue ( this . savePassword . value ) ; } }