web: switch to eslint

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

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"],
+    },
+};

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"
     }
 }

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

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;
         });

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;
+}

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, {

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;
 

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;
             },

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) => {

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

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) {

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,

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);
         });
     }

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;

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]));
         }

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">

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(`^#.*`)).redirect("/library/"),
+    new Route(new RegExp("^#.*")).redirect("/library/"),
-    new Route(new RegExp(`^/library/$`), html`<pb-library></pb-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/$"), 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();
     }
 }

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 [

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>> {
+    apiEndpoint(page: number): Promise<PBResponse<PolicyBinding>> {
-        return DefaultClient.fetch<PBResponse<any>>(["policies", "bindings"], {
+        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.enabled ? "Yes" : "No",
-            item.order,
+            item.order.toString(),
-            item.timeout,
+            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
+                <section slot="page-1" tab-title="Users" class="pf-c-page__main-section pf-m-no-padding-mobile">
-                    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
+                        <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;">
-                            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
+                                    <i class="pf-icon pf-icon-server"></i> Logins over the last 24 hours
-                                    hours
                                 </div>
                             </div>
                             <div class="pf-c-card__body">
-                                <pb-admin-logins-chart
+                                ${this.application ?
-                                    url="${DefaultClient.makeUrl([
+        html`<pb-admin-logins-chart url="${DefaultClient.makeUrl(["core", "applications", this.application?.slug!, "metrics"])}"></pb-admin-logins-chart>` : ""}
-                                        "core",
-                                        "applications",
-                                        this.application?.slug!,
-                                        "metrics",
-                                    ])}"
-                                ></pb-admin-logins-chart>
                             </div>
                         </div>
                     </div>
                 </section>
-                <div
+                <div slot="page-2" tab-title="Policy Bindings" class="pf-c-page__main-section pf-m-no-padding-mobile">
-                    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
+                        <pb-bound-policies-list .target=${this.application.pk}></pb-bound-policies-list>
-                            .target=${this.application.pk}
-                        ></pb-bound-policies-list>
                     </div>
                 </div>
             </pb-tabs>`;

web/src/utils.ts

@@ -1,5 +1,5 @@
-export function getCookie(name: string) {
+export function getCookie(name: string): string | undefined {
-    let cookieValue = null;
+    let cookieValue = undefined;
     if (document.cookie && document.cookie !== "") {
         const cookies = document.cookie.split(";");
         for (let i = 0; i < cookies.length; i++) {