web: set document title on navigation

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

web/src/elements/router/RouterOutlet.ts

@@ -6,6 +6,9 @@ import AKGlobal from "../../authentik.css";
 
 import "../../pages/generic/SiteShell";
 import "./Router404";
+import { Page } from "../Page";
+
+export const TITLE_SUFFIX = "authentik";
 
 @customElement("ak-router-outlet")
 export class RouterOutlet extends LitElement {
@@ -40,6 +43,19 @@ export class RouterOutlet extends LitElement {
         this.navigate();
     }
 
+    updated(): void {
+        if (!this.shadowRoot) return;
+        Array.from(this.shadowRoot?.children).forEach((el) => {
+            console.log("pageTitle" in el);
+            if ("pageTitle" in el) {
+                const title = (el as Page).pageTitle();
+                document.title = `${title} - ${TITLE_SUFFIX}`;
+            } else {
+                document.title = TITLE_SUFFIX;
+            }
+        });
+    }
+
     navigate(): void {
         let activeUrl = window.location.hash.slice(1, Infinity);
         if (activeUrl === "") {

web/src/pages/LibraryPage.ts

@@ -86,6 +86,10 @@ export class LibraryPage extends LitElement {
     @property({attribute: false})
     apps?: AKResponse<Application>;
 
+    pageTitle(): string {
+        return gettext("Applications");
+    }
+
     static get styles(): CSSResult[] {
         return [PFBase, PFEmptyState, PFTitle, PFPage, PFContent, PFGallery, AKGlobal].concat(css`
             :host,