opportunity-hack / evs

Equestrian Volunteer Scheduler
https://www.ohack.dev/nonprofit/89076bcc077811edbfdeb29c4ac23549
MIT License
1 stars 2 forks source link

Submit buttons showing ❌ on validation errors #9

Open parkerdavis1 opened 1 year ago

parkerdavis1 commented 1 year ago

When logging in, if username/password is not correct, the Login button shows an ❌ emoji which persists after subsequently editing the username and password fields. This is visually confusing because the ❌ implies the Log in button is disabled when it is not.

image

The same thing happens when signing up and you enter an email that already has an account. I'm sure this happens on many different buttons throughout the app.

image

I would suggest removing the ❌ on buttons altogether.

benhsm commented 1 year ago

I'm not sure I agree with you on this one - the X is meant as feedback indicating that the action associated with the button has failed, where color and cursor shape on hover are used to indicate whether the button is enabled. In any case, thanks for raising the issue; I'm not going to make any changes to this component for the time being, but this is open to evaluation.

parkerdavis1 commented 1 year ago

Exactly, the X indicates there is a problem associated with the button, when the problem is really with the input field(s). Alternative feedback could be red outlines on the offending input fields or an alert box with the error message (invalid username or password).

gregv commented 4 months ago

Was able to repro this on https://staging.trottrack.org/signup and login, we want the X to go away on the button since it also is reset with the red outline on the text boxes.