mmw / react-password-strength Goto Github PK

Hi, this is me being a noob but how do i call the clear function?

Is there any good way to import the module ?

Something like this would be nice:

import ReactPasswordStrength from 'react-password-strength'

Thanks !

Hope you're doing well!
I just ran across this need at work to give users helpful hints/tips while they are typing out a password and I realized zxcvbn already offers this object in their library. If you would be so kind as to expose this from zxcvbn (feedback object) in the results object on changeCallback that would be incredibly helpful. Thanks so much for your work and I'll appreciate any help you can offer!

The package is working, but when I build (with Meteor) I get:

  "!!../node_modules/css-loader/index.js!./style.css" in /Users/xxx/Working/yyy/node_modules/react-password-strength/dist/index.js (web.browser)
                                              
If you notice problems related to these missing modules, consider running:
                                              
  meteor npm install --save !!..

This error stops me deploying to production. I have run npm install --save but this does not update anything.

Overriding custom CSS is currently a pain because of provided styles. I think the ideal would be that if a users passes in CSS for the input, that is used instead of provided styles. Right now there is no way to get the default CSS working without a lot of hard-coded when using a Bootstrap input. Is there a plan or way to tell the component not to use any built-in CSS?

Some suggestions:

• Don't set font family
• Don't set border styles
• Don't set font sizes
• Don't set text colors

As I see it, the only styles that should be provided are the bar minimum to get the status bar to work. Besides that, it should be up to passing className and/or style to each of the sub-components (like input, desc, etc).

Hey, I attempted to use this package and got stuck at the import statement from the README:

Unable to resolve module `!!../node_modules/css-loader/index.js!./style.css` from `/Users/asawyers/Documents/Zenblock/React/react-native-zenblock/node_modules/react-password-strength/dist/index.js`: Module does not exist in the module map

This might be related to https://github.com/facebook/react-native/issues/4968
To resolve try the following:
  1. Clear watchman watches: `watchman watch-del-all`.
  2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.
  3. Reset Metro Bundler cache: `rm -rf $TMPDIR/react-*` or `npm start -- --reset-cache`.  4. Remove haste cache: `rm -rf $TMPDIR/haste-map-react-native-packager-*`.

ABI25_0_0RCTFatal
__37-[ABI25_0_0RCTCxxBridge handleError:]_block_invoke
_dispatch_call_block_and_release
_dispatch_client_callout
_dispatch_main_queue_callback_4CF
__CFRUNLOOP_IS_SERVICING_THE_MAIN_DISPATCH_QUEUE__
__CFRunLoopRun
CFRunLoopRunSpecific
GSEventRunModal
UIApplicationMain
main
start

I saw the other issue in here, but I am not using meteor. This also throws a different error. I tried all the suggestions in the error as well.

Google searches come up with meteor only solutions.

Any ideas?

Does it make sense to move {...inputProps} to allow for full controlled input?

        <input
          type="password"
          className={inputClasses.join(' ')}
          onChange={this.handleChange.bind(this)}
          ref="ReactPasswordStrength-input"
          value={password}
          {...inputProps}
        />

Would massively recommend switching out the strength library to this https://github.com/tracker1/asdfgh. Take a look!

Right now these get discarded

Adding placeholder attribute is not refleted in final component render, seem like it gets omitted. Is there a way to get this fixed?

If passed as props onChange won't work for the input inside the component, because it would trigger the function in the current component.

inputProps={{ onChange: this.handleChange }}

Currently, we can only send the props as a string.

When user copy-pastes a string of 50-100 symbols the component freezes the page for several seconds. Can you check it?

The latest version is not published in npm

Almost everyone is on React 17 these days but not this library:

npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.0.0" from [email protected]
npm ERR! node_modules/react-password-strength
npm ERR!   react-password-strength@"2.4.0" from the root project

Reasons this isn't happening?

Currently inputProps.className overwrites all and basically, it makes internal CSS classes for displaying validity obsolete.

In my case I only want to amend another class name without overwriting any internal CSS classes. Something like inputProps.defaultClassName which I could set to i.E. form-control so that bootstrap styles can be added to.

