web: cleanup message API, use enum for level

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

authentik/root/messages/storage.py

@@ -25,7 +25,7 @@ class ChannelsStorage(FallbackStorage):
                     uid,
                     {
                         "type": "event.update",
-                        "level_tag": message.level_tag,
+                        "level": message.level_tag,
                         "tags": message.tags,
                         "message": message.message,
                     },

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,14 @@ 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", "warning", "success", "info"
+}
 export interface APIMessage {
-    level_tag: string;
+    level: MessageLevel;
     tags?: string;
     message: string;
+    description?: string;
 }
 
 const LEVEL_ICON_MAP: { [key: string]: string } = {
@@ -44,13 +48,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/flows/stages/authenticator_totp/AuthenticatorTOTPStage.ts

@@ -14,6 +14,7 @@ import "../../../elements/forms/FormElement";
 import { showMessage } from "../../../elements/messages/MessageContainer";
 import "../../../elements/EmptyState";
 import "../../FormStatic";
+import { MessageLevel } from "../../../elements/messages/Message";
 
 export interface AuthenticatorTOTPChallenge extends WithUserInfoChallenge {
     config_url: string;
@@ -60,7 +61,7 @@ export class AuthenticatorTOTPStage extends BaseStage {
                             if (!this.challenge?.config_url) return;
                             navigator.clipboard.writeText(this.challenge?.config_url).then(() => {
                                 showMessage({
-                                    level_tag: "success",
+                                    level: MessageLevel.success,
                                     message: gettext("Successfully copied TOTP Config.")
                                 });
                             });

web/src/pages/generic/SiteShell.ts

@@ -19,6 +19,7 @@ import AKGlobal from "../../authentik.css";
 import CodeMirrorStyle from "codemirror/lib/codemirror.css";
 import CodeMirrorTheme from "codemirror/theme/monokai.css";
 import { EVENT_REFRESH } from "../../constants";
+import { MessageLevel } from "../../elements/messages/Message";
 
 @customElement("ak-site-shell")
 export class SiteShell extends LitElement {
@@ -79,7 +80,7 @@ export class SiteShell extends LitElement {
                 }
                 console.debug(`authentik/site-shell: Request failed ${this._url}`);
                 showMessage({
-                    level_tag: "error",
+                    level: MessageLevel.error,
                     message: gettext(`Request failed: ${response.statusText}`),
                 });
                 this.loading = false;
@@ -148,7 +149,7 @@ export class SiteShell extends LitElement {
                     })
                     .catch((e) => {
                         showMessage({
-                            level_tag: "error",
+                            level: MessageLevel.error,
                             message: "Unexpected error"
                         });
                         console.error(e);

web/src/pages/users/UserActiveForm.ts

@@ -1,6 +1,7 @@
 import { gettext } from "django";
 import { customElement, html, TemplateResult } from "lit-element";
 import { DeleteForm } from "../../elements/forms/DeleteForm";
+import { MessageLevel } from "../../elements/messages/Message";
 import { showMessage } from "../../elements/messages/MessageContainer";
 
 @customElement("ak-user-active-form")
@@ -9,14 +10,14 @@ export class UserActiveForm extends DeleteForm {
     onSuccess(): void {
         showMessage({
             message: gettext(`Successfully updated ${this.objectLabel} ${this.obj?.name}`),
-            level_tag: "success",
+            level: MessageLevel.success,
         });
     }
 
     onError(e: Error): void {
         showMessage({
             message: gettext(`Failed to update ${this.objectLabel}: ${e.toString()}`),
-            level_tag: "error",
+            level: MessageLevel.error,
         });
     }