Dashboard: Redesign errors displayed on login page

[maciaszczykm]

At the moment we are using simple component to display the error messages. It can be improved (see: src/app/frontend/login/template.html:19).

[fejta-bot]

Issues go stale after 90d of inactivity.
Mark the issue as fresh with /remove-lifecycle stale.
Stale issues rot after an additional 30d of inactivity and eventually close.

If this issue is safe to close now please do so with /close.

Send feedback to sig-testing, kubernetes/test-infra and/or fejta.
/lifecycle stale

[floreks]

/lifecycle frozen

[anshulahuja98]

@maciaszczykm
Any plans as to how to improve the errors messages?
I would be interested in working on this

[maciaszczykm]

@anshulahuja98 Hi, first of all, we would like to improve how the errors are styled and we are open to suggestions.

[anshulahuja98]

Opinions on using a dialog box to show the error?
The dialog box will have an ok button to close the dialog

[maciaszczykm]

I'd avoid having a dialog here. It slows down the login. IMO just and well-styled information that doesn't need to be closed before second login attempt would work just fine.

[anshulahuja98]

How about using a snackbar?
Have a look at the demo I implemented

I can make changes to the colour of the text or the snack bar and an error fa logo
Just wanted to validate using snackbar in the first place

[anshulahuja98]

If this seems a feasible approach, we can use it to improve error logging across the whole dashboard wherever relevant.

[maciaszczykm]

Looks good.

[anshulahuja98]

Great!
I'll drop a PR

[floreks]

I'd use it for errors on login view for now only and style as an error. Remember to check if it will be properly displayed after forced logout when the token expires.

[anshulahuja98]

So, there isn't a neat way to show multiple errors using this approach.
One method could've been to just concatenate all text into one snackbar, but it won't show up properly formatted.
Generating one snackbar per error would probably also not be a viable approach in this case.