trustchain-oc1-orchestral/authentik
Archived
10
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

web: update to new formatting rules, make eslint warnings fail ci

Browse source
This commit is contained in:
Jens Langhammer 2020-12-01 17:27:19 +01:00
parent 7195b77606
commit e6391b64f0
33 changed files with 192 additions and 259 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
passbook/root/messages/storage.py
View file

@ -25,7 +25,7 @@ class ChannelsStorage(FallbackStorage):
uid,
{
"type": "event.update",
"levelTag": message.level_tag,
"level_tag": message.level_tag,
"tags": message.tags,
"message": message.message,
},

2
web/package.json
View file

@ -3,7 +3,7 @@
"scripts": {
"build": "rollup -c ./rollup.config.js",
"watch": "rollup -c -w",
"lint": "eslint . --ext .js,.jsx,.ts,.tsx"
"lint": "eslint . --max-warnings 0"
},
"dependencies": {
"@fortawesome/fontawesome-free": "^5.15.1",

4
web/src/api/application.ts
View file

@ -1,4 +1,4 @@
import { DefaultClient, PBResponse } from "./client";
import { DefaultClient, PBResponse, QueryArguments } from "./client";
export class Application {
pk: string;
@ -21,7 +21,7 @@ export class Application {
return DefaultClient.fetch<Application>(["core", "applications", slug]);
}
static list(filter?: { [key: string]: any }): Promise<PBResponse<Application>> {
static list(filter?: QueryArguments): Promise<PBResponse<Application>> {
return DefaultClient.fetch<PBResponse<Application>>(["core", "applications"], filter);
}
}

8
web/src/api/client.ts
View file

@ -2,8 +2,12 @@ import { NotFoundError, RequestError } from "./errors";
export const VERSION = "v2beta";
export interface QueryArguments {
[key: string]: number | string | boolean;
}
export class Client {
makeUrl(url: string[], query?: { [key: string]: string }): string {
makeUrl(url: string[], query?: QueryArguments): string {
let builtUrl = `/api/${VERSION}/${url.join("/")}/`;
if (query) {
const queryString = Object.keys(query)
@ -14,7 +18,7 @@ export class Client {
return builtUrl;
}
fetch<T>(url: string[], query?: { [key: string]: any }): Promise<T> {
fetch<T>(url: string[], query?: QueryArguments): Promise<T> {
const finalUrl = this.makeUrl(url, query);
return fetch(finalUrl)
.then((r) => {

2
web/src/api/policy_binding.ts
View file

@ -1,7 +1,7 @@
export interface Policy {
pk: string;
name: string;
[key: string]: any;
[key: string]: unknown;
}
export interface PolicyBinding {

3
web/src/common/styles.ts
View file

@ -6,5 +6,6 @@ import PFAddons from "@patternfly/patternfly/patternfly-addons.css";
import FA from "@fortawesome/fontawesome-free/css/fontawesome.css";
// @ts-ignore
import PBGlobal from "../passbook.css";
import { CSSResult } from "lit-element";
export const COMMON_STYLES = [PF, PFAddons, FA, PBGlobal];
export const COMMON_STYLES: CSSResult[] = [PF, PFAddons, FA, PBGlobal];

2
web/src/django.d.ts vendored
View file

@ -6,5 +6,5 @@ declare namespace django {
function ngettext(singular: string, plural: string, count: number): string;
function gettext_noop(msgid: string): string;
function pgettext(context: string, msgid: string): string;
function interpolate(fmt: string, obj: any, named: boolean): string;
function interpolate(fmt: string, obj: unknown, named: boolean): string;
}

27
web/src/elements/AdminLoginsChart.ts
View file

@ -1,4 +1,4 @@
import { css, customElement, html, LitElement, property } from "lit-element";
import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
import Chart from "chart.js";
interface TickValue {
@ -11,10 +11,10 @@ export class AdminLoginsChart extends LitElement {
@property()
url = "";
chart: any;
chart?: Chart;
static get styles() {
return css`
static get styles(): CSSResult[] {
return [css`
:host {
position: relative;
height: 100%;
@ -26,7 +26,7 @@ export class AdminLoginsChart extends LitElement {
width: 100px;
height: 100px;
}
`;
`];
}
constructor() {
@ -38,14 +38,21 @@ export class AdminLoginsChart extends LitElement {
});
}
firstUpdated() {
firstUpdated(): void {
fetch(this.url)
.then((r) => r.json())
.catch((e) => console.error(e))
.then((r) => {
const ctx = (<HTMLCanvasElement>this.shadowRoot?.querySelector("canvas")).getContext(
"2d"
)!;
const canvas = <HTMLCanvasElement>this.shadowRoot?.querySelector("canvas");
if (!canvas) {
console.warn("Failed to get canvas element");
return false;
}
const ctx = canvas.getContext("2d");
if (!ctx) {
console.warn("failed to get 2d context");
return false;
}
this.chart = new Chart(ctx, {
type: "bar",
data: {
@ -102,7 +109,7 @@ export class AdminLoginsChart extends LitElement {
});
}
render() {
render(): TemplateResult {
return html`<canvas></canvas>`;
}
}

8
web/src/elements/CodeMirror.ts
View file

@ -1,4 +1,4 @@
import { customElement, html, LitElement, property } from "lit-element";
import { customElement, LitElement, property } from "lit-element";
// @ts-ignore
import CodeMirror from "codemirror";
@ -17,11 +17,11 @@ export class CodeMirrorTextarea extends LitElement {
editor?: CodeMirror.EditorFromTextArea;
createRenderRoot() {
createRenderRoot() : ShadowRoot | Element {
return this;
}
firstUpdated() {
firstUpdated(): void {
const textarea = this.querySelector("textarea");
if (!textarea) {
return;
@ -33,7 +33,7 @@ export class CodeMirrorTextarea extends LitElement {
readOnly: this.readOnly,
autoRefresh: true,
});
this.editor.on("blur", (e) => {
this.editor.on("blur", () => {
this.editor?.save();
});
}

91
web/src/elements/FetchFillSlot.ts
View file

@ -1,91 +0,0 @@
import { LitElement, html, customElement, property } from "lit-element";
interface ComparisonHash {
[key: string]: (a: any, b: any) => boolean;
}
@customElement("fetch-fill-slot")
export class FetchFillSlot extends LitElement {
@property()
url = "";
@property()
key = "";
@property()
value = "";
comparison(slotName: string) {
const comparisonOperatorsHash = <ComparisonHash>{
"<": function (a: any, b: any) {
return a < b;
},
">": function (a: any, b: any) {
return a > b;
},
">=": function (a: any, b: any) {
return a >= b;
},
"<=": function (a: any, b: any) {
return a <= b;
},
"==": function (a: any, b: any) {
return a == b;
},
"!=": function (a: any, b: any) {
return a != b;
},
"===": function (a: any, b: any) {
return a === b;
},
"!==": function (a: any, b: any) {
return a !== b;
},
};
const tokens = slotName.split(" ");
if (tokens.length < 3) {
throw new Error("nah");
}
let a: any = tokens[0];
if (a === "value") {
a = this.value;
} else {
a = parseInt(a, 10);
}
let b: any = tokens[2];
if (b === "value") {
b = this.value;
} else {
b = parseInt(b, 10);
}
const comp = tokens[1];
if (!(comp in comparisonOperatorsHash)) {
throw new Error("Invalid comparison");
}
return comparisonOperatorsHash[comp](a, b);
}
firstUpdated() {
fetch(this.url)
.then((r) => r.json())
.then((r) => r[this.key])
.then((r) => (this.value = r));
}
render() {
if (this.value === undefined) {
return html`<slot></slot>`;
}
let selectedSlot = "";
this.querySelectorAll("[slot]").forEach((slot) => {
const comp = slot.getAttribute("slot")!;
if (this.comparison(comp)) {
selectedSlot = comp;
}
});
this.querySelectorAll("[data-value]").forEach((dv) => {
dv.textContent = this.value;
});
return html`<slot name=${selectedSlot}></slot>`;
}
}

43
web/src/elements/Messages.ts
View file

@ -1,4 +1,4 @@
import { LitElement, html, customElement, property } from "lit-element";
import { LitElement, html, customElement, property, TemplateResult } from "lit-element";
const LEVEL_ICON_MAP: { [key: string]: string } = {
error: "fas fa-exclamation-circle",
@ -12,7 +12,7 @@ const ID = function (prefix: string) {
};
interface Message {
levelTag: string;
level_tag: string;
tags: string;
message: string;
}
@ -25,7 +25,7 @@ export class Messages extends LitElement {
messageSocket?: WebSocket;
retryDelay = 200;
createRenderRoot() {
createRenderRoot(): ShadowRoot | Element {
return this;
}
@ -38,16 +38,16 @@ export class Messages extends LitElement {
}
}
firstUpdated() {
firstUpdated(): void {
this.fetchMessages();
}
connect() {
connect(): void {
const wsUrl = `${window.location.protocol.replace("http", "ws")}//${
window.location.host
}/ws/client/`;
this.messageSocket = new WebSocket(wsUrl);
this.messageSocket.addEventListener("open", (e) => {
this.messageSocket.addEventListener("open", () => {
console.debug(`passbook/messages: connected to ${wsUrl}`);
});
this.messageSocket.addEventListener("close", (e) => {
@ -71,32 +71,29 @@ export class Messages extends LitElement {
/* Fetch messages which were stored in the session.
* This mostly gets messages which were created when the user arrives/leaves the site
* and especially the login flow */
fetchMessages() {
fetchMessages(): Promise<void> {
console.debug("passbook/messages: fetching messages over direct api");
return fetch(this.url)
.then((r) => r.json())
.then((r) => {
r.forEach((m: any) => {
const message = <Message>{
levelTag: m.level_tag,
tags: m.tags,
message: m.message,
};
this.renderMessage(message);
.then((r: Message[]) => {
r.forEach((m: Message) => {
this.renderMessage(m);
});
});
}
renderMessage(message: Message) {
const container = <HTMLElement>this.querySelector(".pf-c-alert-group")!;
renderMessage(message: Message): void {
const container = <HTMLElement>this.querySelector(".pf-c-alert-group");
if (!container) {
console.warn("passbook/messages: failed to find container");
return;
}
const id = ID("pb-message");
const el = document.createElement("template");
el.innerHTML = `<li id=${id} class="pf-c-alert-group__item">
<div class="pf-c-alert pf-m-${message.levelTag} ${
message.levelTag === "error" ? "pf-m-danger" : ""
}">
<div class="pf-c-alert pf-m-${message.level_tag} ${message.level_tag === "error" ? "pf-m-danger" : ""}">
<div class="pf-c-alert__icon">
<i class="${LEVEL_ICON_MAP[message.levelTag]}"></i>
<i class="${LEVEL_ICON_MAP[message.level_tag]}"></i>
</div>
<p class="pf-c-alert__title">
${message.message}
@ -106,10 +103,10 @@ export class Messages extends LitElement {
setTimeout(() => {
this.querySelector(`#${id}`)?.remove();
}, 1500);
container.appendChild(el.content.firstChild!);
container.appendChild(el.content.firstChild!); // eslint-disable-line
}
render() {
render(): TemplateResult {
return html`<ul class="pf-c-alert-group pf-m-toast"></ul>`;
}
}

4
web/src/elements/Spinner.ts
View file

@ -1,5 +1,5 @@
import { gettext } from "django";
import { customElement, html, LitElement, property, TemplateResult } from "lit-element";
import { CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
// @ts-ignore
import SpinnerStyle from "@patternfly/patternfly/components/Spinner/spinner.css";
@ -15,7 +15,7 @@ export class Spinner extends LitElement {
@property()
size: SpinnerSize = SpinnerSize.Medium;
static get styles() {
static get styles(): CSSResult[] {
return [SpinnerStyle];
}

39
web/src/elements/Tabs.ts
View file

@ -1,4 +1,4 @@
import { LitElement, html, customElement, property } from "lit-element";
import { LitElement, html, customElement, property, CSSResult, TemplateResult } from "lit-element";
// @ts-ignore
import TabsStyle from "@patternfly/patternfly/components/Tabs/tabs.css";
// @ts-ignore
@ -10,12 +10,23 @@ export class Tabs extends LitElement {
@property()
currentPage?: string;
static get styles() {
static get styles(): CSSResult[] {
return [GlobalsStyle, TabsStyle];
}
render() {
const pages = Array.from(this.querySelectorAll("[slot]")!);
renderTab(page: Element): TemplateResult {
const slot = page.attributes.getNamedItem("slot")?.value;
return html` <li class="pf-c-tabs__item ${slot === this.currentPage ? CURRENT_CLASS : ""}">
<button class="pf-c-tabs__link" @click=${() => { this.currentPage = slot; }}>
<span class="pf-c-tabs__item-text">
${page.attributes.getNamedItem("tab-title")?.value}
</span>
</button>
</li>`;
}
render(): TemplateResult {
const pages = Array.from(this.querySelectorAll("[slot]"));
if (!this.currentPage) {
if (pages.length < 1) {
return html`<h1>no tabs defined</h1>`;
@ -24,25 +35,7 @@ export class Tabs extends LitElement {
}
return html`<div class="pf-c-tabs">
<ul class="pf-c-tabs__list">
${pages.map((page) => {
const slot = page.attributes.getNamedItem("slot")?.value;
return html` <li
class="pf-c-tabs__item ${slot === this.currentPage
? CURRENT_CLASS
: ""}"
>
<button
class="pf-c-tabs__link"
@click=${() => {
this.currentPage = slot;
}}
>
<span class="pf-c-tabs__item-text">
${page.attributes.getNamedItem("tab-title")?.value}
</span>
</button>
</li>`;
})}
${pages.map((page) => this.renderTab(page))}
</ul>
</div>
<slot name="${this.currentPage}"></slot>`;

13
web/src/elements/buttons/ActionButton.ts
View file

@ -1,5 +1,5 @@
import { getCookie } from "../../utils";
import { customElement, html, property } from "lit-element";
import { customElement, property } from "lit-element";
import { ERROR_CLASS, SUCCESS_CLASS } from "../../constants";
import { SpinnerButton } from "./SpinnerButton";
@ -8,21 +8,26 @@ export class ActionButton extends SpinnerButton {
@property()
url = "";
callAction() {
callAction(): void {
if (this.isRunning === true) {
return;
}
this.setLoading();
const csrftoken = getCookie("passbook_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! },
headers: { "X-CSRFToken": csrftoken },
});
fetch(request, {
method: "POST",
mode: "same-origin",
})
.then((r) => r.json())
.then((r) => {
.then(() => {
this.setDone(SUCCESS_CLASS);
})
.catch(() => {

8
web/src/elements/buttons/Dropdown.ts
View file

@ -1,18 +1,18 @@
import { customElement, html, LitElement } from "lit-element";
import { customElement, html, LitElement, TemplateResult } from "lit-element";
@customElement("pb-dropdown")
export class DropdownButton extends LitElement {
constructor() {
super();
const menu = <HTMLElement>this.querySelector(".pf-c-dropdown__menu")!;
const menu = <HTMLElement>this.querySelector(".pf-c-dropdown__menu");
this.querySelectorAll("button.pf-c-dropdown__toggle").forEach((btn) => {
btn.addEventListener("click", (e) => {
btn.addEventListener("click", () => {
menu.hidden = !menu.hidden;
});
});
}
render() {
render(): TemplateResult {
return html`<slot></slot>`;
}
}

29
web/src/elements/buttons/ModalButton.ts
View file

@ -1,4 +1,4 @@
import { css, customElement, html, LitElement, property } from "lit-element";
import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
// @ts-ignore
import ModalBoxStyle from "@patternfly/patternfly/components/ModalBox/modal-box.css";
// @ts-ignore
@ -22,7 +22,7 @@ export class ModalButton extends LitElement {
@property()
open = false;
static get styles() {
static get styles(): CSSResult[] {
return [
css`
:host {
@ -49,7 +49,7 @@ export class ModalButton extends LitElement {
});
}
updateHandlers() {
updateHandlers(): void {
// Ensure links close the modal
this.querySelectorAll<HTMLAnchorElement>("[slot=modal] a").forEach((a) => {
if (a.target == "_blank") {
@ -63,7 +63,7 @@ export class ModalButton extends LitElement {
});
// Make name field update slug field
this.querySelectorAll<HTMLInputElement>("input[name=name]").forEach((input) => {
input.addEventListener("input", (e) => {
input.addEventListener("input", () => {
const form = input.closest("form");
if (form === null) {
return;
@ -90,7 +90,12 @@ export class ModalButton extends LitElement {
})
.then((data) => {
if (data.indexOf("csrfmiddlewaretoken") !== -1) {
this.querySelector("[slot=modal]")!.innerHTML = data;
const modalSlot = this.querySelector("[slot=modal]");
if (!modalSlot) {
console.debug("passbook/modalbutton: modal slot not found?");
return;
}
modalSlot.innerHTML = data;
console.debug("passbook/modalbutton: re-showing form");
this.updateHandlers();
} else {
@ -110,7 +115,7 @@ export class ModalButton extends LitElement {
});
}
onClick(e: MouseEvent) {
onClick(): void {
if (!this.href) {
this.updateHandlers();
this.open = true;
@ -121,7 +126,11 @@ export class ModalButton extends LitElement {
})
.then((r) => r.text())
.then((t) => {
this.querySelector("[slot=modal]")!.innerHTML = t;
const modalSlot = this.querySelector("[slot=modal]");
if (!modalSlot) {
return;
}
modalSlot.innerHTML = t;
this.updateHandlers();
this.open = true;
this.querySelectorAll<SpinnerButton>("pb-spinner-button").forEach((sb) => {
@ -134,7 +143,7 @@ export class ModalButton extends LitElement {
}
}
renderModal() {
renderModal(): TemplateResult {
return html`<div class="pf-c-backdrop">
<div class="pf-l-bullseye">
<div
@ -158,8 +167,8 @@ export class ModalButton extends LitElement {
</div>`;
}
render() {
return html` <slot name="trigger" @click=${(e: any) => this.onClick(e)}></slot>
render(): TemplateResult {
return html` <slot name="trigger" @click=${() => this.onClick()}></slot>
${this.open ? this.renderModal() : ""}`;
}
}

12
web/src/elements/buttons/SpinnerButton.ts
View file

@ -1,4 +1,4 @@
import { css, customElement, html, LitElement, property } from "lit-element";
import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
// @ts-ignore
import GlobalsStyle from "@patternfly/patternfly/base/patternfly-globals.css";
// @ts-ignore
@ -15,7 +15,7 @@ export class SpinnerButton extends LitElement {
@property()
form?: string;
static get styles() {
static get styles(): CSSResult[] {
return [
GlobalsStyle,
ButtonStyle,
@ -35,13 +35,13 @@ export class SpinnerButton extends LitElement {
this.classList.add(PRIMARY_CLASS);
}
setLoading() {
setLoading(): void {
this.isRunning = true;
this.classList.add(PROGRESS_CLASS);
this.requestUpdate();
}
setDone(statusClass: string) {
setDone(statusClass: string): void {
this.isRunning = false;
this.classList.remove(PROGRESS_CLASS);
this.classList.replace(PRIMARY_CLASS, statusClass);
@ -52,7 +52,7 @@ export class SpinnerButton extends LitElement {
}, 1000);
}
callAction() {
callAction(): void {
if (this.isRunning === true) {
return;
}
@ -64,7 +64,7 @@ export class SpinnerButton extends LitElement {
this.setLoading();
}
render() {
render(): TemplateResult {
return html`<button
class="pf-c-button pf-m-progress ${this.classList.toString()}"
@click=${() => this.callAction()}

8
web/src/elements/buttons/TokenCopyButton.ts
View file

@ -1,4 +1,4 @@
import { css, customElement, html, LitElement, property } from "lit-element";
import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
// @ts-ignore
import GlobalsStyle from "@patternfly/patternfly/base/patternfly-globals.css";
// @ts-ignore
@ -14,7 +14,7 @@ export class TokenCopyButton extends LitElement {
@property()
buttonClass: string = PRIMARY_CLASS;
static get styles() {
static get styles(): CSSResult[] {
return [
GlobalsStyle,
ButtonStyle,
@ -27,7 +27,7 @@ export class TokenCopyButton extends LitElement {
];
}
onClick() {
onClick(): void {
if (!this.identifier) {
this.buttonClass = ERROR_CLASS;
setTimeout(() => {
@ -45,7 +45,7 @@ export class TokenCopyButton extends LitElement {
});
}
render() {
render(): TemplateResult {
return html`<button @click=${() => this.onClick()} class="pf-c-button ${this.buttonClass}">
<slot></slot>
</button>`;

12
web/src/elements/sidebar/Sidebar.ts
View file

@ -1,4 +1,4 @@
import { css, customElement, html, LitElement, property, TemplateResult } from "lit-element";
import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
// @ts-ignore
import PageStyle from "@patternfly/patternfly/components/Page/page.css";
// @ts-ignore
@ -23,7 +23,7 @@ export const SIDEBAR_ITEMS: SidebarItem[] = [
{
name: "Monitor",
path: ["/audit/audit/"],
condition: (sb: Sidebar) => {
condition: (sb: Sidebar): boolean => {
return sb.user?.is_superuser || false;
},
},
@ -123,7 +123,7 @@ export const SIDEBAR_ITEMS: SidebarItem[] = [
path: ["/administration/tokens/"],
},
],
condition: (sb: Sidebar) => {
condition: (sb: Sidebar): boolean => {
return sb.user?.is_superuser || false;
},
},
@ -137,7 +137,7 @@ export class Sidebar extends LitElement {
@property()
user?: User;
static get styles() {
static get styles(): CSSResult[] {
return [
GlobalsStyle,
PageStyle,
@ -169,7 +169,7 @@ export class Sidebar extends LitElement {
super();
User.me().then((u) => (this.user = u));
this.activePath = window.location.hash.slice(1, Infinity);
window.addEventListener("hashchange", (e) => {
window.addEventListener("hashchange", () => {
this.activePath = window.location.hash.slice(1, Infinity);
});
}
@ -200,7 +200,7 @@ export class Sidebar extends LitElement {
</li>`;
}
render() {
render(): TemplateResult {
return html`<div class="pf-c-page__sidebar-body">
<nav class="pf-c-nav" aria-label="Global">
<ul class="pf-c-nav__list">

10
web/src/elements/sidebar/SidebarBrand.ts
View file

@ -1,4 +1,4 @@
import { css, customElement, html, LitElement, property } from "lit-element";
import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
// @ts-ignore
import PageStyle from "@patternfly/patternfly/components/Page/page.css";
// @ts-ignore
@ -8,6 +8,10 @@ import { Config } from "../../api/config";
export const DefaultConfig: Config = {
branding_logo: " /static/dist/assets/images/logo.svg",
branding_title: "passbook",
error_reporting_enabled: false,
error_reporting_environment: "",
error_reporting_send_pii: false,
};
@customElement("pb-sidebar-brand")
@ -15,7 +19,7 @@ export class SidebarBrand extends LitElement {
@property()
config: Config = DefaultConfig;
static get styles() {
static get styles(): CSSResult[] {
return [
GlobalsStyle,
PageStyle,
@ -45,7 +49,7 @@ export class SidebarBrand extends LitElement {
Config.get().then((c) => (this.config = c));
}
render() {
render(): TemplateResult {
if (!this.config) {
return html``;
}

6
web/src/elements/sidebar/SidebarUser.ts
View file

@ -1,4 +1,4 @@
import { css, customElement, html, LitElement, property } from "lit-element";
import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
// @ts-ignore
import NavStyle from "@patternfly/patternfly/components/Nav/nav.css";
// @ts-ignore
@ -12,7 +12,7 @@ export class SidebarUser extends LitElement {
@property()
user?: User;
static get styles() {
static get styles(): CSSResult[] {
return [
fa,
NavStyle,
@ -44,7 +44,7 @@ export class SidebarUser extends LitElement {
];
}
render() {
render(): TemplateResult {
if (!this.user) {
return html``;
}

19
web/src/elements/table/Table.ts
View file

@ -1,7 +1,8 @@
import { gettext } from "django";
import { html, LitElement, property, TemplateResult } from "lit-element";
import { CSSResult, html, LitElement, property, TemplateResult } from "lit-element";
import { PBResponse } from "../../api/client";
import { COMMON_STYLES } from "../../common/styles";
import { htmlFromString } from "../../utils";
export abstract class Table<T> extends LitElement {
abstract apiEndpoint(page: number): Promise<PBResponse<T>>;
@ -14,11 +15,11 @@ export abstract class Table<T> extends LitElement {
@property()
page = 1;
static get styles() {
return [COMMON_STYLES];
static get styles(): CSSResult[] {
return COMMON_STYLES;
}
public fetch() {
public fetch(): void {
this.apiEndpoint(this.page).then((r) => {
this.data = r;
this.page = r.pagination.current;
@ -57,11 +58,11 @@ export abstract class Table<T> extends LitElement {
})
);
fullRow.push("</tr>");
return html(<any>fullRow);
return htmlFromString(...fullRow);
});
}
renderTable() {
renderTable(): TemplateResult {
if (!this.data) {
this.fetch();
}
@ -85,9 +86,7 @@ export abstract class Table<T> extends LitElement {
<table class="pf-c-table pf-m-compact pf-m-grid-md">
<thead>
<tr role="row">
${this.columns().map(
(col) => html`<th role="columnheader" scope="col">${gettext(col)}</th>`
)}
${this.columns().map((col) => html`<th role="columnheader" scope="col">${gettext(col)}</th>`)}
</tr>
</thead>
<tbody role="rowgroup">
@ -102,7 +101,7 @@ export abstract class Table<T> extends LitElement {
</div>`;
}
render() {
render(): TemplateResult {
return this.renderTable();
}
}

4
web/src/elements/table/TablePage.ts
View file

@ -1,4 +1,4 @@
import { html } from "lit-html";
import { html, TemplateResult } from "lit-html";
import { Table } from "./Table";
export abstract class TablePage<T> extends Table<T> {
@ -6,7 +6,7 @@ export abstract class TablePage<T> extends Table<T> {
abstract pageDescription(): string;
abstract pageIcon(): string;
render() {
render(): TemplateResult {
return html`<section class="pf-c-page__main-section pf-m-light">
<div class="pf-c-content">
<h1>

22
web/src/elements/table/TablePagination.ts
View file

@ -1,17 +1,17 @@
import { customElement, html, LitElement, property } from "lit-element";
import { CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
import { Table } from "./Table";
import { COMMON_STYLES } from "../../common/styles";
@customElement("pb-table-pagination")
export class TablePagination extends LitElement {
@property()
table?: Table<any>;
table?: Table<unknown>;
static get styles() {
return [COMMON_STYLES];
static get styles(): CSSResult[] {
return COMMON_STYLES;
}
previousHandler() {
previousHandler(): void {
if (!this.table?.data?.pagination.previous) {
console.debug("passbook/tables: no previous");
return;
@ -19,7 +19,7 @@ export class TablePagination extends LitElement {
this.table.page = this.table?.data?.pagination.previous;
}
nextHandler() {
nextHandler(): void {
if (!this.table?.data?.pagination.next) {
console.debug("passbook/tables: no next");
return;
@ -27,7 +27,7 @@ export class TablePagination extends LitElement {
this.table.page = this.table?.data?.pagination.next;
}
render() {
render(): TemplateResult {
return html` <div class="pf-c-pagination pf-m-compact pf-m-hidden pf-m-visible-on-md">
<div class="pf-c-pagination pf-m-compact pf-m-compact pf-m-hidden pf-m-visible-on-md">
<div class="pf-c-options-menu">
@ -43,9 +43,7 @@ export class TablePagination extends LitElement {
<div class="pf-c-pagination__nav-control pf-m-prev">
<button
class="pf-c-button pf-m-plain"
@click=${() => {
this.previousHandler();
}}
@click=${() => {this.previousHandler();}}
disabled="${this.table?.data?.pagination.previous ? "true" : "false"}"
aria-label="{% trans 'Go to previous page' %}"
>
@ -55,9 +53,7 @@ export class TablePagination extends LitElement {
<div class="pf-c-pagination__nav-control pf-m-next">
<button
class="pf-c-button pf-m-plain"
@click=${() => {
this.nextHandler();
}}
@click=${() => {this.nextHandler();}}
disabled="${this.table?.data?.pagination.next ? "true" : "false"}"
aria-label="{% trans 'Go to next page' %}"
>

1
web/src/main.ts
View file

@ -7,7 +7,6 @@ import "./elements/buttons/ModalButton";
import "./elements/buttons/SpinnerButton";
import "./elements/buttons/TokenCopyButton";
import "./elements/CodeMirror";
import "./elements/FetchFillSlot";
import "./elements/Messages";
import "./elements/sidebar/Sidebar";
import "./elements/sidebar/SidebarBrand";

6
web/src/pages/AdminOverviewPage.ts
View file

@ -1,5 +1,5 @@
import { gettext } from "django";
import { customElement, html, LitElement, property, TemplateResult } from "lit-element";
import { CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
import { until } from "lit-html/directives/until";
import { AdminOverview } from "../api/admin_overview";
import { DefaultClient } from "../api/client";
@ -17,7 +17,7 @@ export class AggregateCard extends LitElement {
@property()
headerLink?: string;
static get styles() {
static get styles(): CSSResult[] {
return COMMON_STYLES;
}
@ -61,7 +61,7 @@ export class AdminOverviewPage extends LitElement {
@property()
data?: AdminOverview;
static get styles() {
static get styles(): CSSResult[] {
return COMMON_STYLES;
}

2
web/src/pages/FlowShellCard.ts
View file

@ -49,7 +49,7 @@ export class FlowShellCard extends LitElement {
async updateCard(data: Response): Promise<void> {
switch (data.type) {
case ResponseType.redirect:
window.location.assign(data.to!);
window.location.assign(data.to || "");
break;
case ResponseType.template:
this.flowBody = data.body;

4
web/src/pages/LibraryPage.ts
View file

@ -1,4 +1,4 @@
import { css, customElement, html, LitElement, property, TemplateResult } from "lit-element";
import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
import { Application } from "../api/application";
import { PBResponse } from "../api/client";
import { COMMON_STYLES } from "../common/styles";
@ -9,7 +9,7 @@ export class ApplicationViewPage extends LitElement {
@property()
apps?: PBResponse<Application>;
static get styles() {
static get styles(): CSSResult[] {
return COMMON_STYLES.concat(
css`
img.pf-icon {

15
web/src/pages/RouterOutlet.ts
View file

@ -1,4 +1,4 @@
import { css, customElement, html, LitElement, property, TemplateResult } from "lit-element";
import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
// @ts-ignore
import CodeMirrorStyle from "codemirror/lib/codemirror.css";
// @ts-ignore
@ -61,15 +61,16 @@ export const ROUTES: Route[] = [
class RouteMatch {
route: Route;
arguments?: RegExpExecArray;
arguments: { [key: string]: string; };
fullUrl?: string;
constructor(route: Route) {
this.route = route;
this.arguments = {};
}
render(): TemplateResult {
return this.route.render(this.arguments!.groups || {});
return this.route.render(this.arguments);
}
toString(): string {
@ -85,7 +86,7 @@ export class RouterOutlet extends LitElement {
@property()
defaultUrl?: string;
static get styles() {
static get styles(): CSSResult[] {
return [
CodeMirrorStyle,
CodeMirrorTheme,
@ -110,7 +111,7 @@ export class RouterOutlet extends LitElement {
navigate(): void {
let activeUrl = window.location.hash.slice(1, Infinity);
if (activeUrl === "") {
activeUrl = this.defaultUrl!;
activeUrl = this.defaultUrl || "/";
window.location.hash = `#${activeUrl}`;
console.debug(`passbook/router: set to ${window.location.hash}`);
return;
@ -121,7 +122,7 @@ export class RouterOutlet extends LitElement {
const match = route.url.exec(activeUrl);
if (match != null) {
matchedRoute = new RouteMatch(route);
matchedRoute.arguments = match;
matchedRoute.arguments = match.groups || {};
matchedRoute.fullUrl = activeUrl;
console.debug(`passbook/router: found match ${matchedRoute}`);
return true;
@ -136,7 +137,7 @@ export class RouterOutlet extends LitElement {
</pb-site-shell>`
);
matchedRoute = new RouteMatch(route);
matchedRoute.arguments = route.url.exec(activeUrl)!;
matchedRoute.arguments = route.url.exec(activeUrl)?.groups || {};
matchedRoute.fullUrl = activeUrl;
}
this.current = matchedRoute;

19
web/src/pages/SiteShell.ts
View file

@ -1,4 +1,4 @@
import { css, customElement, html, LitElement, property } from "lit-element";
import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
// @ts-ignore
import BullseyeStyle from "@patternfly/patternfly/layouts/Bullseye/bullseye.css";
// @ts-ignore
@ -19,7 +19,7 @@ export class SiteShell extends LitElement {
@property()
loading = false;
static get styles() {
static get styles(): CSSResult[] {
return [
css`
:host,
@ -44,7 +44,7 @@ export class SiteShell extends LitElement {
];
}
loadContent() {
loadContent(): void {
if (!this._url) {
return;
}
@ -60,7 +60,11 @@ export class SiteShell extends LitElement {
})
.then((r) => r.text())
.then((t) => {
this.querySelector("[slot=body]")!.innerHTML = t;
const bodySlot = this.querySelector("[slot=body]");
if (!bodySlot) {
return;
}
bodySlot.innerHTML = t;
})
.then(() => {
// Ensure anchors only change the hash
@ -73,12 +77,13 @@ export class SiteShell extends LitElement {
const qs = url.search || "";
a.href = `#${url.pathname}${qs}`;
} catch (e) {
console.debug(`passbook/site-shell: error ${e}`);
a.href = `#${a.href}`;
}
});
// Create refresh buttons
this.querySelectorAll("[role=pb-refresh]").forEach((rt) => {
rt.addEventListener("click", (e) => {
rt.addEventListener("click", () => {
this.loadContent();
});
});
@ -87,7 +92,7 @@ export class SiteShell extends LitElement {
f.addEventListener("submit", (e) => {
e.preventDefault();
const formData = new FormData(f);
const qs = new URLSearchParams(<any>(<unknown>formData)).toString();
const qs = new URLSearchParams((<any>formData)).toString(); // eslint-disable-line
window.location.hash = `#${this._url}?${qs}`;
});
});
@ -97,7 +102,7 @@ export class SiteShell extends LitElement {
});
}
render() {
render(): TemplateResult {
return html` ${this.loading ?
html`<div class="pf-c-backdrop">
<div class="pf-l-bullseye">

8
web/src/pages/applications/ApplicationListPage.ts
View file

@ -29,10 +29,10 @@ export class ApplicationList extends TablePage<Application> {
row(item: Application): string[] {
return [
item.name!,
item.slug!,
item.provider!.toString(),
item.provider!.toString(),
item.name,
item.slug,
item.provider.toString(),
item.provider.toString(),
`
<pb-modal-button href="administration/policies/bindings/${item.pk}/update/">
<pb-spinner-button slot="trigger" class="pf-m-secondary">

12
web/src/pages/applications/ApplicationViewPage.ts
View file

@ -1,5 +1,5 @@
import { gettext } from "django";
import { css, customElement, html, LitElement, property, TemplateResult } from "lit-element";
import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
import { Application } from "../../api/application";
import { DefaultClient, PBResponse } from "../../api/client";
import { PolicyBinding } from "../../api/policy_binding";
@ -13,7 +13,7 @@ export class BoundPoliciesList extends Table<PolicyBinding> {
apiEndpoint(page: number): Promise<PBResponse<PolicyBinding>> {
return DefaultClient.fetch<PBResponse<PolicyBinding>>(["policies", "bindings"], {
target: this.target!,
target: this.target || "",
ordering: "order",
page: page,
});
@ -62,7 +62,7 @@ export class ApplicationViewPage extends LitElement {
@property()
application?: Application;
static get styles(): any[] {
static get styles(): CSSResult[] {
return COMMON_STYLES.concat(
css`
img.pf-icon {
@ -95,12 +95,10 @@ export class ApplicationViewPage extends LitElement {
</div>
</div>
<div class="pf-c-card__body">
${this.application ?
html`
${this.application ? html`
<pb-admin-logins-chart
url="${DefaultClient.makeUrl(["core", "applications", this.application?.slug, "metrics"])}">
</pb-admin-logins-chart>`
: ""}
</pb-admin-logins-chart>`: ""}
</div>
</div>
</div>

6
web/src/utils.ts
View file

@ -1,3 +1,5 @@
import { html, TemplateResult } from "lit-html";
export function getCookie(name: string): string | undefined {
let cookieValue = undefined;
if (document.cookie && document.cookie !== "") {
@ -28,3 +30,7 @@ export function truncate(input?: string, max = 10): string {
return array.slice(0, max).join(" ") + ellipsis;
}
export function htmlFromString(...strings: string[]): TemplateResult {
return html({ raw: strings, ...strings } as TemplateStringsArray);
}