web: add 404 page, don't auto-redirect to home

This commit is contained in:
Jens Langhammer 2021-02-20 00:27:32 +01:00
parent dde303f13a
commit 4f374c0c01
3 changed files with 32 additions and 6 deletions

View File

@ -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>`;
}
}

View File

@ -10,6 +10,7 @@ import { ROUTES } from "../../routes";
import { RouteMatch } from "./RouteMatch"; import { RouteMatch } from "./RouteMatch";
import "../../pages/generic/SiteShell"; import "../../pages/generic/SiteShell";
import "./Router404";
@customElement("ak-router-outlet") @customElement("ak-router-outlet")
export class RouterOutlet extends LitElement { export class RouterOutlet extends LitElement {
@ -67,12 +68,12 @@ export class RouterOutlet extends LitElement {
} }
}); });
if (!matchedRoute) { 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( const route = new Route(
RegExp(""), RegExp(""),
html`<ak-site-shell class="pf-c-page__main" url=${activeUrl}> html`<div class="pf-c-page__main">
<div slot="body"></div> <ak-router-404 url=${activeUrl}></ak-router-404>
</ak-site-shell>` </div>`
); );
matchedRoute = new RouteMatch(route); matchedRoute = new RouteMatch(route);
matchedRoute.arguments = route.url.exec(activeUrl)?.groups || {}; matchedRoute.arguments = route.url.exec(activeUrl)?.groups || {};
@ -82,7 +83,6 @@ export class RouterOutlet extends LitElement {
} }
render(): TemplateResult | undefined { render(): TemplateResult | undefined {
// TODO: Render 404 when current Route is empty
return this.current?.render(); return this.current?.render();
} }
} }

View File

@ -1,7 +1,6 @@
import { gettext } from "django"; import { gettext } from "django";
import { customElement, html, property, TemplateResult } from "lit-element"; import { customElement, html, property, TemplateResult } from "lit-element";
import { AKResponse } from "../../api/Client"; import { AKResponse } from "../../api/Client";
import { TablePage } from "../../elements/table/TablePage";
import "../../elements/buttons/ModalButton"; import "../../elements/buttons/ModalButton";
import "../../elements/buttons/Dropdown"; import "../../elements/buttons/Dropdown";