web: cleanup message API, use enum for level

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2021-03-27 23:11:44 +01:00
parent 261583cb92
commit e621eb7455
10 changed files with 33 additions and 19 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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