aws-amplify / aws-amplify/amplify-ui
FR (Authenticator): Password requirement hints in ConfirmResetPassword & ForceNewPassword
- Dominant language
- TypeScript
- Stars
- 1.1k
- Forks
- 347
- Avg merge
- 18h 29m
- Merged PRs (30d)
- 9
Description
### On which framework/platform would you like to see this feature implemented?
React
### Which UI component is this feature-request for?
Authenticator
### Please describe your feature-request in detail.
Right now, in ConfirmResetPassword and ForceNewPassword, a validation about both PasswordField matching is being made but what about adding an option for additional requirements such as Length, Numbers, Special Characters, Capital and Lowercase letter, etc.
### Please describe a solution you'd like.
Right now our team is using the package react-password-checklist (https://www.npmjs.com/package/react-password-checklist) in the Footer section of ConfirmResetPassword but this method requires adding eventListeners. Also we cannot use the same method for now in ForceNewPassword as it only supports FormFields instead of Footer like most of the components from Authenticator.
So the solution would be to simply add a props to the FormFields of each component with PasswordField like this :
```
ForceNewPassword: {
PasswordRequirement: () => {
'match': true,
'minLength': 8,
'number': true,
'specialChar': true,
'capital': true,
'lowercase': true
}
};
```
### We love contributors! Is this something you'd be interested in working on?
- [ ] 👋 I may be able to implement this feature request.
- [ ] ⚠️ This feature might incur a breaking change.
Contributor guide
Research direction
Start by locating the React Authenticator implementations for ConfirmResetPassword and ForceNewPassword, especially their PasswordField and FormFields handling. Review the existing matching validation and determine how the requested configurable requirements should work in both components; done means the requirements are supported consistently without the external event-listener workaround.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- authentication, frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 25/100