Implement a better error feedback mechanism

[pditommaso]

Backend error should be visualised with error/warning box appearing just below the nav bar instead of a popup.

It should last more (configurable via an application setting) and there should be a cross icon (top-left corner) to close it.

[tcrespog]

Hi Paolo. I find Bootstrap toasts a good fit for this. Are you ok with them?

[pditommaso]

What about using an alert with a dismissing icon?

[tcrespog]

I'll check if it's possible to show an alert as a toast. I'll try to do that in order to leverage the builtin mechanism to hide the toast automatically after a configurable delay. If not, I'll implement a custom mechanism to show alerts in a toast-like manner.

[pditommaso]

What's special with a toast? Let's jump on gitter if you want.

[tcrespog]

The Bootstrap toasts have options to specify the fading behavior. Don't worry I sense an alert can be integrated with a toast without many problems.

[pditommaso]

My point is that I would like to avoid the popup or dialog effect. For this reason, I was suggesting the alert.

[tcrespog]

Yes, I know. I was thinking as you. In this case the toast would be like an invisible carrier for the alert.

[pditommaso]

OK

[tcrespog]

Done.

[pditommaso]

Has this change merged? I still see errors appear into a small red popup as the one in the top comment.

[tcrespog]

I haven't made any progress regarding the last change you proposed about this Paolo (the one with the error appearing in full width). My "Done" comment on 6 Jun was in fact the implementation of the current popup version.

[pditommaso]

OK, the idea here is to show a red rectangle on top of the page instead of a small toast/popup. The error should be visualised until the user navigate away, make another action (maybe using http interceptor?) or click a dismiss icon.

The bootstrap alert could serve as inspiration.

[tcrespog]

Some questions:

• Should the position of the notification be fixed (like the navbar)?
• I assume the position is below the navbar, but, should the position in the landing page change?

[pditommaso]

was thinking at this, would not be possible to define error areas (basically a two divs), one when showing the main page. If does not exists fallback in a top one for the landing?

[tcrespog]

Do you mean having the current mechanism when the landing page is being shown and the new one otherwise?

[pditommaso]

I'm imagining a red box on top of the page (as a navbar) in case of the landing, and just below the navbar once logged.

[tcrespog]

Something like this? And this?

[pditommaso]

Yes! text centred, thansk!

[tcrespog]

Ok, but fixed? Scrolls along with the content (like the navbar)?

[pditommaso]

umm, yes let's fixed as the navbar .. otherwise it could popup while the page is scrolled down and the user won't see it.

[tcrespog]

Done in branch notification_refactor.

[tcrespog]

By the way, success messages (like the one showed when the user profile is saved) are also shown this way for consistency, but in this case they fade away after a specified time. You can do this per error basis in case you want to fade a specific error message but no others. Have a look at the code and let me know if you have any questions.

[pditommaso]

Makes sense. I'll check it out.