Add eslint to auth UI.

2026-05-12 12:28:50 -05:00 · 2025-03-01 23:56:16 +01:00
parent 0bf3cea86f
commit 673b32622f
17 changed files with 220 additions and 55 deletions
@@ -59,7 +59,7 @@ importers:
        version: 3.2.1
      '@astrojs/solid-js':
        specifier: ^5.0.4
-        version: 5.0.4(@testing-library/jest-dom@6.6.3)(@types/node@22.13.5)(jiti@2.4.2)(lightningcss@1.29.1)(solid-devtools@0.30.1(solid-js@1.9.5)(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(lightningcss@1.29.1)(yaml@2.7.0)))(solid-js@1.9.5)(yaml@2.7.0)
+        version: 5.0.4(@testing-library/jest-dom@6.6.3)(@types/node@22.13.5)(jiti@2.4.2)(lightningcss@1.29.1)(solid-devtools@0.30.1(solid-js@1.9.5)(vite@5.4.14(@types/node@22.13.5)(lightningcss@1.29.1)))(solid-js@1.9.5)(yaml@2.7.0)
      astro-robots-txt:
        specifier: ^1.0.0
        version: 1.0.0
@@ -473,7 +473,7 @@ importers:
        version: 0.9.4(prettier-plugin-astro@0.14.1)(prettier@3.5.2)(typescript@5.7.3)
      '@astrojs/solid-js':
        specifier: ^5.0.4
-        version: 5.0.4(@testing-library/jest-dom@6.6.3)(@types/node@22.13.5)(jiti@2.4.2)(lightningcss@1.29.1)(solid-devtools@0.30.1(solid-js@1.9.5)(vite@5.4.14(@types/node@22.13.5)(lightningcss@1.29.1)))(solid-js@1.9.5)(yaml@2.7.0)
+        version: 5.0.4(@testing-library/jest-dom@6.6.3)(@types/node@22.13.5)(jiti@2.4.2)(lightningcss@1.29.1)(solid-devtools@0.30.1(solid-js@1.9.5)(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(lightningcss@1.29.1)(yaml@2.7.0)))(solid-js@1.9.5)(yaml@2.7.0)
      '@astrojs/tailwind':
        specifier: ^5.1.5
        version: 5.1.5(astro@5.3.1(@types/node@22.13.5)(jiti@2.4.2)(lightningcss@1.29.1)(rollup@4.34.8)(typescript@5.7.3)(yaml@2.7.0))(tailwindcss@3.4.17(ts-node@10.9.2(@types/node@22.13.5)(typescript@5.7.3)))(ts-node@10.9.2(@types/node@22.13.5)(typescript@5.7.3))
@@ -508,18 +508,39 @@ importers:
        specifier: ^0.3.0
        version: 0.3.0
    devDependencies:
+      '@eslint/js':
+        specifier: ^9.21.0
+        version: 9.21.0
      '@iconify-json/tabler':
        specifier: ^1.2.16
        version: 1.2.16
      '@tailwindcss/typography':
        specifier: ^0.5.16
        version: 0.5.16(tailwindcss@3.4.17(ts-node@10.9.2(@types/node@22.13.5)(typescript@5.7.3)))
+      eslint:
+        specifier: ^9.21.0
+        version: 9.21.0(jiti@2.4.2)
+      eslint-plugin-astro:
+        specifier: ^1.3.1
+        version: 1.3.1(eslint@9.21.0(jiti@2.4.2))
+      eslint-plugin-solid:
+        specifier: ^0.14.5
+        version: 0.14.5(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)
+      eslint-plugin-tailwindcss:
+        specifier: ^3.18.0
+        version: 3.18.0(tailwindcss@3.4.17(ts-node@10.9.2(@types/node@22.13.5)(typescript@5.7.3)))
+      globals:
+        specifier: ^15.15.0
+        version: 15.15.0
      prettier:
        specifier: ^3.5.2
        version: 3.5.2
      prettier-plugin-astro:
        specifier: ^0.14.1
        version: 0.14.1
