Password error message unstyled

[seabelis]

Problem

The error message shown to patrons when they've used the incorrect login password blends into the page text and patrons seem to miss it. The error should stand out so it's not missed.

Reproducing the bug

1. Go to ...login (when logged out)
2. Do ...use incorrect password to login

• Expected behavior: Error message should stand out and not blend into text.
• Actual behavior: Error message blends into text.

Context

• Browser (Chrome, Safari, Firefox, etc):
• OS (Windows, Mac, etc):
• Logged in (Y/N):
• Environment (prod, dev, local): prod

Breakdown

Requirements Checklist

• [ ]

Related files

Stakeholders

---

Instructions for Contributors

• Please run these commands to ensure your repository is up to date before creating a new branch to work on this issue and each time after pushing code to Github, because the pre-commit bot may add commits to your PRs upstream.

[jimchamp]

#10044 replaces the "Google sign-in is temporarily unavailable[...]" message with the Google sign-in affordance, so things will be like they were before the incident. Is that enough to close this issue, or do you have something else in mind @seabelis?

[mekarpeles]

@jimchamp I think the problem is actually the lack of emphasis around the error message itself:

I thought maybe we had error message designs from @rebecca-shoptaw's registration redesign w/ Ruijingya

[rebecca-shoptaw]

We do! The issue seems to be that the error is being sent to the form's "note" div in account.py, whereas the errors in the signup form are added to the i.e. #emailAddrMessage div which lives above the input and has the ol-signup-form__error class.

Just putting that class on would make it look a little strange, and be weird if form.note is used for anything else:

Perhaps a simpler solution would be to add a form.error if submission failed and use that to render the appropriate message in one of those flash-message error divs?

[cdrini]

^ That approach makes the most sense, and will also handle the other types of errors login can throw!