Problem
I am trying to create a log in page that follows the material design guidelines, but I don't know how to handle when the user inputs the wrong email or password.
In the material design guidelines they recommend showing an error text right below the incorrect input field, but for security reasons we cannot tell the user whether the email or password is wrong. We can only tell the user that one or both fields are wrong (but not which one).
Our current error message on a failed log in reads:
We dont recognize this e-mail or password. Double-check your information and try again.
Example
When trying to transfer this to our material design, we end up with options looking like this:
- The first option does not follow our safety regulations as it tells the user which of the fields is wrong.
- In the second option the information is repetitive and feels like it doesn't provide the user with any helpful info.
- The third option deviates from the material design guidelines.
We have thought about splitting the log in up into two pages, but that is something we want to avoid.
What's our best option?
Edit
Added a snackbar toast based on advice by @Harshith.
Answer
Try using toast in material design
Material-UI Snackbars Docs https://material.io/guidelines/components/snackbars-toasts.html
I think this should solve your problem
If not try this other option of card
In this case have a error shown and show a icon, as the error text is big by clicking on the icon reveals the text. Main thing we need to show to user is there is error in a field.
Or simply show email/password entered is incorrect . please check
No comments:
Post a Comment