sators / react-password-checklist Goto Github PK

Hello,

Thank you for an easy to implement password checklist package. This has simplified several forms and error handling.
Our current design does not include a icon and I've successfully hidden the icon by setting the iconSize: {0}.

However when I added custom lines that are outside of the provided rules - such as "Please use an original password", the text has to adjust because the hidden icon still populates space for the SVG component. I tried using CSS styling too set display to none for "checklist-icon" but see that it is still displaying with our current design.

I look forward to an update that includes something like:

displayIcon: none

Describe the bug
The default message for the minLength rule is "Password has more than minLength characters.". The actual evaluation, though is equivalent to "Password has at least minLength characters.".

Basically, if you set the minLength prop to e.g. 8, the message would indicate to the user that they need to have a password that is more than 8 characters.

To Reproduce
Steps to reproduce the behavior:

1. Use the minLength rule
2. See the message telling you that the password length needs to be longer than minLength characters

Expected behavior
The default message should tell the user the correct number of characters required for the password

Additional context
The actual valid/invalid logic is correct, it's just that the default message implies a password.length > minLength evaluation, when it's actually password.length >= minLength

Finally, thank you for your work on this open-source component. If you agree with my assessment above, I'd be happy to submit a PR for the change.

Describe the bug

Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem. 
    at ReactPasswordChecklist (http://localhost:3001/node_modules/.vite/deps/react-password-checklist.js?v=63cbebdc:35:22)

To Reproduce

import PasswordChecklist from "react-password-checklist";

<PasswordChecklist
	rules={["minLength","specialChar","number","capital","match"]}
	minLength={5}
	value={password}
	valueAgain={passwordAgain}
	onChange={(isValid) => {}}
/>

Expected behavior
No JS errors or warnings

Desktop (please complete the following information):

• OS: macOS Ventura 13.1
• Browser Chrome
• Version 119

Additional context
package.json

"react": "^18.2.0",
"react-password-checklist": "^1.5.0",

Describe the bug
After implementing the password checklist for trying it out in my app I am getting an error:

TypeError: Cannot read properties of null (reading 'useMemo') at ReactPasswordChecklist (index.js:96:31) which refers to
var enabledRules = useMemo(function () { return rules.filter(function (rule) { return Boolean(ruleDefinitions[rule]); }); }, [rules]);

I'm using it like this in React app:

Expected behavior
Working library

Desktop (please complete the following information):

• iOS

I wonder if there is a separate way to catch each rule's error. So I can handle my password and confirmPassword field separately.

ex. As we get isValid in onChange prop, we've been able to get each rule's validation status.

Thanks.

Why '@' character excluded from special characters ?

While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR! react@"^18.2.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.0||~17.0.2" from [email protected]
npm ERR! node_modules/react-password-checklist
npm ERR! react-password-checklist@"*" from the root project

Current version with the latest React devtools:

Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.
at ReactPasswordProps (webpack-internal:///./node_modules/react-password-checklist/dist/index.js:34:24)

Thanks for your package it works fine but i have a question. is it possible to change the icon for a fully personnalisation?

Thanks

Is your feature request related to a problem? Please describe.
Although the library provides exactly what we need in our latest project we opted not to use react-password-checklist simply because it uses styled-components which makes up at least 52% of the bundled size.

Describe the solution you'd like
It shouldn't be very complicated to omit styled-components and just use inline styles.

Describe alternatives you've considered
You could also provide a css file with the lib that must be imported.

Additional context

show password is weak, so-so, stronger, very strong

I try to implement the onChange functionality in order to make a distinction between the password that is validated against the password rules and the matching of the password.
The onChange is only triggered if isValid changes. And this only happens if all of the requirements are met, or none of the requirements are met if you start filling in a password.

I would expect, that onChange is triggered if the password is changing from valid to invalid AND if one of the rules changes from being non-compliant with the rule to being compliant with the rule, or from compliant to non compliant.

As it is now, the failedRules are sort of useless, while it could be great functionality in telling the user in depth where something is going wrong

There is a way to change or translate messages ?

this is very perfect extension, but I would like:
1 add a function for lowercase
2 add a maximum length
3 if password and password again are empty, there are empty judge

Try with jest and it throws this error.

Describe the bug
The text inside of the list does not seem to be vertically centred with the svg icon.

To Reproduce
add into nextjs app using tailwind

Expected behavior
text should be aligned vertically in center with the svg icon

Screenshots

After fixes:

Desktop (please complete the following information):
mac os chrome

Additional context
Removing padding top and changing list style from align-items: flex-start into align-items: center seems to fix the issue.

Suggestion
It would be handy to be able to apply some styles directly to the li element

Is it possible to make a rule for lowercase and uppercase letters in the same function?

Or maybe have possibility to add onw regex and custom text for that regex.

First, thank you for your package.
I have a question, can you add a property "validTextColor, invvalidTextColor" for the component?

Thanks

Describe the bug

When used with Next.js, a "Syntax Error: Cannot use import statement outside a module" error occurs during server-side rendering.

repository: https://github.com/cateiru/react-password-checklist-nextjs

To Reproduce
Steps to reproduce the behavior:

1. clone repo: https://github.com/cateiru/react-password-checklist-nextjs
2. yarn install
3. yarn dev
4. access localhost:3000

Also, the build fails

❯❯❯ yarn build
yarn run v1.22.11
$ next build
info  - Checking validity of types
info  - Creating an optimized production build
info  - Compiled successfully

> Build error occurred
/react-password-checklist-nextjs/node_modules/react-password-checklist/dist/index.js:27
import React, { useState, useEffect } from "react";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1031:15)
    at Module._compile (node:internal/modules/cjs/loader:1065:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:94:18)
    at Object.782 (/react-password-checklist-nextjs/.next/server/pages/index.js:25:59)
    at __webpack_require__ (/react-password-checklist-nextjs/.next/server/webpack-runtime.js:25:42) {
  type: 'SyntaxError'
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots

Desktop (please complete the following information):

• OS: Ubuntu
• Browser: Chrome
• Version: 97.0.4692.99

Smartphone (please complete the following information):

Haven't tried

Additional context
Add any other context about the problem here.