fix(onboarding-pass-validation): added password validation #424
Conversation
@@ -35,3 +35,10 @@ | |||
visibility: visible; | |||
} | |||
} | |||
|
|||
.helpMessage { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
currently we highlight the bottom border of the input that isn;t correct and make the border $red
. we also make the error text $red
. can you make those style changes?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Working on it.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Since we use input field with all borders making just the bottom one red will look strange. I haven't seen this pattern in sites/apps, so in my opinion it will not be consistent in usability point of view. I've made all borders and error text to get $red when error occurs. Is that Ok?
@@ -35,6 +36,9 @@ const NewWalletPassword = ({ | |||
> | |||
Passwords do not match | |||
</p> | |||
<p className={`${styles.helpMessage} ${passwordMinChars && styles.visible}`}> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
this visible class doesn't apply to helpMessage
right? It looks like it's nested inside errorMessage
in the scss
file.
Also this logic seems to apply visible
when the passwords match and the char count is 8 or over. Shouldn't it be the other way around?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
When I'm testing this PR the error message shows up before I start typing anything
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The help message is intended to always stay visible for better usability. I've just forgotten to clean up the code.
If the help message is hidden some users will try to create passwords with less than 8 chars and then fail. They will be forced to rethink and resubmit their pass which is considerable user effort. We can prevent such cases by leaving the help message always visible. See this article.
@odb366 I was just testing this and added some comments/feedback |
Could you also squash + rebase the commits? |
Thanks for the feedback guys. However, I can't commit because i got the following error. Even when I swich to my local master branch which is up-to-date i still got this error:
|
@odb366 you need to run |
@mrfelton Thanks for your lightning quick answer :) |
Latest commit improves the password validation by highlighting the always visible help message The same way inline validation about password match is fixed in this commit. It won't appear immediately after typing in the second field, but when the users has typed equal amount of characters as in the first field. |
utACK 1ef2c96 |
Fixes issue #415
Now, users are not allowed to proceed with the onboarding process if their wallet pass is less than 8 chars.