web: make action button better handle errors and show messages

web/src/elements/buttons/ActionButton.ts

@@ -2,6 +2,7 @@ import { getCookie } from "../../utils";
 import { customElement, property } from "lit-element";
 import { ERROR_CLASS, SUCCESS_CLASS } from "../../constants";
 import { SpinnerButton } from "./SpinnerButton";
+import { showMessage } from "../messages/MessageContainer";
 
 @customElement("ak-action-button")
 export class ActionButton extends SpinnerButton {
@@ -26,11 +27,30 @@ export class ActionButton extends SpinnerButton {
             method: "POST",
             mode: "same-origin",
         })
+            .then((r) => {
+                if (!r.ok) {
+                    throw r;
+                }
+                return r;
+            })
             .then((r) => r.json())
             .then(() => {
                 this.setDone(SUCCESS_CLASS);
             })
-            .catch(() => {
+            .catch((e: Error | Response) => {
+                if (e instanceof Error) {
+                    showMessage({
+                        level_tag: "error",
+                        message: e.toString()
+                    });
+                } else {
+                    e.text().then(t => {
+                        showMessage({
+                            level_tag: "error",
+                            message: t
+                        });
+                    })
+                }
                 this.setDone(ERROR_CLASS);
             });
     }