Time to bump to React v15.5.x?

zxcvbn can take additional dictionary words in the user_inputs paramter. Let's allow users of this library to pass in additional user_inputs to the zxcvbn library.

this is the largest dependency in our project, but looking at the code i can't figure out why it needs to be.

sure, the frequency list is large (and maybe that should be another ticket about making a version that doesn't have that included) but there seems to be a lot of other stuff in the bundle that doesn't need to be there (node process shims, react and prop-types is bundled, etc.).

I'm not sure if any source code needs to change, but peerDeps needs to be updated.

'Warning: Shallow renderer has been moved to react-test-renderer/shallow. Update references to remove this warning.'

I think it might make more sense to replace PhantomJS as the maintainer has stepped down. Consider switching to headless chrome

I would like the component to focus on mount. How can I do that ?
If it's not possible with the current component, I can create a PR to add this feature.

Hi, it might be useful to check if a password is too long.

I downloaded your project and implemented it locally. The logic follows the tooShort pattern. But there is one important difference. Too long is only tested, if the maxLengh is greater than 0 and the default value is 0. This prevents breaking of existing applications.

By the way: nice work!

window is not defined for SSR

node_modules/react-password-strength/dist/index.js:339
return /msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase());

having trouble when i am using two-step form. when back from step 2 password become empty again

When you have set a min length of i.E. 8 and enter a shorter password which DOES meet the min score, the input score word is OK which is irritating.

Should display too short or something like that.

Hi, is there a way to modify or override the color array for the ReactPasswordStrength-strength-desc and ReactPasswordStrength-strength-bar?

Updated: .ReactPasswordStrength.is-strength-3 .ReactPasswordStrength-strength-desc {color: #d1462f !important;} does the magic for me, however, is there a better way?

We need our passwords to contain at least a non-alphanumerical character. Is there a way of passing that as an option to control when it becomes valid?

Running an app using the latest release (2.3.1) in heroku, I get the following.

2017-12-21T16:56:09.885131+00:00 app[web.1]: /app/node_modules/react-password-strength/dist/index.js:1500
2017-12-21T16:56:09.885151+00:00 app[web.1]: 		return /msie [6-9]\b/.test(self.navigator.userAgent.toLowerCase());
2017-12-21T16:56:09.885153+00:00 app[web.1]: 		                           ^
2017-12-21T16:56:09.885154+00:00 app[web.1]: 
2017-12-21T16:56:09.885155+00:00 app[web.1]: ReferenceError: self is not defined
2017-12-21T16:56:09.885156+00:00 app[web.1]:     at /app/node_modules/react-password-strength/dist/index.js:1500:30
2017-12-21T16:56:09.885157+00:00 app[web.1]:     at /app/node_modules/react-password-strength/dist/index.js:1495:47
2017-12-21T16:56:09.885158+00:00 app[web.1]:     at module.exports (/app/node_modules/react-password-strength/dist/index.js:1517:68)
2017-12-21T16:56:09.885159+00:00 app[web.1]:     at Object.<anonymous> (/app/node_modules/react-password-strength/dist/index.js:1397:37)
2017-12-21T16:56:09.885160+00:00 app[web.1]:     at __webpack_require__ (/app/node_modules/react-password-strength/dist/index.js:30:30)
2017-12-21T16:56:09.885160+00:00 app[web.1]:     at Object.<anonymous> (/app/node_modules/react-password-strength/dist/index.js:1205:1)
2017-12-21T16:56:09.885161+00:00 app[web.1]:     at __webpack_require__ (/app/node_modules/react-password-strength/dist/index.js:30:30)
2017-12-21T16:56:09.885162+00:00 app[web.1]:     at module.exports (/app/node_modules/react-password-strength/dist/index.js:73:18)
2017-12-21T16:56:09.885163+00:00 app[web.1]:     at /app/node_modules/react-password-strength/dist/index.js:76:10
2017-12-21T16:56:09.885164+00:00 app[web.1]:     at webpackUniversalModuleDefinition (/app/node_modules/react-password-strength/dist/index.js:3:20)

v2.2.0 does not have this issue.