web: use constants for custom event names

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

web/src/constants.ts

@@ -5,3 +5,6 @@ export const PROGRESS_CLASS = "pf-m-in-progress";
 export const CURRENT_CLASS = "pf-m-current";
 export const VERSION = "2021.3.4";
 export const PAGE_SIZE = 20;
+export const EVENT_REFRESH = "ak-refresh";
+export const EVENT_NOTIFICATION_TOGGLE = "ak-notification-toggle";
+export const EVENT_SIDEBAR_TOGGLE = "ak-sidebar-toggle";

web/src/elements/buttons/ModalButton.ts

@@ -17,7 +17,7 @@ import CodeMirrorTheme from "codemirror/theme/monokai.css";
 
 import { convertToSlug } from "../../utils";
 import { SpinnerButton } from "./SpinnerButton";
-import { PRIMARY_CLASS } from "../../constants";
+import { PRIMARY_CLASS, EVENT_REFRESH } from "../../constants";
 import { showMessage } from "../messages/MessageContainer";
 
 @customElement("ak-modal-button")
@@ -113,7 +113,7 @@ export class ModalButton extends LitElement {
                             this.open = false;
                             console.debug("authentik/modalbutton: successful submit");
                             this.dispatchEvent(
-                                new CustomEvent("ak-refresh", {
+                                new CustomEvent(EVENT_REFRESH, {
                                     bubbles: true,
                                     composed: true,
                                 })

web/src/elements/forms/ConfirmationForm.ts

@@ -1,5 +1,6 @@
 import { gettext } from "django";
 import { customElement, html, property, TemplateResult } from "lit-element";
+import { EVENT_REFRESH } from "../../constants";
 import { ModalButton } from "../buttons/ModalButton";
 import { showMessage } from "../messages/MessageContainer";
 
@@ -22,7 +23,7 @@ export class ConfirmationForm extends ModalButton {
             this.onSuccess();
             this.open = false;
             this.dispatchEvent(
-                new CustomEvent("ak-refresh", {
+                new CustomEvent(EVENT_REFRESH, {
                     bubbles: true,
                     composed: true,
                 })

web/src/elements/forms/DeleteForm.ts

@@ -1,5 +1,6 @@
 import { gettext } from "django";
 import { customElement, html, property, TemplateResult } from "lit-element";
+import { EVENT_REFRESH } from "../../constants";
 import { ModalButton } from "../buttons/ModalButton";
 import { showMessage } from "../messages/MessageContainer";
 
@@ -20,7 +21,7 @@ export class DeleteForm extends ModalButton {
             this.onSuccess();
             this.open = false;
             this.dispatchEvent(
-                new CustomEvent("ak-refresh", {
+                new CustomEvent(EVENT_REFRESH, {
                     bubbles: true,
                     composed: true,
                 })

web/src/elements/notifications/NotificationTrigger.ts

@@ -2,6 +2,7 @@ import { CSSResult, customElement, html, LitElement, TemplateResult } from "lit-
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 import PFDropdown from "@patternfly/patternfly/components/Dropdown/dropdown.css";
 import FA from "@fortawesome/fontawesome-free/css/fontawesome.css";
+import { EVENT_NOTIFICATION_TOGGLE } from "../../constants";
 
 @customElement("ak-notification-trigger")
 export class NotificationRule extends LitElement {
@@ -14,7 +15,7 @@ export class NotificationRule extends LitElement {
         super();
         this.addEventListener("click", () => {
             this.dispatchEvent(
-                new CustomEvent("ak-notification-toggle", {
+                new CustomEvent(EVENT_NOTIFICATION_TOGGLE, {
                     bubbles: true,
                     composed: true,
                 })

web/src/elements/sidebar/SidebarHamburger.ts

@@ -2,6 +2,7 @@ import { css, CSSResult, customElement, html, LitElement, TemplateResult } from
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import AKGlobal from "../../authentik.css";
+import { EVENT_SIDEBAR_TOGGLE } from "../../constants";
 
 @customElement("ak-sidebar-hamburger")
 export class SidebarHamburger extends LitElement {
@@ -21,7 +22,7 @@ export class SidebarHamburger extends LitElement {
 
     onClick(): void {
         this.dispatchEvent(
-            new CustomEvent("ak-sidebar-toggle", {
+            new CustomEvent(EVENT_SIDEBAR_TOGGLE, {
                 bubbles: true,
                 composed: true,
             })

web/src/elements/table/Table.ts

@@ -13,6 +13,7 @@ import AKGlobal from "../../authentik.css";
 
 import "./TablePagination";
 import "../EmptyState";
+import { EVENT_REFRESH } from "../../constants";
 
 export class TableColumn {
 
@@ -120,7 +121,7 @@ export abstract class Table<T> extends LitElement {
 
     constructor() {
         super();
-        this.addEventListener("ak-refresh", () => {
+        this.addEventListener(EVENT_REFRESH, () => {
             this.fetch();
         });
     }

web/src/interfaces/Interface.ts

@@ -14,6 +14,7 @@ import "../elements/Banner";
 import { until } from "lit-html/directives/until";
 import { me } from "../api/Users";
 import { gettext } from "django";
+import { EVENT_NOTIFICATION_TOGGLE, EVENT_SIDEBAR_TOGGLE } from "../constants";
 
 export abstract class Interface extends LitElement {
     @property({type: Boolean})
@@ -38,10 +39,10 @@ export abstract class Interface extends LitElement {
         window.addEventListener("resize", () => {
             this.sidebarOpen = window.innerWidth >= 1280;
         });
-        window.addEventListener("ak-sidebar-toggle", () => {
+        window.addEventListener(EVENT_SIDEBAR_TOGGLE, () => {
             this.sidebarOpen = !this.sidebarOpen;
         });
-        window.addEventListener("ak-notification-toggle", () => {
+        window.addEventListener(EVENT_NOTIFICATION_TOGGLE, () => {
             this.notificationOpen = !this.notificationOpen;
         });
     }

web/src/pages/admin-overview/cards/AdminStatusCard.ts

@@ -1,5 +1,6 @@
 import { html, TemplateResult } from "lit-html";
 import { until } from "lit-html/directives/until";
+import { EVENT_REFRESH } from "../../../constants";
 import { AggregateCard } from "../../../elements/cards/AggregateCard";
 import { SpinnerSize } from "../../../elements/Spinner";
 
@@ -18,7 +19,7 @@ export abstract class AdminStatusCard<T> extends AggregateCard {
 
     constructor() {
         super();
-        this.addEventListener("ak-refresh", () => {
+        this.addEventListener(EVENT_REFRESH, () => {
             this.requestUpdate();
         });
     }

web/src/pages/flows/FlowDiagram.ts

@@ -3,6 +3,7 @@ import FlowChart from "flowchart.js";
 import { loading } from "../../utils";
 import { FlowsApi } from "authentik-api";
 import { DEFAULT_CONFIG } from "../../api/Config";
+import { EVENT_REFRESH } from "../../constants";
 
 export const FONT_COLOUR_DARK_MODE = "#fafafa";
 export const FONT_COLOUR_LIGHT_MODE = "#151515";
@@ -39,7 +40,7 @@ export class FlowDiagram extends LitElement {
 
     constructor() {
         super();
-        this.addEventListener("ak-refresh", () => {
+        this.addEventListener(EVENT_REFRESH, () => {
             if (!this._flowSlug) return;
             this.flowSlug = this._flowSlug;
         });

web/src/pages/generic/SiteShell.ts

@@ -18,6 +18,7 @@ import PFContent from "@patternfly/patternfly/components/Content/content.css";
 import AKGlobal from "../../authentik.css";
 import CodeMirrorStyle from "codemirror/lib/codemirror.css";
 import CodeMirrorTheme from "codemirror/theme/monokai.css";
+import { EVENT_REFRESH } from "../../constants";
 
 @customElement("ak-site-shell")
 export class SiteShell extends LitElement {
@@ -54,7 +55,7 @@ export class SiteShell extends LitElement {
 
     constructor() {
         super();
-        this.addEventListener("ak-refresh", () => {
+        this.addEventListener(EVENT_REFRESH, () => {
             this.loadContent();
         });
     }

web/src/pages/providers/OAuth2ProviderViewPage.ts

@@ -25,6 +25,7 @@ import { convertToTitle } from "../../utils";
 import { OAuth2Provider, OAuth2ProviderSetupURLs, ProvidersApi } from "authentik-api";
 import { DEFAULT_CONFIG } from "../../api/Config";
 import { AdminURLManager } from "../../api/legacy";
+import { EVENT_REFRESH } from "../../constants";
 
 @customElement("ak-provider-oauth2-view")
 export class OAuth2ProviderViewPage extends Page {
@@ -65,7 +66,7 @@ export class OAuth2ProviderViewPage extends Page {
 
     constructor() {
         super();
-        this.addEventListener("ak-refresh", () => {
+        this.addEventListener(EVENT_REFRESH, () => {
             if (!this.provider?.pk) return;
             this.providerID = this.provider?.pk;
         });

web/src/pages/providers/ProxyProviderViewPage.ts

@@ -22,6 +22,7 @@ import { Page } from "../../elements/Page";
 import { ProvidersApi, ProxyProvider } from "authentik-api";
 import { DEFAULT_CONFIG } from "../../api/Config";
 import { AdminURLManager } from "../../api/legacy";
+import { EVENT_REFRESH } from "../../constants";
 
 @customElement("ak-provider-proxy-view")
 export class ProxyProviderViewPage extends Page {
@@ -56,7 +57,7 @@ export class ProxyProviderViewPage extends Page {
 
     constructor() {
         super();
-        this.addEventListener("ak-refresh", () => {
+        this.addEventListener(EVENT_REFRESH, () => {
             if (!this.provider?.pk) return;
             this.providerID = this.provider?.pk;
         });

web/src/pages/providers/SAMLProviderViewPage.ts

@@ -25,6 +25,7 @@ import { Page } from "../../elements/Page";
 import { ProvidersApi, SAMLProvider } from "authentik-api";
 import { DEFAULT_CONFIG } from "../../api/Config";
 import { AdminURLManager, AppURLManager } from "../../api/legacy";
+import { EVENT_REFRESH } from "../../constants";
 
 @customElement("ak-provider-saml-view")
 export class SAMLProviderViewPage extends Page {
@@ -59,7 +60,7 @@ export class SAMLProviderViewPage extends Page {
 
     constructor() {
         super();
-        this.addEventListener("ak-refresh", () => {
+        this.addEventListener(EVENT_REFRESH, () => {
             if (!this.provider?.pk) return;
             this.providerID = this.provider?.pk;
         });

web/src/pages/sources/LDAPSourceViewPage.ts

@@ -23,6 +23,7 @@ import { until } from "lit-html/directives/until";
 import { LDAPSource, SourcesApi } from "authentik-api";
 import { DEFAULT_CONFIG } from "../../api/Config";
 import { AdminURLManager } from "../../api/legacy";
+import { EVENT_REFRESH } from "../../constants";
 
 @customElement("ak-source-ldap-view")
 export class LDAPSourceViewPage extends Page {
@@ -54,7 +55,7 @@ export class LDAPSourceViewPage extends Page {
 
     constructor() {
         super();
-        this.addEventListener("ak-refresh", () => {
+        this.addEventListener(EVENT_REFRESH, () => {
             if (!this.source?.slug) return;
             this.sourceSlug = this.source?.slug;
         });

web/src/pages/sources/OAuthSourceViewPage.ts

@@ -21,6 +21,7 @@ import { Page } from "../../elements/Page";
 import { OAuthSource, SourcesApi } from "authentik-api";
 import { DEFAULT_CONFIG } from "../../api/Config";
 import { AdminURLManager } from "../../api/legacy";
+import { EVENT_REFRESH } from "../../constants";
 
 @customElement("ak-source-oauth-view")
 export class OAuthSourceViewPage extends Page {
@@ -52,7 +53,7 @@ export class OAuthSourceViewPage extends Page {
 
     constructor() {
         super();
-        this.addEventListener("ak-refresh", () => {
+        this.addEventListener(EVENT_REFRESH, () => {
             if (!this.source?.pk) return;
             this.sourceSlug = this.source?.slug;
         });

web/src/pages/sources/SAMLSourceViewPage.ts

@@ -24,6 +24,7 @@ import { Page } from "../../elements/Page";
 import { SAMLSource, SourcesApi } from "authentik-api";
 import { DEFAULT_CONFIG } from "../../api/Config";
 import { AdminURLManager, AppURLManager } from "../../api/legacy";
+import { EVENT_REFRESH } from "../../constants";
 
 @customElement("ak-source-saml-view")
 export class SAMLSourceViewPage extends Page {
@@ -55,7 +56,7 @@ export class SAMLSourceViewPage extends Page {
 
     constructor() {
         super();
-        this.addEventListener("ak-refresh", () => {
+        this.addEventListener(EVENT_REFRESH, () => {
             if (!this.source?.pk) return;
             this.sourceSlug = this.source?.slug;
         });

web/src/pages/users/UserViewPage.ts

@@ -25,6 +25,7 @@ import { Page } from "../../elements/Page";
 import { CoreApi, User } from "authentik-api";
 import { DEFAULT_CONFIG } from "../../api/Config";
 import { AdminURLManager } from "../../api/legacy";
+import { EVENT_REFRESH } from "../../constants";
 
 @customElement("ak-user-view")
 export class UserViewPage extends Page {
@@ -56,7 +57,7 @@ export class UserViewPage extends Page {
 
     constructor() {
         super();
-        this.addEventListener("ak-refresh", () => {
+        this.addEventListener(EVENT_REFRESH, () => {
             if (!this.user?.pk) return;
             this.userId = this.user?.pk;
         });