web: start implementing notifications

web/src/authentik.css

@@ -103,6 +103,9 @@ select[multiple] {
     .pf-c-page {
         --pf-c-page--BackgroundColor: var(--ak-dark-background);
     }
+    .pf-c-drawer__content {
+        --pf-c-drawer__content--BackgroundColor: var(--ak-dark-background);
+    }
     .pf-c-title {
         color: var(--ak-dark-foreground);
     }

web/src/elements/notifications/NotificationDrawer.ts

@@ -0,0 +1,92 @@
+import { gettext } from "django";
+import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
+import { PBResponse } from "../../api/Client";
+import { Notification } from "../../api/EventNotification";
+import { COMMON_STYLES } from "../../common/styles";
+
+@customElement("ak-notification-drawer")
+export class NotificationDrawer extends LitElement {
+
+    @property({attribute: false})
+    notifications?: PBResponse<Notification>;
+
+    @property({type: Number})
+    unread = 0;
+
+    static get styles(): CSSResult[] {
+        return COMMON_STYLES.concat(
+            css`
+                .pf-c-notification-drawer__header {
+                    height: 82px;
+                    padding: var(--pf-c-page__main-section--PaddingTop) var(--pf-c-page__main-section--PaddingRight) var(--pf-c-page__main-section--PaddingBottom) var(--pf-c-page__main-section--PaddingLeft);
+                }
+            `
+        );
+    }
+
+    firstUpdated(): void {
+        Notification.list().then(r => {
+            this.notifications = r;
+            this.unread = r.results.filter((n) => n.seen).length;
+        });
+    }
+
+    renderItem(item: Notification): TemplateResult {
+        const delta = Date.now() - parseInt(item.created, 10);
+        const age = `${Math.round(delta / 1000 / 3600)} Hours ago`;
+        let level = "";
+        switch (item.severity) {
+        case "notice":
+            level = "pf-m-info";
+            break;
+        case "warning":
+            level = "pf-m-warning";
+            break;
+        case "alert":
+            level = "pf-m-danger";
+            break;
+        default:
+            break;
+        }
+        return html`<li class="pf-c-notification-drawer__list-item pf-m-read ${level}">
+            <div class="pf-c-notification-drawer__list-item-header">
+                <span class="pf-c-notification-drawer__list-item-header-icon">
+                    <i class="fas fa-info-circle" aria-hidden="true"></i>
+                </span>
+                <h2 class="pf-c-notification-drawer__list-item-header-title">
+                    ${item.event?.action}
+                </h2>
+            </div>
+            <div class="pf-c-notification-drawer__list-item-description">
+                ${item.body.substring(0, 75)}
+            </div>
+            <div class="pf-c-notification-drawer__list-item-timestamp">
+                ${age}
+            </div>
+        </li>`;
+    }
+
+    render(): TemplateResult {
+        if (!this.notifications) {
+            return html``;
+        }
+        return html`<div class="pf-c-drawer__body pf-m-no-padding">
+            <div class="pf-c-notification-drawer">
+                <div class="pf-c-notification-drawer__header">
+                    <h1 class="pf-c-notification-drawer__header-title">
+                        ${gettext("Notifications")}
+                    </h1>
+                    <span class="pf-c-notification-drawer__header-status">
+                        ${gettext(`${this.unread} unread`)}
+                    </span>
+                </div>
+                <div class="pf-c-notification-drawer__body">
+                    <ul class="pf-c-notification-drawer__list">
+                        ${this.notifications.results.map(n => this.renderItem(n))}
+                    </ul>
+                </div>
+            </div>
+        </div>`;
+    }
+
+}

web/src/elements/notifications/NotificationTrigger.ts

@@ -0,0 +1,22 @@
+import { customElement, html, LitElement, TemplateResult } from "lit-element";
+
+@customElement("ak-notification-trigger")
+export class NotificationTrigger extends LitElement {
+
+    constructor() {
+        super();
+        this.addEventListener("click", () => {
+            this.dispatchEvent(
+                new CustomEvent("ak-notification-toggle", {
+                    bubbles: true,
+                    composed: true,
+                })
+            );
+        });
+    }
+
+    render(): TemplateResult {
+        return html`<slot></slot>`;
+    }
+
+}

web/src/elements/sidebar/SidebarUser.ts

@@ -1,4 +1,4 @@
-import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
+import { css, CSSResult, customElement, html, LitElement, TemplateResult } from "lit-element";
 // @ts-ignore
 import NavStyle from "@patternfly/patternfly/components/Nav/nav.css";
 // @ts-ignore

web/src/interfaces/Interface.ts

@@ -5,7 +5,7 @@ import { SidebarItem } from "../elements/sidebar/Sidebar";
 import "../elements/router/RouterOutlet";
 import "../elements/messages/MessageContainer";
 import "../elements/sidebar/SidebarHamburger";
-import "../elements/notifications/NotificationDrawer"
+import "../elements/notifications/NotificationDrawer";
 
 export abstract class Interface extends LitElement {
     @property({type: Boolean})