Catch errors and alert the user

I'm not sure why, but Turbo was swallowing the unauthorized error, so I thought we should alert the user to help with debugging.
Same with network error, it gave no feedback before.

I think this is testable in theory, but I haven't invested the time on it.

app/webpacker/js/turbo.js

@@ -8,10 +8,23 @@ document.addEventListener("turbo:frame-missing", (event) => {
   event.preventDefault();
 
   // show error message instead
-  status = event.detail.response.status;
+  showError(event.detail.response?.status);
+});
+
+document.addEventListener("turbo:submit-end", (event) => {
+  if (!event.detail.success){
+    // show error message on failure
+    showError(event.detail.fetchResponse?.statusCode);
+    event.preventDefault();
+  }
+});
+
+function showError(status) {
   if(status == 401) {
     alert(I18n.t("errors.unauthorized.message"));
+  } else if(status === undefined) {
+    alert(I18n.t("errors.network_error.message"));
   } else {
     alert(I18n.t("errors.general_error.message"));
   }
-});
+}

config/locales/en.yml

@@ -188,6 +188,10 @@ en:
         We record all errors and may be working on a fix.
 
         If the problem persists or is urgent, please contact us."
+    unauthorized:
+      message: "You are not authorised to perform that action."
+    network_error:
+      message: "Network error: please try again later."
   stripe:
     error_code:
       incorrect_number: "The card number is incorrect."