+      prettier-plugin-tailwindcss:
+        specifier: ^0.6.11
+        version: 0.6.11(prettier-plugin-astro@0.14.1)(prettier@3.5.2)
      sharp:
        specifier: ^0.33.5
        version: 0.33.5
@@ -529,6 +550,9 @@ importers:
      typescript:
        specifier: ^5.7.3
        version: 5.7.3
+      typescript-eslint:
+        specifier: ^8.25.0
+        version: 8.25.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)

  trailbase-core/js/client:
    dependencies:
@@ -1645,6 +1669,10 @@ packages:
    resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
    engines: {node: '>=14'}

+  '@pkgr/core@0.1.1':
+    resolution: {integrity: sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA==}
+    engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
+
  '@polka/url@1.0.0-next.28':
    resolution: {integrity: sha512-8LduaNlMZGwdZ6qWrKlfa+2M4gahzFkprZiAt2TF8uS0qQgBizKXpXURqvTJ4WtmupWxaLqjRb2UCTe72mu+Aw==}

@@ -2353,6 +2381,10 @@ packages:
    resolution: {integrity: sha512-LElXdjswlqjWrPpJFg1Fx4wpkOCxj1TDHlSV4PlaRxHGWko024xICaa97ZkMfs6DRKlCguiAI+rbXv5GWwXIkg==}
    hasBin: true

+  astro-eslint-parser@1.2.1:
+    resolution: {integrity: sha512-3oqANMjrvJ+IE5pwlUWsH/4UztmYf/GTL0HPUkWnYBNAHiGVGrOh2EbegxS5niAwlO0w9dRYk0CkCPlJcu8c3Q==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
  astro-expressive-code@0.40.2:
    resolution: {integrity: sha512-yJMQId0yXSAbW9I6yqvJ3FcjKzJ8zRL7elbJbllkv1ZJPlsI0NI83Pxn1YL1IapEM347EvOOkSW2GL+2+NO61w==}
    peerDependencies:
@@ -2369,6 +2401,12 @@ packages:
    engines: {node: ^18.17.1 || ^20.3.0 || >=22.0.0, npm: '>=9.6.5', pnpm: '>=7.1.0'}
    hasBin: true

+  astrojs-compiler-sync@1.0.1:
+    resolution: {integrity: sha512-EdJILVkc/Iiw9sLMyb2uppp/vG7YL9TgkwaEumNDflI8s0AhR5XuCFkdbA/AcCGvcBfsRH9ngy/iIP8Uybl82g==}
+    engines: {node: ^18.18.0 || >=20.9.0}
+    peerDependencies:
+      '@astrojs/compiler': '>=0.27.0'
+
  asynckit@0.4.0:
    resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}

@@ -2906,6 +2944,10 @@ packages:
    resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
    engines: {node: '>=0.12'}

+  entities@6.0.0:
+    resolution: {integrity: sha512-aKstq2TDOndCn4diEyp9Uq/Flu2i1GlLkc6XIDQSDMuaFE3OPW5OphLCyQ5SpSJZTb4reN+kTcYru5yIfXoRPw==}
+    engines: {node: '>=0.12'}
+
  es-define-property@1.0.1:
    resolution: {integrity: sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==}
    engines: {node: '>= 0.4'}
@@ -2961,6 +3003,18 @@ packages:
    resolution: {integrity: sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==}
    engines: {node: '>=12'}

