Question: dynamic translation of recaptcha text

[xtoff]

Is it possible to dynamically change the language of the recaptcha when it is already loaded on the screen?

[DethAriel]

Hello! For now this is not possible. But it is something that's been on my radar for some time. Now that someone else needs it, I'll consider bringing next release to life quicker :) See below as to why this has been put on hold

The problem behind this is that it will require unloading the current reCAPTCHA files, loading new ones, and resetting reCAPTCHA in between. This, of course, will affect the page load speed, which could have been avoided by using reCAPTCHA language detection feature.

Could you elaborate on why do you need such capability, please?

[xtoff]

We have a form for registering a user with the captcha. The first field is a dropdown for selecting the language and the business people want the whole page translated when I switch that language..

[DethAriel]

Alright, so before this lands in the lib, here's a plunker that shows how you could leverage a custom RecaptchaLoader for this purpose See below as to why this has been put on hold

[mattfirtion]

I'm trying to implement this plunker using angular-cli but running into an issue.

Property 'ng2recaptchaloaded' does not exist on type 'Window'. in the provider.

The code works just fine in Plunkr, but when trying to run using angular-cli and webpack this occurs. Any ideas?

[DethAriel]

This is typescript warning you that such a property does not exist on type window. That's why the sources have this file. What's the environment you're running this in? How did you install ng-recaptcha?

[mattfirtion]

Installed using npm i ng-recaptcha --save. Not sure I understand what you mean by environment. I'm running this locally using ng serve.

[DethAriel]

what I cold suggest to you is copying the three-line file that I referenced and putting it near your custom provider file. This should fix the error

[mattfirtion]

That was it! Thanks for your help.

[csentis]

At least for me on angular@5.0.0-beta.7 and typescript@2.4.2, the window-issue is back (despite the interface).

What helped me was ngx-window-token, which uses an InjectionToken-based approach.

Other than it's plunker suggests, I had to tweak the use of it a bit:

1. Imported WindowTokenModule in AppModule,
2. imported WINDOW in (the loader) service (for a language-aware reCAPTCHA based on your plunker),
3. put @Inject(WINDOW) private _window: any into constructor.

See also maxisam/ngx-window-token#2.

[csentis]

@DethAriel Thanks for this library!

Could you help me with your plunker mentioned above?

In the constructor of the component in which I have the reCAPTCHA embedded, I also happen to have a subscription to events that indicate whether the language has changed. That subscription should also call updateLanguage(). It does, however, once the subscription is initialized, it calls updateLanguage and rightly complains that the script area is not empty.

This might possibly also be a use case for the next version of your lib? Can you already guestimate when this could be due?

Christian

[DethAriel]

@csentis , btw there is an updated plunker for dynamic language change.

Unfortunately after careful consideration I've decided to not pursue this feature for now. That is because of the bugs that are outside of my control (i.e. recaptcha cleanup/scheduled tasks). Code samples that are referenced through plunker can be used at your own risk, consider them being a jump start rather than a part of the lib :)

To conclude, this use-case was apparently not included in the initial reCAPTCHA design, but you can still rely pretty safely on its automatic language recognition. Indeed, if the user chooses to see your web app in language X, but has their browser configured to use language Y - well, they should be prepared to be seeing both languages from time to time.

[csentis]

Thanks, mate, will look into it and fully understand especially the cleanup part :)