Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Show the "Can't be blank" message under the password input #1882

Merged
merged 2 commits into from
Jun 11, 2020

Conversation

adamjmcgrath
Copy link
Contributor

Changes

Show the "Can't be blank" message under the password field when you try and submit a blank password.

Before

before

After

after

References

fixes #1721

Testing

Please describe how this can be tested by reviewers. Be specific about anything not tested and reasons why. If this library has unit and/or integration testing, tests should be added for new functionality and existing tests should complete without errors.

  • This change adds unit test coverage
  • This change adds integration test coverage
  • This change has been tested on the latest version of the platform/language

Checklist

@adamjmcgrath adamjmcgrath requested a review from a team June 9, 2020 10:55
@@ -1210,6 +1210,7 @@ loadingSize = 30px
.auth0-lock-password-strength
width 100%
bottom 41px
left 0
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Now the password strength field is position relative to the password input, we have to add left 0 to take the padding for the icon into account (other wise the password strength tooltip would be 40px to the right)

@@ -40,8 +40,8 @@ export default class InputWrap extends React.Component {
<div className={wrapClassName}>
{iconElement}
{this.props.children}
{after}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The component after is only ever the password strength field. I've made it positioned relative to this div, because it doesn't change height (the outer div does depending on the value of errorTooltip)

@@ -61,7 +61,7 @@ export default class PasswordInput extends React.Component {
<InputWrap
after={passwordStrength}
focused={focused}
invalidHint={policy ? undefined : invalidHint}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

My assumption is that this logic was added because we didn't want to reposition the password strength tooltip if there was an invalid hint.

@adamjmcgrath adamjmcgrath merged commit eb6f64c into master Jun 11, 2020
@lbalmaceda lbalmaceda deleted the blank-pw-hint branch June 11, 2020 15:51
@stevehobbsdev stevehobbsdev added this to the vNext milestone Jun 19, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Empty password validation message missing
3 participants