1050008 - Problems with error messages on account creation page

Status: RESOLVED FIXED

(developer.mozilla.org Graveyard :: Sign-in, defect)

Description

[Stephanie Hobson [:shobson]]

The error messages appearing on the account creation page were blue links (except one).

- Blue is not a good colour for error messages 
- They were blue because they were links and when I clicked on the links they opened new windows
- One of the errors I got was not a blue link but a red bullet list (don't remember how I got it, sorry)

Could we use the new notification styles for these?

I'm okay with them being links but they need to scroll the page down not open a  new window.

Comment 1

[Jannis Leidel [:jezdez]]

Yeah, this is mostly re-using pre-existing form error styles which are unrelated to the notification styles, so this is basically a call to action to moving the that generic form error handling to the new notification styles? Or should this be only applied to this particular form?

Comment 2

[Stephanie Hobson [:shobson]]

Let's not open the "should we use notifications for all error styles" can of worms on this project.

Is there a standard way of throwing errors right now? Because I got two different styles. I think we should standardize on one of those styles for now.

Comment 3

[Jannis Leidel [:jezdez]]

Yeah, the difference in error styles is simple, Django form errors are split in two things field based errors and general form errors. In the template we use at various places on the site for form errors we render anchors for those errors that are field specific, to be able to jump to the field in question.

See https://github.com/mozilla/kuma/blob/master/templates/includes/error_list.html

Given the fact that most forms are small anyways, I'd suggest to simply remove the internal anchor as the error message will be specific about it anyways.

Alternatively we could also update the form rendering to not use this template for errors at all (as it shows up on top of the form in question) and render errors inline next to the fields themselves. That's also the recommended thing from Django's perspective: https://docs.djangoproject.com/en/dev/topics/forms/#rendering-form-error-messages

Comment 4

[Stephanie Hobson [:shobson]]

I like the idea of putting them inline, especially on a form this short. Let me know if you need any support for the styles.

Comment 5

[Jannis Leidel [:jezdez]]

Awesome, I think we have styles for those already, but I'll ping you next week when I have something concrete to show for before merging.

Comment 6

[[github robot]]

Commit pushed to master at https://github.com/mozilla/kuma

https://github.com/mozilla/kuma/commit/b22631246b41dd2609c54c69c3dbe738acb9e354
Improved the account disconnection error message to look like a real error notification. Refs bug #1050008.

Comment 7

[[github robot]]

Commit pushed to github-signup-errors at https://github.com/mozilla/kuma

https://github.com/mozilla/kuma/commit/c455381d57e9cddd9e154fdfad7394ae82a538ac
Show signup form errors inline and render non-field form errors as error notifications.

This also makes sure we show the duplicate email error message inline instead of a notification to normalize the error handling between an error with the other email address and one of the Github provided verified email addresses. This is done by demoting the duplicate email form error to a field level error.

Fixes bug #1050008.

Comment 8

[[github robot]]

Commit pushed to github-connect-request at https://github.com/mozilla/kuma

https://github.com/mozilla/kuma/commit/b22631246b41dd2609c54c69c3dbe738acb9e354
Improved the account disconnection error message to look like a real error notification. Refs bug #1050008.

Comment 9

[[github robot]]

Commit pushed to github-connect-request at https://github.com/mozilla/kuma

https://github.com/mozilla/kuma/commit/c455381d57e9cddd9e154fdfad7394ae82a538ac
Show signup form errors inline and render non-field form errors as error notifications.

Comment 10

[Jannis Leidel [:jezdez]]

Sigh, sorry for the noise, but this is still in a branch.

Comment 11

[[github robot]]

Commit pushed to master at https://github.com/mozilla/kuma

https://github.com/mozilla/kuma/commit/c455381d57e9cddd9e154fdfad7394ae82a538ac
Show signup form errors inline and render non-field form errors as error notifications.