+  eslint-compat-utils@0.6.4:
+    resolution: {integrity: sha512-/u+GQt8NMfXO8w17QendT4gvO5acfxQsAKirAt0LVxDnr2N8YLCVbregaNc/Yhp7NM128DwCaRvr8PLDfeNkQw==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      eslint: '>=6.0.0'
+
+  eslint-plugin-astro@1.3.1:
+    resolution: {integrity: sha512-2XaLCMQm8htW1UvJvy1Zcmg8l0ziskitiUfJTn/w1Mk7r4Mxj0fZeNpN6UTNrm64XBIXSa5h8UCGrg8mdu47+g==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: '>=8.57.0'
+
  eslint-plugin-react-hooks@5.1.0:
    resolution: {integrity: sha512-mpJRtPgHN2tNAvZ35AMfqeB3Xqeo273QxrHJsbBEPWODRM4r0yB6jfoROqKEYrOn27UtRPpcpHc2UqyBSuUNTw==}
    engines: {node: '>=10'}
@@ -4371,6 +4425,10 @@ packages:
    resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==}
    engines: {node: '>=4'}

+  postcss-selector-parser@7.1.0:
+    resolution: {integrity: sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==}
+    engines: {node: '>=4'}
+
  postcss-value-parser@4.2.0:
    resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}

@@ -4969,6 +5027,10 @@ packages:
  symbol-tree@3.2.4:
    resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}

