Improve error display and handling when creating/editing guide

[durden]

We recently changed the guide submission process to use ajax calls. This works very well, but our error handling and display should be improved. For example, we were previously using flask flash messaging to display errors. This is an easy pattern to use but the downside is the message is only shown for the next request. This means error messages are only shown for a few brief seconds when submitting a new guide.

The ajax call retrieves the error message in the JSON data and shows it briefly before redirecting the user. It would be better if this error message was visible on the page until the user resubmits the guide. This helps the user remember why they are resubmitting.

Truthfully speaking this isn't a big issue since there are so few inputs on the editor page. It's probably difficult to forget why you're resubmitting. However, I think it looks better if the error message is always visible.

[durden]

We should replace all calls to flash in the views.api_save function since flashing from flask doesn't work well in our new design.

[durden]

What's the best way to handle this. Maybe something as simple as making the ajax request forward the error message along as a query string and then change the editor view to display it?

Another approach could be to store this error message in local storage and retrieve it on the front-end of the editor page? This approach is a bit more involved and the only benefit is probably the URL doesn't include an ugly error message. The downside of this approach we completely lose error messages on browsers with no local storage functionality. We also have the added complexity of making sure we clear the error message to avoid showing it when a user refreshes the editor page, etc.

Am I missing any other options @paulocheque ?

[paulocheque]

Usually the backend framework stores the flash messages in the session or in a cookie. We can do that in the frontend. Store a temporary message in a cookie or local storage. Probably in a cookie with expire datetime.

We have the js function clearFlashMessages that could be used in the redirected page to clear the messages from the cookie later.