Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Recaptcha not recognizing language change on first ngOnChanges call #47

Open
mikelseverson opened this issue Feb 20, 2019 · 0 comments
Open

Comments

@mikelseverson
Copy link

mikelseverson commented Feb 20, 2019

Background:
During initialization of the component, setupComponent calls registerCaptchaScript.

registerCaptchaScript adds the grecaptcha script tag for the language passed into the component via 'hl' binding.

If a grecaptcha script has already loaded, no script tag is added, the logic gets skipped. (see below)

    function (useGlobalDomain, render, onLoad, language) {
        var _this = this;
        if (this.grecaptchaScriptLoaded()) {
            // recaptcha script is alrseady loaded
            // just call the callback
            this.zone.run(function () {
                onLoad(window[_this.windowGrecaptcha]);
            });
            return;
        }
        // we need to patch the callback through global variable, otherwise callback is not accessible
        // note: https://github.com/Enngage/ngx-captcha/issues/2
        window[this.windowOnLoadCallbackProperty] = (/** @type {?} */ ((function () { return _this.zone.run(onLoad.bind(_this, window[_this.windowGrecaptcha])); })));
        // prepare script elem
        /** @type {?} */
        var scriptElem = document.createElement('script');
        scriptElem.innerHTML = '';
        scriptElem.src = this.getCaptchaScriptUrl(useGlobalDomain, render, language);
        scriptElem.async = true;
        scriptElem.defer = true;
        // add script to header
        document.getElementsByTagName('head')[0].appendChild(scriptElem);
    };

the issue:
first ngx-recaptcha2 component loads the grecaptcha in 'en' then is removed from dom
later a new ngx-recaptcha2 component initializes with 'fr' for a language
english gets reused on the new component, the hl value is ignored.
Now, if the second component now updates hl to 'es', ngx-recaptcha2 updates grecaptcha appropriately.

This seems to be caused by scriptService.cleanup not being called during the first hl value change.

        if (changes && changes.hl) {
            // cleanup scripts when language changes
            if (!changes.hl.firstChange && (changes.hl.currentValue !== changes.hl.previousValue)) {
                this.scriptService.cleanup();
            }
        }

Workaround:
reproducing scriptService.cleanup when destroying the first ngx-captcha seems to get the second component to initialize as expected.

  ngOnDestroy() {
    window.ngx_captcha_onload_callback = undefined;
    window.windowGrecaptcha = undefined;
  } 

Thanks for the building this out, it has been great to use!

@mikelseverson mikelseverson changed the title Recaptcha script already loaded not Recaptcha not recognizing language change on first ngOnChanges Feb 20, 2019
@mikelseverson mikelseverson changed the title Recaptcha not recognizing language change on first ngOnChanges Recaptcha not recognizing language change on first ngOnChanges call Feb 20, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant