web: switch to eslint

2020-12-01 09:15:41 +01:00 · 2020-12-01 09:15:41 +01:00 · 0231bcf685
parent a312ad2ad1
commit 0231bcf685
25 changed files with 1010 additions and 151 deletions
--- a/web/.eslintignore
+++ b/web/.eslintignore
@ -0,0 +1,6 @@
+# don't ever lint node_modules
+node_modules
+# don't lint build output (make sure it's set to your correct build folder name)
+dist
+# don't lint nyc coverage output
+coverage
--- a/web/.eslintrc.js
+++ b/web/.eslintrc.js
@ -0,0 +1,19 @@
+module.exports = {
+    env: {
+        browser: true,
+        es2021: true,
+    },
+    extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
+    parser: "@typescript-eslint/parser",
+    parserOptions: {
+        ecmaVersion: 12,
+        sourceType: "module",
+    },
+    plugins: ["@typescript-eslint"],
+    rules: {
+        indent: ["error", 4],
+        "linebreak-style": ["error", "unix"],
+        quotes: ["error", "double"],
+        semi: ["error", "always"],
+    },
+};
--- a/web/package-lock.json
+++ b/web/package-lock.json
--- a/web/package.json
+++ b/web/package.json
@ -24,11 +24,14 @@
    },
    "devDependencies": {
        "@rollup/plugin-typescript": "^8.0.0",
-        "prettier": "2.2.1",
+        "@typescript-eslint/eslint-plugin": "^4.9.0",
+        "@typescript-eslint/parser": "^4.9.0",
+        "eslint": "^7.14.0",
        "rollup-plugin-commonjs": "^10.1.0",
        "rollup-plugin-minify-html-literals": "^1.2.5",
        "rollup-plugin-node-resolve": "^5.2.0",
        "rollup-plugin-sourcemaps": "^0.6.3",
-        "rollup-plugin-terser": "^7.0.2"
+        "rollup-plugin-terser": "^7.0.2",
+        "typescript": "^4.1.2"
    }
 }
--- a/web/src/api/client.ts
+++ b/web/src/api/client.ts
@ -6,7 +6,7 @@ export class Client {
    makeUrl(url: string[], query?: { [key: string]: string }): string {
        let builtUrl = `/api/${VERSION}/${url.join("/")}/`;
        if (query) {
-            let queryString = Object.keys(query)
+            const queryString = Object.keys(query)
                .map((k) => encodeURIComponent(k) + "=" + encodeURIComponent(query[k]))
                .join("&");
            builtUrl += `?${queryString}`;
--- a/web/src/api/config.ts
+++ b/web/src/api/config.ts
@ -21,7 +21,7 @@ export class Config {
                    tracesSampleRate: 1.0,
                    environment: config.error_reporting_environment,
                });
-                console.debug(`passbook/config: Sentry enabled.`);
+                console.debug("passbook/config: Sentry enabled.");
            }
            return config;
        });
