import { Component , Input , ViewChild , ElementRef , OnInit , Inject , NgZone , Output , EventEmitter , forwardRef , PLATFORM_ID , OnDestroy } from '@angular/core' ; import { ControlValueAccessor , NG_VALUE_ACCESSOR } from '@angular/forms' ; import { isPlatformBrowser , isPlatformServer } from '@angular/common' ; import { Subscription } from 'rxjs' ; import { CAPTCHA_CONFIG , CaptchaConfig } from './ng-hcaptcha-config' ; import { loadHCaptcha } from './hcaptcha-utils' ; declare const window ; @ Component ( { selector : 'ng-hcaptcha' , template : '<div #captcha class="h-captcha"></div>' , styles : [ ] , providers : [ { provide : NG_VALUE_ACCESSOR , useExisting : forwardRef ( ( ) => NgHcaptchaComponent ) , multi : true } ] } ) export class NgHcaptchaComponent implements OnInit , OnDestroy , ControlValueAccessor { @ Input ( ) siteKey : string ; @ Input ( ) theme : string ; @ Input ( ) size : string ; @ Input ( ) tabIndex : number ; @ Input ( ) languageCode : string ; @ ViewChild ( 'captcha' , { static : true } ) captcha : ElementRef ; @ Output ( ) verify : EventEmitter < string > = new EventEmitter < string > ( ) ; @ Output ( ) expired : EventEmitter < any > = new EventEmitter < any > ( ) ; @ Output ( ) error : EventEmitter < any > = new EventEmitter < any > ( ) ; private _value : string ; private widgetId : string ; private captcha$ : Subscription ; onChange : any = ( ) => { } ; onTouched : any = ( ) => { } ; constructor ( @ Inject ( CAPTCHA_CONFIG ) private config , private zone , @ Inject ( PLATFORM_ID ) private platformId ) { } ngOnInit ( ) { if ( ! this . languageCode ) { this . languageCode = this . config . languageCode ; } if ( isPlatformServer ( this . platformId ) ) { return ; } this . captcha$ = loadHCaptcha ( this . languageCode ) . subscribe ( ( ) => { setTimeout ( ( context ) => { const options = { sitekey : ( context . siteKey || context . config . siteKey ) , theme : context . theme , size : context . size , tabindex : context . tabIndex , callback : ( res ) => { context . zone . run ( ( ) => context . onVerify ( res ) ) ; } , 'expired-callback' : ( res ) => { context . zone . run ( ( ) => context . onExpired ( res ) ) ; } , 'error-callback' : ( err ) => { context . zone . run ( ( ) => context . onError ( err ) ) ; } } ; context . widgetId = window . hcaptcha . render ( context . captcha . nativeElement , options ) ; } , 50 , this ) ; } , ( error ) => { console . error ( 'Failed to load hCaptcha script' , error ) ; } ) ; setTimeout ( ( context ) => { } , 1000 , this ) ; } ngOnDestroy ( ) { this . captcha$ . unsubscribe ( ) ; } writeValue ( value ) { this . value = value ; if ( isPlatformBrowser ( this . platformId ) && ! this . value && window . hcaptcha ) { window . hcaptcha . reset ( this . widgetId ) ; } } registerOnChange ( fn ) { this . onChange = fn ; } registerOnTouched ( fn ) { this . onTouched = fn ; } get value ( ) { return this . _value ; } set value ( value ) { this . _value = value ; this . onChange ( value ) ; this . onTouched ( ) ; } param response private onVerify ( response ) { this . value = response ; this . verify . emit ( response ) ; } param response private onExpired ( response ) { this . expired . emit ( response ) ; } param error private onError ( error ) { this . error . emit ( error ) ; } }