+  synckit@0.9.2:
+    resolution: {integrity: sha512-vrozgXDQwYO72vHjUb/HnFbQx1exDjoKzqx23aXEg2a9VIg2TSFZ8FmeZpTjUCFMYw7mpX4BE2SFu8wI7asYsw==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+
  table-layout@4.1.1:
    resolution: {integrity: sha512-iK5/YhZxq5GO5z8wb0bY1317uDF3Zjpha0QFFLA8/trAoiLbQD0HUbMesEaxyzUgDxi2QlcbM8IvqOlEjgoXBA==}
    engines: {node: '>=12.17'}
@@ -6845,6 +6907,8 @@ snapshots:
  '@pkgjs/parseargs@0.11.0':
    optional: true

+  '@pkgr/core@0.1.1': {}
+
  '@polka/url@1.0.0-next.28': {}

  '@protobufjs/aspromise@1.1.2': {}
@@ -7639,6 +7703,23 @@ snapshots:

  astring@1.9.0: {}

+  astro-eslint-parser@1.2.1:
+    dependencies:
+      '@astrojs/compiler': 2.10.4
+      '@typescript-eslint/scope-manager': 8.25.0
+      '@typescript-eslint/types': 8.25.0
+      astrojs-compiler-sync: 1.0.1(@astrojs/compiler@2.10.4)
+      debug: 4.4.0
+      entities: 6.0.0
+      eslint-scope: 8.2.0
+      eslint-visitor-keys: 4.2.0
+      espree: 10.3.0
+      fast-glob: 3.3.3
+      is-glob: 4.0.3
+      semver: 7.7.1
+    transitivePeerDependencies:
+      - supports-color
+
  astro-expressive-code@0.40.2(astro@5.3.1(@types/node@22.13.5)(jiti@2.4.2)(lightningcss@1.29.1)(rollup@4.34.8)(typescript@5.7.3)(yaml@2.7.0)):
    dependencies:
      astro: 5.3.1(@types/node@22.13.5)(jiti@2.4.2)(lightningcss@1.29.1)(rollup@4.34.8)(typescript@5.7.3)(yaml@2.7.0)
@@ -7852,6 +7933,11 @@ snapshots:
      - uploadthing
      - yaml

+  astrojs-compiler-sync@1.0.1(@astrojs/compiler@2.10.4):
+    dependencies:
+      '@astrojs/compiler': 2.10.4
+      synckit: 0.9.2
+
  asynckit@0.4.0: {}

  autoprefixer@10.4.20(postcss@8.5.3):
@@ -8380,6 +8466,8 @@ snapshots:

  entities@4.5.0: {}

+  entities@6.0.0: {}
+
  es-define-property@1.0.1: {}

  es-errors@1.3.0: {}
@@ -8502,6 +8590,25 @@ snapshots:

  escape-string-regexp@5.0.0: {}

+  eslint-compat-utils@0.6.4(eslint@9.21.0(jiti@2.4.2)):
+    dependencies:
+      eslint: 9.21.0(jiti@2.4.2)
+      semver: 7.7.1
+
+  eslint-plugin-astro@1.3.1(eslint@9.21.0(jiti@2.4.2)):
+    dependencies:
+      '@eslint-community/eslint-utils': 4.4.1(eslint@9.21.0(jiti@2.4.2))
+      '@jridgewell/sourcemap-codec': 1.5.0
+      '@typescript-eslint/types': 8.25.0
+      astro-eslint-parser: 1.2.1
+      eslint: 9.21.0(jiti@2.4.2)
+      eslint-compat-utils: 0.6.4(eslint@9.21.0(jiti@2.4.2))
+      globals: 15.15.0
+      postcss: 8.5.3
+      postcss-selector-parser: 7.1.0
+    transitivePeerDependencies:
+      - supports-color
+
  eslint-plugin-react-hooks@5.1.0(eslint@9.21.0(jiti@2.4.2)):
    dependencies:
      eslint: 9.21.0(jiti@2.4.2)
@@ -10303,6 +10410,11 @@ snapshots:
      cssesc: 3.0.0
      util-deprecate: 1.0.2

+  postcss-selector-parser@7.1.0:
+    dependencies:
+      cssesc: 3.0.0
+      util-deprecate: 1.0.2
+
  postcss-value-parser@4.2.0: {}

  postcss@8.5.3:
@@ -11095,6 +11207,11 @@ snapshots:

  symbol-tree@3.2.4: {}

+  synckit@0.9.2:
+    dependencies:
+      '@pkgr/core': 0.1.1
+      tslib: 2.8.1
+
  table-layout@4.1.1:
    dependencies:
      array-back: 6.2.2
@@ -1,12 +1,12 @@
 // .prettierrc.mjs
 /** @type {import("prettier").Config} */
 export default {
-  plugins: ['prettier-plugin-astro'],
+  plugins: ["prettier-plugin-astro", "prettier-plugin-tailwindcss"],
  overrides: [
    {
-      files: '*.astro',
+      files: "*.astro",
      options: {
-        parser: 'astro',
+        parser: "astro",
      },
    },
  ],
@@ -1,4 +1,4 @@
-import { defineConfig } from 'astro/config';
+import { defineConfig } from "astro/config";

 import solidJs from "@astrojs/solid-js";
 import icon from "astro-icon";
@@ -0,0 +1,43 @@
+import globals from "globals";
+import pluginJs from "@eslint/js";
+import tseslint from "typescript-eslint";
+import tailwind from "eslint-plugin-tailwindcss";
+import solid from "eslint-plugin-solid/configs/recommended";
+import astro from "eslint-plugin-astro";
+
+export default [
+  pluginJs.configs.recommended,
+  ...tseslint.configs.recommended,
+  solid,
+  ...tailwind.configs["flat/recommended"],
+  ...astro.configs.recommended,
+  {
+    ignores: ["dist/", "node_modules/", ".astro/", "src/env.d.ts"],
+  },
+  {
+    files: ["**/*.{js,mjs,cjs,mts,ts,tsx,jsx,astro}"],
+    rules: {
+      // https://typescript-eslint.io/rules/no-explicit-any/
+      "@typescript-eslint/no-explicit-any": "warn",
+      "@typescript-eslint/no-wrapper-object-types": "warn",
+      // http://eslint.org/docs/rules/no-unused-vars
+      "@typescript-eslint/no-unused-vars": [
+        "error",
+        {
+          vars: "all",
+          args: "after-used",
+          argsIgnorePattern: "^_",
+          varsIgnorePattern: "^_",
+        },
+      ],
+      // Collides with astro, we'd have to configure the solid plugin to ignore astro files.
+      "solid/no-unknown-namespaces": "off",
+    },
+    languageOptions: { globals: globals.browser },
+    settings: {
+      tailwindcss: {
+        whitelist: ["hide-scrollbars", "collapsible.*"],
+      },
+    },
+  },
+];
@@ -8,8 +8,8 @@
    "build": "astro check && astro build",
    "preview": "astro preview",
    "astro": "astro",
-    "check": "astro check",
-    "format": "prettier -w src"
+    "check": "astro check && eslint",
+    "format": "prettier -w ."
  },
  "dependencies": {
    "@astrojs/check": "^0.9.4",
@@ -27,12 +27,20 @@
    "trailbase": "^0.3.0"
  },
  "devDependencies": {
+    "@eslint/js": "^9.21.0",
    "@iconify-json/tabler": "^1.2.16",
    "@tailwindcss/typography": "^0.5.16",
+    "eslint": "^9.21.0",
+    "eslint-plugin-astro": "^1.3.1",
+    "eslint-plugin-solid": "^0.14.5",
+    "eslint-plugin-tailwindcss": "^3.18.0",
+    "globals": "^15.15.0",
    "prettier": "^3.5.2",
    "prettier-plugin-astro": "^0.14.1",
+    "prettier-plugin-tailwindcss": "^0.6.11",
    "sharp": "^0.33.5",
    "tailwindcss": "^3.4.17",
-    "typescript": "^5.7.3"
+    "typescript": "^5.7.3",
+    "typescript-eslint": "^8.25.0"
  }
 }
