From 4f374c0c01c1986bde0f9cbd4c8da594bd8d5ecc Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens.langhammer@beryju.org>
Date: Sat, 20 Feb 2021 00:27:32 +0100
Subject: [PATCH] web: add 404 page, don't auto-redirect to home

---
 web/src/elements/router/Router404.ts    | 27 +++++++++++++++++++++++++
 web/src/elements/router/RouterOutlet.ts | 10 ++++-----
 web/src/pages/tokens/UserTokenList.ts   |  1 -
 3 files changed, 32 insertions(+), 6 deletions(-)
 create mode 100644 web/src/elements/router/Router404.ts

diff --git a/web/src/elements/router/Router404.ts b/web/src/elements/router/Router404.ts
new file mode 100644
index 000000000..6dc3fb3d0
--- /dev/null
+++ b/web/src/elements/router/Router404.ts
@@ -0,0 +1,27 @@
+import { gettext } from "django";
+import { CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
+import { COMMON_STYLES } from "../../common/styles";
+
+@customElement("ak-router-404")
+export class Router404 extends LitElement {
+
+    @property()
+    url = "";
+
+    static get styles(): CSSResult[] {
+        return COMMON_STYLES;
+    }
+
+    render(): TemplateResult {
+        return html`<div class="pf-c-empty-state pf-m-full-height">
+            <div class="pf-c-empty-state__content">
+                <i class="fas fa-question-circle pf-c-empty-state__icon" aria-hidden="true"></i>
+                <h1 class="pf-c-title pf-m-lg">${gettext("Not found")}</h1>
+                <div class="pf-c-empty-state__body">
+                    ${gettext(`The url '${this.url}' was not found.`)}
+                </div>
+                <a href="#/" class="pf-c-button pf-m-primary" type="button">${gettext("Return home")}</a>
+            </div>
+        </div>`;
+    }
+}
diff --git a/web/src/elements/router/RouterOutlet.ts b/web/src/elements/router/RouterOutlet.ts
index 48f5d877e..513597975 100644
--- a/web/src/elements/router/RouterOutlet.ts
+++ b/web/src/elements/router/RouterOutlet.ts
@@ -10,6 +10,7 @@ import { ROUTES } from "../../routes";
 import { RouteMatch } from "./RouteMatch";
 
 import "../../pages/generic/SiteShell";
+import "./Router404";
 
 @customElement("ak-router-outlet")
 export class RouterOutlet extends LitElement {
@@ -67,12 +68,12 @@ export class RouterOutlet extends LitElement {
             }
         });
         if (!matchedRoute) {
-            console.debug(`authentik/router: route "${activeUrl}" not defined, defaulting to shell`);
+            console.debug(`authentik/router: route "${activeUrl}" not defined`);
             const route = new Route(
                 RegExp(""),
-                html`<ak-site-shell class="pf-c-page__main" url=${activeUrl}>
-                    <div slot="body"></div>
-                </ak-site-shell>`
+                html`<div class="pf-c-page__main">
+                    <ak-router-404 url=${activeUrl}></ak-router-404>
+                </div>`
             );
             matchedRoute = new RouteMatch(route);
             matchedRoute.arguments = route.url.exec(activeUrl)?.groups || {};
@@ -82,7 +83,6 @@ export class RouterOutlet extends LitElement {
     }
 
     render(): TemplateResult | undefined {
-        // TODO: Render 404 when current Route is empty
         return this.current?.render();
     }
 }
diff --git a/web/src/pages/tokens/UserTokenList.ts b/web/src/pages/tokens/UserTokenList.ts
index 3ad10a789..fba40547b 100644
--- a/web/src/pages/tokens/UserTokenList.ts
+++ b/web/src/pages/tokens/UserTokenList.ts
@@ -1,7 +1,6 @@
 import { gettext } from "django";
 import { customElement, html, property, TemplateResult } from "lit-element";
 import { AKResponse } from "../../api/Client";
-import { TablePage } from "../../elements/table/TablePage";
 
 import "../../elements/buttons/ModalButton";
 import "../../elements/buttons/Dropdown";