--- a/web/src/api/policy_binding.ts
+++ b/web/src/api/policy_binding.ts
@ -0,0 +1,15 @@
+export interface Policy {
+    pk: string;
+    name: string;
+    [key: string]: any;
+}
+
+export interface PolicyBinding {
+    pk: string;
+    policy: string,
+    policy_obj: Policy;
+    target: string;
+    enabled: boolean;
+    order: number;
+    timeout: number;
+}
--- a/web/src/elements/AdminLoginsChart.ts
+++ b/web/src/elements/AdminLoginsChart.ts
@ -9,7 +9,7 @@ interface TickValue {
@customElement("pb-admin-logins-chart")
 export class AdminLoginsChart extends LitElement {
    @property()
-    url: string = "";
+    url = "";

    chart: any;

@ -43,7 +43,7 @@ export class AdminLoginsChart extends LitElement {
            .then((r) => r.json())
            .catch((e) => console.error(e))
            .then((r) => {
-                let ctx = (<HTMLCanvasElement>this.shadowRoot?.querySelector("canvas")).getContext(
+                const ctx = (<HTMLCanvasElement>this.shadowRoot?.querySelector("canvas")).getContext(
                    "2d"
                )!;
                this.chart = new Chart(ctx, {
--- a/web/src/elements/CodeMirror.ts
+++ b/web/src/elements/CodeMirror.ts
@ -10,10 +10,10 @@ import "codemirror/mode/python/python.js";
@customElement("pb-codemirror")
 export class CodeMirrorTextarea extends LitElement {
    @property()
-    readOnly: boolean = false;
+    readOnly = false;

    @property()
-    mode: string = "yaml";
+    mode = "yaml";

    editor?: CodeMirror.EditorFromTextArea;

--- a/web/src/elements/FetchFillSlot.ts
+++ b/web/src/elements/FetchFillSlot.ts
@ -7,16 +7,16 @@ interface ComparisonHash {
@customElement("fetch-fill-slot")
 export class FetchFillSlot extends LitElement {
    @property()
-    url: string = "";
+    url = "";

    @property()
-    key: string = "";
+    key = "";

    @property()
-    value: string = "";
+    value = "";

    comparison(slotName: string) {
-        let comparisonOperatorsHash = <ComparisonHash>{
+        const comparisonOperatorsHash = <ComparisonHash>{
            "<": function (a: any, b: any) {
                return a < b;
            },
--- a/web/src/elements/Messages.ts
+++ b/web/src/elements/Messages.ts
@ -7,7 +7,7 @@ const LEVEL_ICON_MAP: { [key: string]: string } = {
    info: "fas fa-info",
 };

-let ID = function (prefix: string) {
+const ID = function (prefix: string) {
    return prefix + Math.random().toString(36).substr(2, 9);
 };

@ -20,10 +20,10 @@ interface Message {
@customElement("pb-messages")
 export class Messages extends LitElement {
    @property()
-    url: string = "";
+    url = "";

    messageSocket?: WebSocket;
-    retryDelay: number = 200;
+    retryDelay = 200;

    createRenderRoot() {
        return this;
@ -72,7 +72,7 @@ export class Messages extends LitElement {
     * This mostly gets messages which were created when the user arrives/leaves the site
     * and especially the login flow */
    fetchMessages() {
-        console.debug(`passbook/messages: fetching messages over direct api`);
+        console.debug("passbook/messages: fetching messages over direct api");
        return fetch(this.url)
            .then((r) => r.json())
            .then((r) => {
@ -94,7 +94,7 @@ export class Messages extends LitElement {
        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__icon">
                    <i class="${LEVEL_ICON_MAP[message.levelTag]}"></i>
                </div>
--- a/web/src/elements/Tabs.ts
+++ b/web/src/elements/Tabs.ts
@ -15,7 +15,7 @@ export class Tabs extends LitElement {
    }

    render() {
-        let pages = Array.from(this.querySelectorAll("[slot]")!);
+        const pages = Array.from(this.querySelectorAll("[slot]")!);
        if (!this.currentPage) {
            if (pages.length < 1) {
                return html`<h1>no tabs defined</h1>`;
--- a/web/src/elements/buttons/ActionButton.ts
+++ b/web/src/elements/buttons/ActionButton.ts
@ -6,7 +6,7 @@ import { SpinnerButton } from "./SpinnerButton";
@customElement("pb-action-button")
 export class ActionButton extends SpinnerButton {
    @property()
-    url: string = "";
+    url = "";

    callAction() {
        if (this.isRunning === true) {
--- a/web/src/elements/buttons/ModalButton.ts
+++ b/web/src/elements/buttons/ModalButton.ts
@ -20,7 +20,7 @@ export class ModalButton extends LitElement {
    href?: string;

    @property()
-    open: boolean = false;
+    open = false;

    static get styles() {
        return [
@ -79,7 +79,7 @@ export class ModalButton extends LitElement {
        this.querySelectorAll<HTMLFormElement>("[slot=modal] form").forEach((form) => {
            form.addEventListener("submit", (e) => {
                e.preventDefault();
-                let formData = new FormData(form);
+                const formData = new FormData(form);
                fetch(this.href ? this.href : form.action, {
                    method: form.method,
                    body: formData,
@ -91,11 +91,11 @@ export class ModalButton extends LitElement {
                    .then((data) => {
                        if (data.indexOf("csrfmiddlewaretoken") !== -1) {
                            this.querySelector("[slot=modal]")!.innerHTML = data;
-                            console.debug(`passbook/modalbutton: re-showing form`);
+                            console.debug("passbook/modalbutton: re-showing form");
                            this.updateHandlers();
                        } else {
                            this.open = false;
-                            console.debug(`passbook/modalbutton: successful submit`);
+                            console.debug("passbook/modalbutton: successful submit");
                            this.dispatchEvent(
                                new CustomEvent("hashchange", {
                                    bubbles: true,
--- a/web/src/elements/table/Table.ts
+++ b/web/src/elements/table/Table.ts
@ -12,7 +12,7 @@ export abstract class Table<T> extends LitElement {
    data?: PBResponse<T>;

    @property()
-    page: number = 1;
+    page = 1;

    static get styles() {
        return [COMMON_STYLES];
@ -51,12 +51,12 @@ export abstract class Table<T> extends LitElement {
            return;
        }
        return this.data.results.map((item) => {
-            const fullRow = [`<tr role="row">`].concat(
+            const fullRow = ["<tr role=\"row\">"].concat(
                this.row(item).map((col) => {
                    return `<td role="cell">${col}</td>`;
                })
            );
-            fullRow.push(`</tr>`);
+            fullRow.push("</tr>");
            return html(<any>fullRow);
        });
    }
--- a/web/src/elements/table/TablePagination.ts
+++ b/web/src/elements/table/TablePagination.ts
@ -13,7 +13,7 @@ export class TablePagination extends LitElement {

    previousHandler() {
        if (!this.table?.data?.pagination.previous) {
-            console.debug(`passbook/tables: no previous`);
+            console.debug("passbook/tables: no previous");
            return;
        }
        this.table.page = this.table?.data?.pagination.previous;
@ -21,7 +21,7 @@ export class TablePagination extends LitElement {

    nextHandler() {
        if (!this.table?.data?.pagination.next) {
-            console.debug(`passbook/tables: no next`);
+            console.debug("passbook/tables: no next");
            return;
        }
        this.table.page = this.table?.data?.pagination.next;
--- a/web/src/pages/FlowShellCard.ts
+++ b/web/src/pages/FlowShellCard.ts
@ -1,4 +1,4 @@
-import { LitElement, html, customElement, property } from "lit-element";
+import { LitElement, html, customElement, property, TemplateResult } from "lit-element";

 enum ResponseType {
    redirect = "redirect",
@ -14,16 +14,16 @@ interface Response {
@customElement("pb-flow-shell-card")
 export class FlowShellCard extends LitElement {
    @property()
-    flowBodyUrl: string = "";
+    flowBodyUrl = "";

    @property()
    flowBody?: string;

-    createRenderRoot() {
+    createRenderRoot(): Element | ShadowRoot {
        return this;
    }

-    firstUpdated() {
+    firstUpdated(): void {
        fetch(this.flowBodyUrl)
            .then((r) => {
                if (r.status === 404) {
@ -46,7 +46,7 @@ export class FlowShellCard extends LitElement {
            });
    }

-    async updateCard(data: Response) {
+    async updateCard(data: Response): Promise<void> {
        switch (data.type) {
        case ResponseType.redirect:
            window.location.assign(data.to!);
@ -64,22 +64,22 @@ export class FlowShellCard extends LitElement {
        }
    }

-    loadFormCode() {
+    loadFormCode(): void {
        this.querySelectorAll("script").forEach((script) => {
-            let newScript = document.createElement("script");
+            const newScript = document.createElement("script");
            newScript.src = script.src;
            document.head.appendChild(newScript);
        });
    }

-    checkAutofocus() {
+    checkAutofocus(): void {
        const autofocusElement = <HTMLElement>this.querySelector("[autofocus]");
        if (autofocusElement !== null) {
            autofocusElement.focus();
        }
    }

-    updateFormAction(form: HTMLFormElement) {
+    updateFormAction(form: HTMLFormElement): boolean {
        for (let index = 0; index < form.elements.length; index++) {
            const element = <HTMLInputElement>form.elements[index];
            if (element.value === form.action) {
@ -94,13 +94,13 @@ export class FlowShellCard extends LitElement {
        return true;
    }

-    checkAutosubmit(form: HTMLFormElement) {
+    checkAutosubmit(form: HTMLFormElement): void {
        if ("autosubmit" in form.attributes) {
            return form.submit();
        }
    }

-    setFormSubmitHandlers() {
+    setFormSubmitHandlers(): void {
        this.querySelectorAll("form").forEach((form) => {
            console.debug(`passbook/flows: Checking for autosubmit attribute ${form}`);
            this.checkAutosubmit(form);
@ -109,7 +109,7 @@ export class FlowShellCard extends LitElement {
            console.debug(`passbook/flows: Adding handler for form ${form}`);
            form.addEventListener("submit", (e) => {
                e.preventDefault();
-                let formData = new FormData(form);
+                const formData = new FormData(form);
                this.flowBody = undefined;
                fetch(this.flowBodyUrl, {
                    method: "post",
@ -129,7 +129,7 @@ export class FlowShellCard extends LitElement {
        });
    }

-    errorMessage(error: string) {
+    errorMessage(error: string): void {
        this.flowBody = `
            <style>
                .pb-exception {
@ -150,7 +150,7 @@ export class FlowShellCard extends LitElement {
            </div>`;
    }

-    loading() {
+    loading(): TemplateResult {
        return html` <div class="pf-c-login__main-body pb-loading">
            <span class="pf-c-spinner" role="progressbar" aria-valuetext="Loading...">
                <span class="pf-c-spinner__clipper"></span>
@ -160,7 +160,7 @@ export class FlowShellCard extends LitElement {
        </div>`;
    }

-    render() {
+    render(): TemplateResult {
        if (this.flowBody) {
            return html(<TemplateStringsArray>(<unknown>[this.flowBody]));
        }
--- a/web/src/pages/LibraryPage.ts
+++ b/web/src/pages/LibraryPage.ts
@ -1,6 +1,6 @@
 import { css, customElement, html, LitElement, property, TemplateResult } from "lit-element";
 import { Application } from "../api/application";
-import { DefaultClient, PBResponse } from "../api/client";
+import { PBResponse } from "../api/client";
 import { COMMON_STYLES } from "../common/styles";
 import { truncate } from "../utils";

@ -19,18 +19,17 @@ export class ApplicationViewPage extends LitElement {
        );
    }

-    firstUpdated() {
+    firstUpdated(): void {
        Application.list().then((r) => (this.apps = r));
    }

-    renderEmptyState() {
+    renderEmptyState(): TemplateResult {
        return html` <div class="pf-c-empty-state pf-m-full-height">
            <div class="pf-c-empty-state__content">
                <i class="fas fa-cubes pf-c-empty-state__icon" aria-hidden="true"></i>
-                <h1 class="pf-c-title pf-m-lg">{% trans 'No Applications available.' %}</h1>
+                <h1 class="pf-c-title pf-m-lg">No Applications available.</h1>
                <div class="pf-c-empty-state__body">
-                    {% trans "Either no applications are defined, or you don't have access to any."
-                    %}
+                    Either no applications are defined, or you don't have access to any.
                </div>
                {% if perms.passbook_core.add_application %}
                <a
@ -66,7 +65,7 @@ export class ApplicationViewPage extends LitElement {
        </a>`;
    }

-    renderLoading() {
+    renderLoading(): TemplateResult {
        return html`<div class="pf-c-empty-state pf-m-full-height">
            <div class="pf-c-empty-state__content">
                <div class="pf-l-bullseye">
@ -86,7 +85,7 @@ export class ApplicationViewPage extends LitElement {
        </div>`;
    }

-    render() {
+    render(): TemplateResult {
        return html`<main role="main" class="pf-c-page__main" tabindex="-1" id="main-content">
            <section class="pf-c-page__main-section pf-m-light">
                <div class="pf-c-content">
--- a/web/src/pages/RouterOutlet.ts
+++ b/web/src/pages/RouterOutlet.ts
@ -49,10 +49,10 @@ export class Route {
 export const SLUG_REGEX = "[-a-zA-Z0-9_]+";
 export const ROUTES: Route[] = [
    // Prevent infinite Shell loops
-    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(`^/applications/$`), html`<pb-application-list></pb-application-list>`),
+    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("^/applications/$"), html`<pb-application-list></pb-application-list>`),
    new Route(new RegExp(`^/applications/(?<slug>${SLUG_REGEX})/$`)).then((args) => {
        return html`<pb-application-view .args=${args}></pb-application-view>`;
    }),
@ -99,14 +99,14 @@ export class RouterOutlet extends LitElement {

    constructor() {
        super();
-        window.addEventListener("hashchange", (e) => this.navigate());
+        window.addEventListener("hashchange", () => this.navigate());
    }

-    firstUpdated() {
+    firstUpdated(): void {
        this.navigate();
    }

-    navigate() {
+    navigate(): void {
        let activeUrl = window.location.hash.slice(1, Infinity);
        if (activeUrl === "") {
            activeUrl = this.defaultUrl!;
@ -141,7 +141,7 @@ export class RouterOutlet extends LitElement {
        this.current = matchedRoute;
    }

-    render() {
+    render(): TemplateResult {
        return this.current?.render();
    }
 }
--- a/web/src/pages/SiteShell.ts
+++ b/web/src/pages/SiteShell.ts
@ -17,7 +17,7 @@ export class SiteShell extends LitElement {
    _url?: string;

    @property()
-    loading: boolean = false;
+    loading = false;

    static get styles() {
        return [
--- a/web/src/pages/applications/ApplicationViewPage.ts
+++ b/web/src/pages/applications/ApplicationViewPage.ts
@ -1,16 +1,17 @@
 import { css, 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";
 import { COMMON_STYLES } from "../../common/styles";
 import { Table } from "../../elements/table/Table";

@customElement("pb-bound-policies-list")
-export class BoundPoliciesList extends Table<any> {
+export class BoundPoliciesList extends Table<PolicyBinding> {
    @property()
    target?: string;

-    apiEndpoint(page: number): Promise<PBResponse<any>> {
-        return DefaultClient.fetch<PBResponse<any>>(["policies", "bindings"], {
+    apiEndpoint(page: number): Promise<PBResponse<PolicyBinding>> {
+        return DefaultClient.fetch<PBResponse<PolicyBinding>>(["policies", "bindings"], {
            target: this.target!,
            ordering: "order",
            page: page,
@ -21,12 +22,12 @@ export class BoundPoliciesList extends Table<any> {
        return ["Policy", "Enabled", "Order", "Timeout", ""];
    }

-    row(item: any): string[] {
+    row(item: PolicyBinding): string[] {
        return [
            item.policy_obj.name,
-            item.enabled,
-            item.order,
-            item.timeout,
+            item.enabled ? "Yes" : "No",
+            item.order.toString(),
+            item.timeout.toString(),
            `
            <pb-modal-button href="administration/policies/bindings/${item.pk}/update/">
                <pb-spinner-button slot="trigger" class="pf-m-secondary">
@ -70,7 +71,7 @@ export class ApplicationViewPage extends LitElement {
        );
    }

-    render() {
+    render(): TemplateResult {
        if (!this.application) {
            return html``;
        }
@ -84,44 +85,24 @@ export class ApplicationViewPage extends LitElement {
                </div>
            </section>
            <pb-tabs>
-                <section
-                    slot="page-1"
-                    tab-title="Users"
-                    class="pf-c-page__main-section pf-m-no-padding-mobile"
-                >
+                <section slot="page-1" tab-title="Users" class="pf-c-page__main-section pf-m-no-padding-mobile">
                    <div class="pf-l-gallery pf-m-gutter">
-                        <div
-                            class="pf-c-card pf-c-card-aggregate pf-l-gallery__item pf-m-4-col"
-                            style="grid-column-end: span 3;grid-row-end: span 2;"
-                        >
+                        <div class="pf-c-card pf-c-card-aggregate pf-l-gallery__item pf-m-4-col" style="grid-column-end: span 3;grid-row-end: span 2;">
                            <div class="pf-c-card__header">
                                <div class="pf-c-card__header-main">
-                                    <i class="pf-icon pf-icon-server"></i> Logins over the last 24
-                                    hours
+                                    <i class="pf-icon pf-icon-server"></i> Logins over the last 24 hours
                                </div>
                            </div>
                            <div class="pf-c-card__body">
-                                <pb-admin-logins-chart
-                                    url="${DefaultClient.makeUrl([
-                                        "core",
-                                        "applications",
-                                        this.application?.slug!,
-                                        "metrics",
-                                    ])}"
-                                ></pb-admin-logins-chart>
+                                ${this.application ?
+        html`<pb-admin-logins-chart url="${DefaultClient.makeUrl(["core", "applications", this.application?.slug!, "metrics"])}"></pb-admin-logins-chart>` : ""}
                            </div>
                        </div>
                    </div>
                </section>
-                <div
-                    slot="page-2"
-                    tab-title="Policy Bindings"
-                    class="pf-c-page__main-section pf-m-no-padding-mobile"
-                >
+                <div slot="page-2" tab-title="Policy Bindings" class="pf-c-page__main-section pf-m-no-padding-mobile">
                    <div class="pf-c-card">
-                        <pb-bound-policies-list
-                            .target=${this.application.pk}
-                        ></pb-bound-policies-list>
+                        <pb-bound-policies-list .target=${this.application.pk}></pb-bound-policies-list>
                    </div>
                </div>
            </pb-tabs>`;
--- a/web/src/utils.ts
+++ b/web/src/utils.ts
@ -1,5 +1,5 @@
-export function getCookie(name: string) {
-    let cookieValue = null;
+export function getCookie(name: string): string | undefined {
+    let cookieValue = undefined;
    if (document.cookie && document.cookie !== "") {
        const cookies = document.cookie.split(";");
        for (let i = 0; i < cookies.length; i++) {