Only works if loaded at initial mount

[alexmcmillan]

I have a <Login /> component that uses this library but is only rendered if the user makes a request without being authorized.

If a new user arrives, this is mounted and rendered immediately and all works fine.

If, however, a user arrives with an existing valid session then this component is not mounted initially. If they then log out (or server invalidates session) then the <Login /> component is mounted and rendered. In this case, the <InputPassword /> component does not update the zxcvbn score.

I believe the problem is that the window load event occurred long ago, so the request to retrieve the zxcvbn library is not being executed.

[seethroughdev]

Sorry for the delay. Could you try loading the library yourself prior to the component? If the zxcvbn var exists, it will skip the load function.

Please let me know if that helps at all.

[alexmcmillan]

Yeah that's what I did.

Perhaps moving the request away from the load event would fix this?

[seethroughdev]

That is definitely a possibility. I'm a bit slammed and not using this component at the moment. If you want to submit any kind of PR, I'm happy to review and get it in there.

[dylanjbarth]

@seethroughtrees ran into this issue as well. subbing out the snippet for

(function(){
    var a,b;
    b=document.createElement("script");
    b.src=zxcvbnSrc;
    b.type="text/javascript";
    b.async=!0;
    a=document.getElementsByTagName("head")[0];
    a.parentNode.insertBefore(b,a);
}).call(this);

gave me the behavior I wanted. Happy to package this into a PR if you can't see any downsides to it.

[seethroughdev]

thanks @dylanjbarth that would be great.

[bvescovi-orangeloops]

Hi,
I found the same problem and to don't change the behavior if the page hasn't been loaded I use this snippet:

      // snippet to async load zxcvbn if enabled
      (function(){
        var a;
        a=function(){
          var a,b;
          b=document.createElement("script");
          b.src=zxcvbnSrc;
          b.type="text/javascript";
          b.async=!0;
          a=document.getElementsByTagName("head")[0];
          return a.parentNode.insertBefore(b,a)
        };
        if (document.readyState === "complete")
          a();
        else
          null!=window.attachEvent?window.attachEvent("onload",a):window.addEventListener("load",a,!1);
      }).call(this);