import { Component , ElementRef , forwardRef , OnChanges , OnInit , ViewChild , } from '@angular/core' ; import { ControlValueAccessor , NG_VALUE_ACCESSOR } from '@angular/forms' ; import { Client } from '../../services/api' ; export const CAPTCHA_VALUE_ACCESSOR = { provide : NG_VALUE_ACCESSOR , useExisting : forwardRef ( ( ) => CaptchaComponent ) , multi : true , } ; export class Captcha { jwtToken : string ; base64Image : string ; clientText : string ; buildClientKey ( ) { return JSON . stringify ( { jwtToken : this . jwtToken , clientText : this . clientText , } ) ; } } @ Component ( { selector : 'm-captcha' , templateUrl : 'captcha.component.html' , providers : [ CAPTCHA_VALUE_ACCESSOR ] , } ) export class CaptchaComponent implements ControlValueAccessor , OnInit { captcha = new Captcha ( ) ; image : string ; value : string = '' ; propagateChange = ( _ ) => { } ; constructor ( private client ) { } ngOnInit ( ) { this . refresh ( ) ; } async refresh ( ) { const response = await this . client . get ( 'api/v2/captcha' , { cb : Date . now ( ) , } ) ; this . captcha . base64Image = response . base64_image ; this . captcha . jwtToken = response . jwt_token ; this . onValueChange ( '' ) ; } onValueChange ( value ) { this . captcha . clientText = value ; this . value = this . captcha . buildClientKey ( ) ; this . propagateChange ( this . value ) ; } writeValue ( value ) { } registerOnChange ( fn ) { this . propagateChange = fn ; } registerOnTouched ( fn ) { } }