web: add middleware that shows message for failed API requests

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2021-03-27 23:18:51 +01:00
parent 1a53bc3de5
commit 035771de81
3 changed files with 24 additions and 4 deletions

View file

@ -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(),
],
});

View file

@ -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);
}
}

View file

@ -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>