This repository has been archived on 2024-05-31. You can view files and clone it, but cannot push or open issues or pull requests.
authentik/web/src/pages/RouterOutlet.ts

151 lines
4.6 KiB
TypeScript
Raw Normal View History

import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
// @ts-ignore
import CodeMirrorStyle from "codemirror/lib/codemirror.css";
// @ts-ignore
import CodeMirrorTheme from "codemirror/theme/monokai.css";
import { ColorStyles } from "../constants";
import { COMMON_STYLES } from "../common/styles";
export class Route {
url: RegExp;
private element?: TemplateResult;
private callback?: (args: { [key: string]: string }) => TemplateResult;
constructor(url: RegExp, element?: TemplateResult) {
this.url = url;
this.element = element;
}
redirect(to: string): Route {
this.callback = () => {
console.debug(`passbook/router: redirecting ${to}`);
window.location.hash = `#${to}`;
return html``;
};
return this;
}
then(render: (args: { [key: string]: string }) => TemplateResult): Route {
this.callback = render;
return this;
}
render(args: { [key: string]: string }): TemplateResult {
if (this.callback) {
return this.callback(args);
}
if (this.element) {
return this.element;
}
throw new Error("Route does not have callback or element");
}
toString(): string {
2020-11-26 22:35:59 +00:00
return `<Route url=${this.url} callback=${this.callback ? "true" : "false"}>`;
}
}
export const SLUG_REGEX = "[-a-zA-Z0-9_]+";
export const ROUTES: Route[] = [
// Prevent infinite Shell loops
2020-12-01 08:15:41 +00:00
new Route(new RegExp("^/$")).redirect("/library/"),
new Route(new RegExp("^#.*")).redirect("/library/"),
new Route(new RegExp("^/library/$"), html`<pb-library></pb-library>`),
new Route(new RegExp("^/administration/overview/$"), html`<pb-admin-overview></pb-admin-overview>`),
2020-12-01 08:15:41 +00:00
new Route(new RegExp("^/applications/$"), html`<pb-application-list></pb-application-list>`),
2020-11-26 22:35:59 +00:00
new Route(new RegExp(`^/applications/(?<slug>${SLUG_REGEX})/$`)).then((args) => {
return html`<pb-application-view .args=${args}></pb-application-view>`;
}),
];
class RouteMatch {
route: Route;
arguments: { [key: string]: string; };
fullUrl?: string;
constructor(route: Route) {
this.route = route;
this.arguments = {};
}
render(): TemplateResult {
return this.route.render(this.arguments);
}
toString(): string {
return `<RouteMatch url=${this.fullUrl} route=${this.route} arguments=${this.arguments}>`;
}
}
@customElement("pb-router-outlet")
export class RouterOutlet extends LitElement {
@property()
current?: RouteMatch;
2020-11-22 12:13:45 +00:00
@property()
defaultUrl?: string;
static get styles(): CSSResult[] {
return [
CodeMirrorStyle,
CodeMirrorTheme,
ColorStyles,
2020-11-25 11:41:13 +00:00
css`
:host {
height: 100%;
}
`,
].concat(...COMMON_STYLES);
}
constructor() {
super();
2020-12-01 08:15:41 +00:00
window.addEventListener("hashchange", () => this.navigate());
}
2020-12-01 08:15:41 +00:00
firstUpdated(): void {
2020-11-22 12:13:45 +00:00
this.navigate();
}
2020-12-01 08:15:41 +00:00
navigate(): void {
2020-11-22 12:13:45 +00:00
let activeUrl = window.location.hash.slice(1, Infinity);
if (activeUrl === "") {
activeUrl = this.defaultUrl || "/";
window.location.hash = `#${activeUrl}`;
console.debug(`passbook/router: set to ${window.location.hash}`);
return;
2020-11-22 12:13:45 +00:00
}
let matchedRoute: RouteMatch | null = null;
ROUTES.some((route) => {
2020-11-26 22:35:59 +00:00
console.debug(`passbook/router: matching ${activeUrl} against ${route.url}`);
const match = route.url.exec(activeUrl);
if (match != null) {
matchedRoute = new RouteMatch(route);
matchedRoute.arguments = match.groups || {};
matchedRoute.fullUrl = activeUrl;
console.debug(`passbook/router: found match ${matchedRoute}`);
return true;
}
});
if (!matchedRoute) {
2020-11-26 22:35:59 +00:00
console.debug(`passbook/router: route "${activeUrl}" not defined, defaulting to shell`);
const route = new Route(
RegExp(""),
2020-11-25 11:41:13 +00:00
html`<pb-site-shell url=${activeUrl}>
<div slot="body"></div>
</pb-site-shell>`
);
matchedRoute = new RouteMatch(route);
matchedRoute.arguments = route.url.exec(activeUrl)?.groups || {};
matchedRoute.fullUrl = activeUrl;
}
this.current = matchedRoute;
}
render(): TemplateResult | undefined {
// TODO: Render 404 when current Route is empty
return this.current?.render();
}
}