@@ -11,10 +11,10 @@ const { title } = Astro.props;
 ---

 <BaseLayout title={title}>
-  <div class="h-dvh w-screen flex flex-col items-center justify-center mx-auto">
+  <div class="mx-auto flex h-dvh w-screen flex-col items-center justify-center">
    <Card>
      <div class="w-full">
-        <h1 class="font-strong text-3xl">{title}</h1>
+        <h1 class="text-3xl">{title}</h1>
      </div>

      <slot />
@@ -18,7 +18,7 @@ async function listConfiguredOAuthProviders(): Promise<ConfiguredOAuthProvidersR
 }

 export function ConfiguredOAuthProviders() {
-  let [providersFetch] = createResource(listConfiguredOAuthProviders);
+  const [providersFetch] = createResource(listConfiguredOAuthProviders);

  const providers = () => {
    const providers = [...(providersFetch()?.providers ?? [])];
@@ -31,14 +31,14 @@ export function ConfiguredOAuthProviders() {
  return (
    <ErrorBoundary fallback={(err, _reset) => <h2>OAuth: {err.toString()}</h2>}>
      <Suspense fallback={<div>Loading...</div>}>
-        <div class="flex flex-col w-full gap-4 items-start">
+        <div class="flex w-full flex-col items-start gap-4">
          {providers().length > 0 && <p>Or use an external provider:</p>}

          <For each={providers()}>
            {([name, displayName]) => {
              return (
                <a
-                  class="w-full p-2 rounded-lg border border-gray-300/20 hover:bg-black/10 dark:hover:bg-black/20 flex flex-row items-center gap-4"
+                  class="flex w-full flex-row items-center gap-4 rounded-lg border border-gray-300/20 p-2 hover:bg-black/10 dark:hover:bg-black/20"
                  href={`${AUTH_API}/oauth/${name}/login`}
                >
                  <span>Login with {displayName}</span>
@@ -50,11 +50,13 @@ function DeleteAccountButton(props: { client: Client }) {

          <Button
            variant="destructive"
-            onClick={async () => {
-              await props.client.deleteUser();
-              setOpen(false);
-              window.location.replace("/_/auth/login");
-            }}
+            onClick={() =>
+              (async () => {
+                await props.client.deleteUser();
+                setOpen(false);
+                window.location.replace("/_/auth/login");
+              })().catch(console.error)
+            }
          >
            Delete
          </Button>
@@ -173,7 +175,7 @@ function Avatar(props: { avatarUrl?: () => string | undefined }) {
        }}
      />

-      <button class="p-2 bg-gray-200" onClick={openFileDialog}>
+      <button class="bg-gray-200 p-2" onClick={openFileDialog}>
        <AvatarImage />
      </button>

@@ -192,11 +194,11 @@ function ProfileTable(props: {
  const user = () => props.user;

  return (
-    <Card class="p-8 w-[80dvw] max-w-[460px]">
-      <div class="flex justify-between items-center">
+    <Card class="w-[80dvw] max-w-[460px] p-8">
+      <div class="flex items-center justify-between">
        <h1>User Profile</h1>

-        <div class="flex gap-2 items-center">
+        <div class="flex items-center gap-2">
          <DeleteAccountButton client={props.client} />

          <a class={ICON_STYLE.join(" ")} href="/_/auth/logout">
@@ -205,17 +207,17 @@ function ProfileTable(props: {
        </div>
      </div>

-      <div class="w-full flex gap-4 items-center">
+      <div class="flex w-full items-center gap-4">
        <Avatar avatarUrl={props.avatarUrl} />

-        <div class="flex flex-col gap-2 justif">
+        <div class="flex flex-col gap-2">
          <strong>{user().email}</strong>

          <div>Id: {user().id}</div>
        </div>
      </div>

-      <div class="flex gap-2 my-4 items-end">
+      <div class="my-4 flex items-end gap-2">
        <a class={OUTLINE_BUTTON_STYLE.join(" ")} href="/_/auth/change_email">
          Change E-Mail
        </a>
@@ -16,10 +16,10 @@ const toastVariants = cva(
      variant: {
        default: "border bg-background text-foreground",
        destructive:
-          "destructive group border-destructive bg-destructive text-destructive-foreground",
-        success: "success border-success-foreground bg-success text-success-foreground",
-        warning: "warning border-warning-foreground bg-warning text-warning-foreground",
-        error: "error border-error-foreground bg-error text-error-foreground"
+          "group border-destructive bg-destructive text-destructive-foreground",
+        success: "border-success-foreground bg-success text-success-foreground",
+        warning: "border-warning-foreground bg-warning text-warning-foreground",
+        error: "border-error-foreground bg-error text-error-foreground"
      }
    },
    defaultVariants: {
@@ -20,8 +20,8 @@ const profilePageUrl = `${base}/profile`;
    </div>

    <div
-      class="grid grid-cols-2 items-center gap-4 my-4"
-      style="grid-template-columns: auto 1fr"
+      class="my-4 grid grid-cols-2 items-center gap-4"
+      style={{ "grid-template-columns": "auto 1fr" }}
    >
      <label>Old E-Mail:</label>
      <input
@@ -43,7 +43,7 @@ const profilePageUrl = `${base}/profile`;
    </div>
  </form>

-  <div class="w-full flex justify-between">
+  <div class="flex w-full justify-between">
    <a class:list={BUTTON_STYLE} href={profilePageUrl}>Back</a>

    <button class:list={BUTTON_STYLE} type="submit"
@@ -20,8 +20,8 @@ const profilePageUrl = `${base}/profile`;
    </div>

    <div
-      class="grid grid-cols-2 items-center gap-4 my-4"
-      style="grid-template-columns: auto 1fr"
+      class="my-4 grid grid-cols-2 items-center gap-4"
+      style={{ "grid-template-columns": "auto 1fr" }}
    >
      <label>Old Password:</label>
      <input
@@ -51,7 +51,7 @@ const profilePageUrl = `${base}/profile`;
      />
    </div>

-    <div class="w-full flex justify-between">
+    <div class="flex w-full justify-between">
      <a class:list={BUTTON_STYLE} href={profilePageUrl}>Back</a>

      <button class:list={BUTTON_STYLE} type="submit">Change</button>
@@ -22,8 +22,8 @@ const formBaseAction = `${AUTH_API}/login`;
      </div>

      <div
-        class="grid grid-cols-2 items-center gap-4 my-4"
-        style="grid-template-columns: auto 1fr"
+        class="my-4 grid grid-cols-2 items-center gap-4"
+        style={{"grid-template-columns": "auto 1fr"}}
      >
        <label>User:</label>
        <input
@@ -59,7 +59,7 @@ const formBaseAction = `${AUTH_API}/login`;
      <ConfiguredOAuthProviders client:only="solid-js" />
    </div>

-    <div class="flex justify-center mt-4">
+    <div class="mt-4 flex justify-center">
      <a href={`${import.meta.env.BASE_URL}/reset_password/request`}>reset password</a>
    </div>
  </div>
@@ -5,7 +5,7 @@ import { Profile as ProfileTsx } from "@/components/Profile";

 <BaseLayout>
  <div
-    class="h-dvh w-screen flex flex-col items-center justify-center gap-4 mx-auto"
+    class="mx-auto flex h-dvh w-screen flex-col items-center justify-center gap-4"
  >
    <ProfileTsx client:only="solid-js" />
  </div>
@@ -10,7 +10,6 @@ import { AUTH_API, INPUT_STYLE, BUTTON_STYLE } from "@/lib/constants";
    class="flex flex-col gap-2"
    action={`${AUTH_API}/register`}
    method="post"
-    ,
    enctype="application/x-www-form-urlencoded"
  >
    <div class="hidden">
@@ -18,8 +17,8 @@ import { AUTH_API, INPUT_STYLE, BUTTON_STYLE } from "@/lib/constants";
    </div>

    <div
-      class="grid grid-cols-2 items-center gap-4 my-4"
-      style="grid-template-columns: auto 1fr"
+      class="my-4 grid grid-cols-2 items-center gap-4"
+      style={{ "grid-template-columns": "auto 1fr" }}
    >
      <label>E-mail:</label>
      <input
@@ -49,7 +48,7 @@ import { AUTH_API, INPUT_STYLE, BUTTON_STYLE } from "@/lib/constants";
      />
    </div>

-    <div class="w-full flex justify-between">
+    <div class="flex w-full justify-between">
      <a class:list={BUTTON_STYLE} href={`${import.meta.env.BASE_URL}/login`}>
        Back
      </a>
@@ -20,8 +20,8 @@ const loginPageUrl = `${base}/login`;
    </div>

    <div
-      class="grid grid-cols-2 items-center gap-4 my-4"
-      style="grid-template-columns: auto 1fr"
+      class="my-4 grid grid-cols-2 items-center gap-4"
+      style={{ "grid-template-columns": "auto 1fr" }}
    >
      <label>E-mail:</label>
      <input
@@ -33,7 +33,7 @@ const loginPageUrl = `${base}/login`;
      />
    </div>

-    <div class="w-full flex justify-between">
+    <div class="flex w-full justify-between">
      <a class:list={BUTTON_STYLE} href={loginPageUrl}>Back</a>

      <button class:list={BUTTON_STYLE} type="submit"> Send E-mail </button>
@@ -20,8 +20,8 @@ const loginPageUrl = `${base}/login`;
    </div>

    <div
-      class="grid grid-cols-2 items-center gap-4 my-4"
-      style="grid-template-columns: auto 1fr"
+      class="my-4 grid grid-cols-2 items-center gap-4"
+      style={{ "grid-template-columns": "auto 1fr" }}
    >
      <label>Password:</label>
      <input
@@ -42,7 +42,7 @@ const loginPageUrl = `${base}/login`;
      />
    </div>

-    <div class="w-full flex justify-between">
+    <div class="flex w-full justify-between">
      <a class:list={BUTTON_STYLE} href={loginPageUrl}>Back</a>

      <button class:list={BUTTON_STYLE} type="submit"> Update Password </button>
@@ -10,9 +10,5 @@
      "@styles/*": ["../styles/*"]
    }
  },
-  "exclude": [
-    "dist",
-    "node_modules",
-    "public"
-  ]
+  "exclude": ["dist", "node_modules", "public"]
 }