web: add middleware that shows message for failed API requests

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

web/src/api/Config.ts

@@ -4,7 +4,8 @@ import { VERSION } from "../constants";
 import { SentryIgnoredError } from "../common/errors";
 import { Config, Configuration, RootApi } from "authentik-api";
 import { getCookie } from "../utils";
-import { MIDDLEWARE } from "../elements/notifications/APIDrawer";
+import { API_DRAWER_MIDDLEWARE } from "../elements/notifications/APIDrawer";
+import { MessageMiddleware } from "../elements/messages/Middleware";
 
 export const DEFAULT_CONFIG = new Configuration({
     basePath: "/api/v2beta",
@@ -13,7 +14,8 @@ export const DEFAULT_CONFIG = new Configuration({
         "X-Authentik-Prevent-Basic": "true"
     },
     middleware: [
-        MIDDLEWARE
+        API_DRAWER_MIDDLEWARE,
+        new MessageMiddleware(),
     ],
 });
 

web/src/elements/messages/Middleware.ts

@@ -0,0 +1,18 @@
+import { Middleware, ResponseContext } from "authentik-api";
+import { gettext } from "django";
+import { MessageLevel } from "./Message";
+import { showMessage } from "./MessageContainer";
+
+export class MessageMiddleware implements Middleware {
+
+    post(context: ResponseContext): Promise<Response | void> {
+        if (!context.response.ok) {
+            showMessage({
+                level: MessageLevel.error,
+                message: gettext("API request failed"),
+                description: `${context.init.method} ${context.url}: ${context.response.status}`
+            });
+        }
+        return Promise.resolve(context.response);
+    }
+}

web/src/elements/notifications/APIDrawer.ts

@@ -39,7 +39,7 @@ export class APIMiddleware implements Middleware {
 }
 
 export const MAX_REQUESTS = 50;
-export const MIDDLEWARE = new APIMiddleware();
+export const API_DRAWER_MIDDLEWARE = new APIMiddleware();
 
 @customElement("ak-api-drawer")
 export class APIDrawer extends LitElement {
@@ -76,7 +76,7 @@ export class APIDrawer extends LitElement {
                 </div>
                 <div class="pf-c-notification-drawer__body">
                     <ul class="pf-c-notification-drawer__list">
-                        ${MIDDLEWARE.requests.map(n => this.renderItem(n))}
+                        ${API_DRAWER_MIDDLEWARE.requests.map(n => this.renderItem(n))}
                     </ul>
                 </div>
             </div>