Merge branch 'next' into new-forms

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

# Conflicts:
#	web/src/api/legacy.ts
#	web/src/main.ts
#	web/src/pages/users/UserSettingsPage.ts

web/src/elements/buttons/ActionButton.ts

@@ -2,6 +2,7 @@ import { customElement, property } from "lit-element";
 import { ERROR_CLASS, SUCCESS_CLASS } from "../../constants";
 import { SpinnerButton } from "./SpinnerButton";
 import { showMessage } from "../messages/MessageContainer";
+import { MessageLevel } from "../messages/Message";
 
 @customElement("ak-action-button")
 export class ActionButton extends SpinnerButton {
@@ -26,13 +27,13 @@ export class ActionButton extends SpinnerButton {
         .catch((e: Error | Response) => {
             if (e instanceof Error) {
                 showMessage({
-                    level_tag: "error",
+                    level: MessageLevel.error,
                     message: e.toString()
                 });
             } else {
                 e.text().then(t => {
                     showMessage({
-                        level_tag: "error",
+                        level: MessageLevel.error,
                         message: t
                     });
                 });

web/src/elements/buttons/ModalButton.ts

@@ -19,6 +19,7 @@ import { convertToSlug } from "../../utils";
 import { SpinnerButton } from "./SpinnerButton";
 import { PRIMARY_CLASS, EVENT_REFRESH } from "../../constants";
 import { showMessage } from "../messages/MessageContainer";
+import { MessageLevel } from "../messages/Message";
 
 @customElement("ak-modal-button")
 export class ModalButton extends LitElement {
@@ -122,7 +123,7 @@ export class ModalButton extends LitElement {
                     })
                     .catch((e) => {
                         showMessage({
-                            level_tag: "error",
+                            level: MessageLevel.error,
                             message: "Unexpected error"
                         });
                         console.error(e);
@@ -150,7 +151,7 @@ export class ModalButton extends LitElement {
                 })
                 .catch((e) => {
                     showMessage({
-                        level_tag: "error",
+                        level: MessageLevel.error,
                         message: "Unexpected error"
                     });
                     console.error(e);

web/src/elements/forms/ConfirmationForm.ts

@@ -2,6 +2,7 @@ import { gettext } from "django";
 import { customElement, html, property, TemplateResult } from "lit-element";
 import { EVENT_REFRESH } from "../../constants";
 import { ModalButton } from "../buttons/ModalButton";
+import { MessageLevel } from "../messages/Message";
 import { showMessage } from "../messages/MessageContainer";
 
 @customElement("ak-forms-confirm")
@@ -36,14 +37,14 @@ export class ConfirmationForm extends ModalButton {
     onSuccess(): void {
         showMessage({
             message: gettext(this.successMessage),
-            level_tag: "success",
+            level: MessageLevel.success,
         });
     }
 
     onError(e: Error): void {
         showMessage({
             message: gettext(`${this.errorMessage}: ${e.toString()}`),
-            level_tag: "error",
+            level: MessageLevel.error,
         });
     }
 

web/src/elements/forms/DeleteForm.ts

@@ -2,6 +2,7 @@ import { gettext } from "django";
 import { customElement, html, property, TemplateResult } from "lit-element";
 import { EVENT_REFRESH } from "../../constants";
 import { ModalButton } from "../buttons/ModalButton";
+import { MessageLevel } from "../messages/Message";
 import { showMessage } from "../messages/MessageContainer";
 
 @customElement("ak-forms-delete")
@@ -34,14 +35,14 @@ export class DeleteForm extends ModalButton {
     onSuccess(): void {
         showMessage({
             message: gettext(`Successfully deleted ${this.objectLabel} ${ this.obj?.name }`),
-            level_tag: "success",
+            level: MessageLevel.success,
         });
     }
 
     onError(e: Error): void {
         showMessage({
             message: gettext(`Failed to delete ${this.objectLabel}: ${e.toString()}`),
-            level_tag: "error",
+            level: MessageLevel.error,
         });
     }
 

web/src/elements/messages/Message.ts

@@ -5,10 +5,17 @@ import PFAlert from "@patternfly/patternfly/components/Alert/alert.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 
+export enum MessageLevel {
+    error = "error",
+    warning = "warning",
+    success = "success",
+    info = "info"
+}
 export interface APIMessage {
-    level_tag: string;
+    level: MessageLevel;
     tags?: string;
     message: string;
+    description?: string;
 }
 
 const LEVEL_ICON_MAP: { [key: string]: string } = {
@@ -44,13 +51,16 @@ export class Message extends LitElement {
 
     render(): TemplateResult {
         return html`<li class="pf-c-alert-group__item">
-            <div class="pf-c-alert pf-m-${this.message?.level_tag} ${this.message?.level_tag === "error" ? "pf-m-danger" : ""}">
+            <div class="pf-c-alert pf-m-${this.message?.level} ${this.message?.level === MessageLevel.error ? "pf-m-danger" : ""}">
                 <div class="pf-c-alert__icon">
-                    <i class="${this.message ? LEVEL_ICON_MAP[this.message.level_tag] : ""}"></i>
+                    <i class="${this.message ? LEVEL_ICON_MAP[this.message.level] : ""}"></i>
                 </div>
                 <p class="pf-c-alert__title">
                     ${this.message?.message}
                 </p>
+                ${this.message?.description && html`<div class="pf-c-alert__description">
+                    <p>${this.message.description}</p>
+                </div>`}
                 <div class="pf-c-alert__action">
                     <button class="pf-c-button pf-m-plain" type="button" @click=${() => {
                         if (!this.message) return;

web/src/elements/messages/MessageContainer.ts

@@ -1,7 +1,7 @@
 import { gettext } from "django";
 import { LitElement, html, customElement, TemplateResult, property, CSSResult, css } from "lit-element";
 import "./Message";
-import { APIMessage } from "./Message";
+import { APIMessage, MessageLevel } from "./Message";
 import PFAlertGroup from "@patternfly/patternfly/components/AlertGroup/alert-group.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 
@@ -63,7 +63,7 @@ export class MessageContainer extends LitElement {
             console.debug(`authentik/messages: closed ws connection: ${e}`);
             if (this.retryDelay > 3000) {
                 showMessage({
-                    level_tag: "error",
+                    level: MessageLevel.error,
                     message: gettext("Connection error, reconnecting...")
                 });
             }

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>