web: add notification 'mark as seen' button

web/.eslintrc.json

@@ -18,7 +18,7 @@
         "lit"
     ],
     "rules": {
-        "indent": ["error", 4],
+        "indent": "off",
         "linebreak-style": ["error", "unix"],
         "quotes": ["error", "double"],
         "semi": ["error", "always"],

web/src/api/EventNotification.ts

@@ -21,4 +21,10 @@ export class Notification {
         return DefaultClient.fetch<PBResponse<Notification>>(["events", "notifications"], filter);
     }
 
+    static markSeen(pk: string): Promise<Notification> {
+        return DefaultClient.update<Notification>(["events", "notifications", pk], {
+            "seen": true
+        });
+    }
+
 }

web/src/elements/buttons/ActionButton.ts

@@ -15,11 +15,6 @@ export class ActionButton extends SpinnerButton {
         }
         this.setLoading();
         const csrftoken = getCookie("authentik_csrf");
-        if (!csrftoken) {
-            console.debug("No csrf token in cookie");
-            this.setDone(ERROR_CLASS);
-            return;
-        }
         const request = new Request(this.url, {
             headers: { "X-CSRFToken": csrftoken },
         });

web/src/elements/notifications/NotificationDrawer.ts

@@ -30,9 +30,12 @@ export class NotificationDrawer extends LitElement {
     }
 
     firstUpdated(): void {
-        Notification.list().then(r => {
+        Notification.list({
+            seen: false,
+            ordering: "-created"
+        }).then(r => {
             this.notifications = r;
-            this.unread = r.results.filter((n) => !n.seen).length;
+            this.unread = r.results.length;
         });
     }
 
@@ -63,6 +66,15 @@ export class NotificationDrawer extends LitElement {
                     ${item.event?.action}
                 </h2>
             </div>
+            <div class="pf-c-notification-drawer__list-item-action">
+                <button class="pf-c-dropdown__toggle pf-m-plain" type="button" @click=${() => {
+                    Notification.markSeen(item.pk).then(() => {
+                        this.firstUpdated();
+                    });
+                }}>
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
             <p class="pf-c-notification-drawer__list-item-description">${item.body}</p>
             <small class="pf-c-notification-drawer__list-item-timestamp">${age}</small>
         </li>`;

web/src/utils.ts

@@ -1,8 +1,8 @@
 import { html, TemplateResult } from "lit-html";
 import { SpinnerSize } from "./elements/Spinner";
 
-export function getCookie(name: string): string | undefined {
-    let cookieValue = undefined;
+export function getCookie(name: string): string {
+    let cookieValue = "";
     if (document.cookie && document.cookie !== "") {
         const cookies = document.cookie.split(";");
         for (let i = 0; i < cookies.length; i++) {