web: all the basic commands are working: build, build types, lint source, lint lockfile, lint packagefile, lint types, lint spelling, format source, format package.

2024-08-08 15:08:05 -07:00
parent 7a0b227b46
commit 9084c7c6b4
15 changed files with 190 additions and 145 deletions
--- a/web/package-lock.json
+++ b/web/package-lock.json
@ -33,6 +33,7 @@
                "@patternfly/elements": "^3.0.2",
                "@patternfly/patternfly": "^4.224.2",
                "@sentry/browser": "^8.24.0",
+                "@types/webappsec-credential-management": "^0.6.8",
                "@webcomponents/webcomponentsjs": "^2.8.0",
                "base64-js": "^1.5.1",
                "chart.js": "^4.4.3",
@ -8816,6 +8817,11 @@
            "dev": true,
            "license": "MIT"
        },
+        "node_modules/@types/webappsec-credential-management": {
+            "version": "0.6.8",
+            "resolved": "https://registry.npmjs.org/@types/webappsec-credential-management/-/webappsec-credential-management-0.6.8.tgz",
+            "integrity": "sha512-DES/SkK54U7AG8hmMkGCJkOSlywM3R+TzaWT+rBnX3lQTJ3K57jWr+UccWY8ImkuKekC9BjB+AH4zLJB4JKpvQ=="
+        },
        "node_modules/@types/which": {
            "version": "2.0.2",
            "dev": true,
@ -26150,6 +26156,7 @@
            "license": "MIT",
            "dependencies": {
                "@sentry/browser": "^8.23.0",
+                "@types/webappsec-credential-management": "^0.6.8",
                "base64-js": "^1.5.1"
            },
            "devDependencies": {
--- a/web/packages/common/.prettierignore
+++ b/web/packages/common/.prettierignore
@ -0,0 +1,16 @@
+# 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
+# Import order matters
+poly.ts
+src/locale-codes.ts
+src/locales/
+storybook-static/
+# Prettier breaks the tsconfig file
+tsconfig.json
+.storybook/css-import-maps*
+package.json
+packages/**/package.json
--- a/web/packages/common/.prettierrc.json
+++ b/web/packages/common/.prettierrc.json
@ -0,0 +1,23 @@
+{
+    "arrowParens": "always",
+    "bracketSpacing": true,
+    "embeddedLanguageFormatting": "auto",
+    "htmlWhitespaceSensitivity": "css",
+    "insertPragma": false,
+    "jsxSingleQuote": false,
+    "printWidth": 100,
+    "proseWrap": "preserve",
+    "quoteProps": "consistent",
+    "requirePragma": false,
+    "semi": true,
+    "singleQuote": false,
+    "tabWidth": 4,
+    "trailingComma": "all",
+    "useTabs": false,
+    "vueIndentScriptAndStyle": false,
+    "plugins": ["@trivago/prettier-plugin-sort-imports"],
+    "importOrder": ["^(@?)lit(.*)$", "\\.css$", "^@goauthentik/api$", "^[./]"],
+    "importOrderSeparation": true,
+    "importOrderSortSpecifiers": true,
+    "importOrderParserPlugins": ["typescript", "classProperties", "decorators-legacy"]
+}
--- a/web/packages/common/README.md
+++ b/web/packages/common/README.md
@ -1,7 +1,7 @@
 # @goauthentik/common

 The `common` package is a bit of a grab-bag of tools, utilities, and configuration details used
-throughout the Authentik front-end suite. Here, we'll try (emphasis on the *try*) to document what
+throughout the Authentik front-end suite. Here, we'll try (emphasis on the _try_) to document what
 each part does.

 -   `./api`
@ -59,6 +59,7 @@ which it was invoked.  Used by our Django application to preload configuration i
 -   `./labels.ts`,

 Maps a variety of API tokens to human-readable labels, including those for:
+
 -   Events
 -   Severities
 -   User Types
@ -90,5 +91,3 @@ YouMightNotNeedLodash, a slugifier, some date handling utilities, that sort of t
 -   `./ws.ts`

 Sets up our web socket for receiving server-side events. Used by all three major interfaces.
-
-
--- a/web/packages/common/eslint.config.mjs
+++ b/web/packages/common/eslint.config.mjs
@ -12,6 +12,8 @@ export default [
    {
        ignores: [
            "dist/",
+            ".wireit/",
+            "packages/common/.wireit/",
            // don't ever lint node_modules
            "node_modules/",
            ".storybook/*",
--- a/web/packages/common/package.json
+++ b/web/packages/common/package.json
@ -1,23 +1,11 @@
 {
    "name": "@goauthentik/common",
    "version": "0.0.0",
-    "private": true,
-    "license": "MIT",
-    "type": "module",
-    "exports": {
-        "./*": "./dist/*"
-    },
-    "files": [
-        "./dist/**/*"
-    ],
    "dependencies": {
        "@sentry/browser": "^8.23.0",
+        "@types/webappsec-credential-management": "^0.6.8",
        "base64-js": "^1.5.1"
    },
-    "peerDependencies": {
-        "@lit/localize": "^0.12.2",
-        "lit": "^3.2.0"
-    },
    "devDependencies": {
        "@eslint/js": "^9.8.0",
        "@types/eslint__js": "^8.42.3",
@ -39,6 +27,18 @@
        "typesync": "^0.13.0",
        "wireit": "^0.14.4"
    },
+    "exports": {
+        "./*": "./dist/*"
+    },
+    "files": [
+        "./dist/**/*"
+    ],
+    "license": "MIT",
+    "peerDependencies": {
+        "@lit/localize": "^0.12.2",
+        "lit": "^3.2.0"
+    },
+    "private": true,
    "scripts": {
        "build": "wireit",
        "build:types": "wireit",
@ -47,11 +47,12 @@
        "lint:lockfile": "wireit",
        "lint:nightmare": "wireit",
        "lint:package": "wireit",
-        "lint:precommit": "wireit",
        "lint:spelling": "wireit",
        "lint:types": "wireit",
+        "precommit": "wireit",
        "prettier": "wireit"
    },
+    "type": "module",
    "wireit": {
        "build": {
            "command": "${NODE_RUNNER} build.mjs",
@ -88,16 +89,13 @@
            ]
        },
        "lint": {
-            "command": "eslint --max-warnings 0 --fix",
+            "command": "eslint --max-warnings 0 --fix --config ./eslint.config.mjs",
            "env": {
                "NODE_OPTIONS": "--max_old_space_size=65536"
            }
        },
        "lint:types": {
-            "command": "tsc --noEmit -p .",
-            "dependencies": [
-                "build-locales"
-            ]
+            "command": "tsc --noEmit -p ."
        },
        "lint:lockfile": {
            "command": "lockfile-lint --path package.json --type npm --allowed-hosts npm --validate-https"
@ -105,6 +103,15 @@
        "lint:package": {
            "command": "syncpack format -i '    '"
        },
+        "lint:precommit": {
+            "command": "${NODE_RUNNER} ./scripts/eslint.mjs --precommit",
+            "env": {
+                "NODE_RUNNER": {
+                    "external": true,
+                    "default": "node"
+                }
+            }
+        },
        "lint:nightmare": {
            "command": "${NODE_RUNNER} ./scripts/eslint.mjs --nightmare",
            "env": {
@ -114,8 +121,15 @@
                }
            }
        },
-        "lint:precommit": {
-            "command": "${NODE_RUNNER} ./scripts/eslint.mjs --precommit",
+        "precommit": {
+            "command": "prettier --write .",
+            "dependencies": [
+                "lint:types",
+                "lint:spelling",
+                "lint:lockfile",
+                "lint:package",
+                "lint:precommit"
+            ],
            "env": {
                "NODE_RUNNER": {
                    "external": true,
--- a/web/packages/common/scripts/eslint-precommit.mjs
+++ b/web/packages/common/scripts/eslint-precommit.mjs
@ -1,48 +0,0 @@
-import { execFileSync } from "child_process";
-import { ESLint } from "eslint";
-import path from "path";
-import process from "process";
-
-// Code assumes this script is in the './web/scripts' folder.
-const projectRoot = execFileSync("git", ["rev-parse", "--show-toplevel"], {
-    encoding: "utf8",
-}).replace("\n", "");
-process.chdir(path.join(projectRoot, "./web"));
-
-const eslintConfig = {
-    overrideConfig: {
-        env: {
-            browser: true,
-            es2021: true,
-        },
-        extends: [
-            "eslint:recommended",
-            "plugin:@typescript-eslint/recommended",
-            "plugin:lit/recommended",
-            "plugin:custom-elements/recommended",
-            "plugin:storybook/recommended",
-        ],
-        parser: "@typescript-eslint/parser",
-        parserOptions: {
-            ecmaVersion: 12,
-            sourceType: "module",
-        },
-        plugins: ["@typescript-eslint", "lit", "custom-elements", "sonarjs"],
-        rules: {
-            "indent": "off",
-            "linebreak-style": ["error", "unix"],
-            "quotes": ["error", "double", { avoidEscape: true }],
-            "semi": ["error", "always"],
-            "@typescript-eslint/ban-ts-comment": "off",
-        },
-    },
-};
-
-const eslint = new ESLint(eslintConfig);
-const results = await eslint.lintFiles(["./src/**/*", "./build.mjs", "./scripts/*.mjs"]);
-const formatter = await eslint.loadFormatter("stylish");
-const resultText = formatter.format(results);
-const errors = results.reduce((acc, result) => acc + result.errorCount, 0);
-
-console.log(resultText);
-process.exit(errors > 1 ? 1 : 0);
--- a/web/packages/common/scripts/eslint.precommit.mjs
+++ b/web/packages/common/scripts/eslint.precommit.mjs
@ -13,6 +13,7 @@ export default [
    {
        ignores: [
            "dist/",
+            ".wireit/",
            // don't ever lint node_modules
            "node_modules/",
            ".storybook/*",
--- a/web/packages/common/src/helpers/plex.ts
+++ b/web/packages/common/src/helpers/plex.ts
@ -32,7 +32,6 @@ export async function popupCenterScreen(
    w: number,
    h: number,
 ): Promise<Window | null> {
-    // eslint-disable-next-line no-magic-numbers
    const [top, left] = [(screen.height - h) / 4, (screen.width - w) / 2];
    return new Promise((resolve) => {
        setTimeout(() => {
--- a/web/packages/common/src/helpers/webauthn.ts
+++ b/web/packages/common/src/helpers/webauthn.ts
@ -3,7 +3,7 @@ import * as base64js from "base64-js";
 import { msg } from "@lit/localize";

 export function b64enc(buf: Uint8Array): string {
-    return base64js.fromByteArray(buf).replace(/\+/g, "-").replace(/\//g, "_").replace(/=/g, "");
+    return base64js.fromByteArray(buf).replace(/\+/g, "-").replace(/\//g, "_").replace(/[=]/g, "");
 }

 export function b64RawEnc(buf: Uint8Array): string {
--- a/web/packages/common/src/sentry.ts
+++ b/web/packages/common/src/sentry.ts
@ -15,6 +15,17 @@ import { CapabilitiesEnum, Config, ResponseError } from "@goauthentik/api";

 export const TAG_SENTRY_COMPONENT = "authentik.component";
 export const TAG_SENTRY_CAPABILITIES = "authentik.capabilities";
+const MIN_PATH_LENGTH = 2;
+
+// Get the interface name from URL
+export function currentInterface(): string {
+    const pathMatches = window.location.pathname.match(/.+if\/(\w+)\//);
+    let knownInterface = "unknown";
+    if (pathMatches && pathMatches.length >= MIN_PATH_LENGTH) {
+        knownInterface = pathMatches[1];
+    }
+    return knownInterface.toLowerCase();
+}

 export async function configureSentry(canDoPpi = false): Promise<Config> {
    const cfg = await config();
@ -81,13 +92,3 @@ export async function configureSentry(canDoPpi = false): Promise<Config> {
    }
    return cfg;
 }
-
-// Get the interface name from URL
-export function currentInterface(): string {
-    const pathMatches = window.location.pathname.match(/.+if\/(\w+)\//);
-    let currentInterface = "unknown";
-    if (pathMatches && pathMatches.length >= 2) {
-        currentInterface = pathMatches[1];
-    }
-    return currentInterface.toLowerCase();
-}
--- a/web/packages/common/src/users.ts
+++ b/web/packages/common/src/users.ts
@ -5,10 +5,8 @@ import { CoreApi, ResponseError, SessionUser } from "@goauthentik/api";

 let globalMePromise: Promise<SessionUser> | undefined;

-export function refreshMe(): Promise<SessionUser> {
-    globalMePromise = undefined;
-    return me();
-}
+const HTTP_FORBIDDEN = 403;
+const HTTP_UNAUTHORIZED = 401;

 export function me(): Promise<SessionUser> {
    if (!globalMePromise) {
@ -48,7 +46,10 @@ export function me(): Promise<SessionUser> {
                        systemPermissions: [],
                    },
                };
-                if (ex.response?.status === 401 || ex.response?.status === 403) {
+                if (
+                    ex.response?.status === HTTP_UNAUTHORIZED ||
+                    ex.response?.status === HTTP_FORBIDDEN
+                ) {
                    const relativeUrl = window.location
                        .toString()
                        .substring(window.location.origin.length);
@ -61,3 +62,8 @@ export function me(): Promise<SessionUser> {
    }
    return globalMePromise;
 }
+
+export function refreshMe(): Promise<SessionUser> {
+    globalMePromise = undefined;
+    return me();
+}
--- a/web/packages/common/src/utils.ts
+++ b/web/packages/common/src/utils.ts
@ -9,7 +9,7 @@ export function getCookie(name: string): string {
        for (let i = 0; i < cookies.length; i++) {
            const cookie = cookies[i].trim();
            // Does this cookie string begin with the name we want?
-            if (cookie.substring(0, name.length + 1) === name + "=") {
+            if (cookie.substring(0, name.length + 1) === `${name}=`) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
@ -25,21 +25,21 @@ export function convertToSlug(text: string): string {
        .replace(/[^\w-]+/g, "");
 }

+const WORD_COUNT_TRUNCATION_DEFAULT = 10;
 /**
 * Truncate a string based on maximum word count
 */
-export function truncateWords(string: string, length = 10): string {
-    string = string || "";
-    const array = string.trim().split(" ");
-    const ellipsis = array.length > length ? "..." : "";
-
-    return array.slice(0, length).join(" ") + ellipsis;
+export function truncateWords(input: string, length = WORD_COUNT_TRUNCATION_DEFAULT): string {
+    const words = (input ?? "").trim().split(" ");
+    const ellipsis = words.length > length ? "..." : "";
+    return words.slice(0, length).join(" ") + ellipsis;
 }

+const CHAR_COUNT_TRUNCATION_DEFAULT = 10;
 /**
 * Truncate a string based on character count
 */
-export function truncate(string: string, length = 10): string {
+export function truncate(string: string, length = CHAR_COUNT_TRUNCATION_DEFAULT): string {
    return string.length > length ? `${string.substring(0, length)}...` : string;
 }

@ -83,20 +83,24 @@ export const ascii_lowercase = "abcdefghijklmnopqrstuvwxyz";
 export const ascii_uppercase = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
 export const ascii_letters = ascii_lowercase + ascii_uppercase;
 export const digits = "0123456789";
-export const hexdigits = digits + "abcdef" + "ABCDEF";
+export const hexdigits = `${digits}abcdefABCDEF}`;
 export const octdigits = "01234567";
 export const punctuation = "!\"#$%&'()*+,-./:;<=>?@[\\]^_`{|}~";

+const BYTE_SIZE = 256;
+
 export function randomString(len: number, charset: string): string {
    const chars = [];
    const array = new Uint8Array(len);
    self.crypto.getRandomValues(array);
    for (let index = 0; index < len; index++) {
-        chars.push(charset[Math.floor(charset.length * (array[index] / Math.pow(2, 8)))]);
+        chars.push(charset[Math.floor(charset.length * (array[index] / BYTE_SIZE))]);
    }
    return chars.join("");
 }

+const TIMEZONE_OFFSET = 60000; // milliseconds
+
 export function dateTimeLocal(date: Date): string {
    // So for some reason, the datetime-local input field requires ISO Datetime as value
    // But the standard javascript date.toISOString() returns everything with seconds and
@ -105,7 +109,7 @@ export function dateTimeLocal(date: Date): string {
    // figure.
    // Additionally, toISOString always returns the date without timezone, which we would like
    // to include for better usability
-    const tzOffset = new Date().getTimezoneOffset() * 60000; //offset in milliseconds
+    const tzOffset = new Date().getTimezoneOffset() * TIMEZONE_OFFSET;
    const localISOTime = new Date(date.getTime() - tzOffset).toISOString().slice(0, -1);
    const parts = localISOTime.split(":");
    return `${parts[0]}:${parts[1]}`;
@ -122,7 +126,7 @@ export function dateToUTC(date: Date): Date {
    // then subtract the timezone offset to create an "invalid" date (correct time&date)
    // but it still "thinks" it's in local TZ
    const timestamp = date.getTime();
-    const offset = -1 * (new Date().getTimezoneOffset() * 60000);
+    const offset = -1 * (new Date().getTimezoneOffset() * TIMEZONE_OFFSET);
    return new Date(timestamp - offset);
 }

@ -151,13 +155,26 @@ export function adaptCSS(sheet: AdaptableStylesheet | AdaptableStylesheet[]): Ad
    return Array.isArray(sheet) ? sheet.map(_adaptCSS) : _adaptCSS(sheet);
 }

+const SECONDS_IN_A_MINUTE = 60;
+const MINUTES_IN_AN_HOUR = 60;
+const HOURS_IN_A_DAY = 24;
+const DAYS_IN_A_YEAR = 365;
+const MONTHS_IN_A_YEAR = 12;
+
+const MILLISECONDS_IN_A_SECOND = 1000;
+const MILLISECONDS_IN_A_MINUTE = MILLISECONDS_IN_A_SECOND * SECONDS_IN_A_MINUTE;
+const MILLISECONDS_IN_AN_HOUR = MILLISECONDS_IN_A_MINUTE * MINUTES_IN_AN_HOUR;
+const MILLISECONDS_IN_A_DAY = MILLISECONDS_IN_AN_HOUR * HOURS_IN_A_DAY;
+const MILLISECONDS_IN_A_YEAR = MILLISECONDS_IN_A_DAY * DAYS_IN_A_YEAR;
+const MILLISECONDS_IN_A_MONTH = MILLISECONDS_IN_A_YEAR / MONTHS_IN_A_YEAR;
+
 const _timeUnits = new Map<Intl.RelativeTimeFormatUnit, number>([
-    ["year", 24 * 60 * 60 * 1000 * 365],
-    ["month", (24 * 60 * 60 * 1000 * 365) / 12],
-    ["day", 24 * 60 * 60 * 1000],
-    ["hour", 60 * 60 * 1000],
-    ["minute", 60 * 1000],
-    ["second", 1000],
+    ["year", MILLISECONDS_IN_A_YEAR],
+    ["month", MILLISECONDS_IN_A_MONTH],
+    ["day", MILLISECONDS_IN_A_DAY],
+    ["hour", MILLISECONDS_IN_AN_HOUR],
+    ["minute", MILLISECONDS_IN_A_MINUTE],
+    ["second", MILLISECONDS_IN_A_SECOND],
 ]);

 export function getRelativeTime(d1: Date, d2: Date = new Date()): string {
@ -166,9 +183,9 @@ export function getRelativeTime(d1: Date, d2: Date = new Date()): string {

    // "Math.abs" accounts for both "past" & "future" scenarios
    for (const [key, value] of _timeUnits) {
-        if (Math.abs(elapsed) > value || key == "second") {
+        if (Math.abs(elapsed) > value || key === "second") {
            return rtf.format(Math.round(elapsed / value), key);
        }
    }
-    return rtf.format(Math.round(elapsed / 1000), "second");
+    return rtf.format(Math.round(elapsed / MILLISECONDS_IN_A_SECOND), "second");
 }
--- a/web/packages/common/src/ws.ts
+++ b/web/packages/common/src/ws.ts
@ -7,9 +7,14 @@ export interface WSMessage {
    message_type: string;
 }

+const MESSAGE_RETRY_DELAY = 200; // milliseconds
+const CLOSE_RETRY_DELAY = 6000; // milliseconds
+const OPEN_RETRY_DELAY = 200; // milliseconds
+const RETRY_BACKOFF = 2;
+
 export class WebsocketClient {
    messageSocket?: WebSocket;
-    retryDelay = 200;
+    retryDelay = MESSAGE_RETRY_DELAY;

    constructor() {
        try {
@ -20,18 +25,20 @@ export class WebsocketClient {
    }

    connect(): void {
-        if (navigator.webdriver) return;
+        if (navigator.webdriver) {
+            return;
+        }
        const wsUrl = `${window.location.protocol.replace("http", "ws")}//${
            window.location.host
        }/ws/client/`;
        this.messageSocket = new WebSocket(wsUrl);
        this.messageSocket.addEventListener("open", () => {
            console.debug(`authentik/ws: connected to ${wsUrl}`);
-            this.retryDelay = 200;
+            this.retryDelay = OPEN_RETRY_DELAY;
        });
        this.messageSocket.addEventListener("close", (e) => {
            console.debug("authentik/ws: closed ws connection", e);
-            if (this.retryDelay > 6000) {
+            if (this.retryDelay > CLOSE_RETRY_DELAY) {
                window.dispatchEvent(
                    new CustomEvent(EVENT_MESSAGE, {
                        bubbles: true,
@ -47,7 +54,7 @@ export class WebsocketClient {
                console.debug(`authentik/ws: reconnecting ws in ${this.retryDelay}ms`);
                this.connect();
            }, this.retryDelay);
-            this.retryDelay = this.retryDelay * 2;
+            this.retryDelay = this.retryDelay * RETRY_BACKOFF;
        });
        this.messageSocket.addEventListener("message", (e) => {
            const data = JSON.parse(e.data);
@ -60,7 +67,7 @@ export class WebsocketClient {
            );
        });
        this.messageSocket.addEventListener("error", () => {
-            this.retryDelay = this.retryDelay * 2;
+            this.retryDelay = this.retryDelay * RETRY_BACKOFF;
        });
    }
 }
--- a/web/packages/common/tsconfig.build.json
+++ b/web/packages/common/tsconfig.build.json
@ -3,6 +3,7 @@
    "compilerOptions": {
        "baseUrl": ".",
        "outDir": "./dist/",
+        "types": ["webauthn"],
        "paths": {
            "@goauthentik/elements/*": ["./src/*"],
            "@goauthentik/locales/*": ["src/locales/*"]