Skip to content
This repository has been archived by the owner on Feb 28, 2018. It is now read-only.

Only works if loaded at initial mount #27

Open
alexmcmillan opened this issue Oct 14, 2015 · 6 comments
Open

Only works if loaded at initial mount #27

alexmcmillan opened this issue Oct 14, 2015 · 6 comments

Comments

@alexmcmillan
Copy link

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
Copy link
Owner

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
Copy link
Author

Yeah that's what I did.

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

@seethroughdev
Copy link
Owner

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
Copy link

@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
Copy link
Owner

thanks @dylanjbarth that would be great.

dylanjbarth pushed a commit to pelucid/react-ux-password-field that referenced this issue Jan 20, 2016
dylanjbarth pushed a commit to dylanjbarth/react-ux-password-field that referenced this issue Jan 20, 2016
dylanjbarth pushed a commit to dylanjbarth/react-ux-password-field that referenced this issue Jan 20, 2016
seethroughdev pushed a commit that referenced this issue Jan 28, 2016
Load zxcvbn when component is mounted. Fixes #27.
seethroughdev pushed a commit that referenced this issue Feb 10, 2016
…rd-field into upstream

* 'upstream' of github.com:seethroughtrees/react-ux-password-field:
  Load zxcvbn when component is mounted. Fixes #27.
seethroughdev pushed a commit that referenced this issue Feb 10, 2016
* upstream:
  Load zxcvbn when component is mounted. Fixes #27.
@bvescovi-orangeloops
Copy link

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);

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants