lint

justfile

@@ -21,8 +21,8 @@ yarn *ARGS:
 migrate *ARGS:
     cargo run --all-features -p warpgate-db-migrations -- {{ARGS}}
 
-lint:
-    cd warpgate-web && yarn run lint
+lint *ARGS:
+    cd warpgate-web && yarn run lint {{ARGS}}
 
 svelte-check:
     cd warpgate-web && yarn run check

warpgate-web/.eslintrc.yaml

@@ -138,11 +138,14 @@ rules:
     imports: always-multiline
     exports: always-multiline
     functions: only-multiline
+  '@typescript-eslint/use-unknown-in-catch-callback-variable': off
 
 overrides:
   - files: '*.svelte'
     parser: 'svelte-eslint-parser'
     parserOptions:
+      svelteFeatures:
+        experimentalGenerics: true
       parser:
         ts: '@typescript-eslint/parser'
         js: 'espree'

warpgate-web/package.json

@@ -27,20 +27,21 @@
     "@otplib/plugin-crypto-js": "^12.0.1",
     "@otplib/preset-browser": "^12.0.1",
     "@sveltejs/vite-plugin-svelte": "^3.1.1",
+    "@sveltestrap/sveltestrap": "^6.2.7",
     "@tsconfig/svelte": "^5.0.0",
     "@types/qrcode": "^1.5.0",
     "@types/ua-parser-js": "^0.7.36",
-    "@typescript-eslint/eslint-plugin": "^7.13.0",
-    "@typescript-eslint/parser": "^7.13.0",
+    "@typescript-eslint/eslint-plugin": "^7.17.0",
+    "@typescript-eslint/parser": "^7.17.0",
     "bootstrap": "^5.3.3",
     "copy-text-to-clipboard": "^3.0.1",
     "date-fns": "^3.6.0",
-    "eslint": "^8.57.0",
+    "eslint": "^8",
     "eslint-config-standard": "^17.1.0",
     "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^6.2.0",
+    "eslint-plugin-promise": "^7.0.0",
     "eslint-plugin-svelte": "^2.39.4",
     "format-duration": "^3.0.2",
     "otplib": "^12.0.1",
@@ -51,15 +52,14 @@
     "svelte-fa": "^4.0.2",
     "svelte-intersection-observer": "^1.0.0",
     "svelte-observable": "^0.4.0",
-    "svelte-preprocess": "^5.0.3",
+    "svelte-preprocess": "^6.0.2",
     "svelte-spa-router": "^4.0.1",
-    "@sveltestrap/sveltestrap": "^6.2.7",
     "thenby": "^1.3.4",
     "tslib": "^2.6.3",
     "typescript": "^5.0.0",
     "ua-parser-js": "^1.0.35",
-    "vite": "^5.3.1",
-    "vite-plugin-checker": "^0.6.4",
+    "vite": "^5.3.5",
+    "vite-plugin-checker": "^0.7.2",
     "vite-tsconfig-paths": "^4.3.2",
     "xterm": "^4.18.0",
     "xterm-addon-serialize": "^0.7.0"

warpgate-web/src/admin/AuthPolicyEditor.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
 import { Input } from '@sveltestrap/sveltestrap'
 
-import { CredentialKind, User, UserRequireCredentialsPolicy } from './lib/api'
+import { CredentialKind, type User, type UserRequireCredentialsPolicy } from './lib/api'
 
 export let user: User
 export let value: UserRequireCredentialsPolicy
 export let possibleCredentials: Set<CredentialKind>
-export let protocolId: "http" | "ssh" | "mysql"
+export let protocolId: 'http' | 'ssh' | 'mysql'
 
 const labels = {
     Password: 'Password',
@@ -33,7 +33,7 @@ function updateAny () {
         value[protocolId] = undefined
     } else {
         value[protocolId] = []
-        let oneCred = Array.from(validCredentials).filter(x => possibleCredentials.has(x))[0]
+        let oneCred = Array.from(validCredentials).find(x => possibleCredentials.has(x))
         if (oneCred) {
             value[protocolId] = [oneCred]
         }

warpgate-web/src/admin/Config.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { Observable, from, map } from 'rxjs'
-    import { Role, Target, User, api } from 'admin/lib/api'
-    import ItemList, { LoadOptions, PaginatedResponse } from 'common/ItemList.svelte'
+    import { type Role, type Target, type User, api } from 'admin/lib/api'
+    import ItemList, { type LoadOptions, type PaginatedResponse } from 'common/ItemList.svelte'
     import { link } from 'svelte-spa-router'
 
     function getTargets (options: LoadOptions): Observable<PaginatedResponse<Target>> {
@@ -48,7 +48,6 @@
         </div>
 
         <ItemList load={getTargets} showSearch={true}>
-            <!-- svelte-ignore a11y-missing-attribute -->
             <a
                 slot="item" let:item={target}
                 class="list-group-item list-group-item-action"
@@ -87,7 +86,6 @@
         </div>
 
         <ItemList load={getUsers} showSearch={true}>
-            <!-- svelte-ignore a11y-missing-attribute -->
             <a
                 slot="item" let:item={user}
                 class="list-group-item list-group-item-action"
@@ -110,7 +108,6 @@
         </div>
 
         <ItemList load={getRoles} showSearch={true}>
-            <!-- svelte-ignore a11y-missing-attribute -->
             <a
                 slot="item" let:item={role}
                 class="list-group-item list-group-item-action"

warpgate-web/src/admin/CreateTarget.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { api, TargetOptions, TlsMode } from 'admin/lib/api'
+import { api, type TargetOptions, TlsMode } from 'admin/lib/api'
 import AsyncButton from 'common/AsyncButton.svelte'
 import { replace } from 'svelte-spa-router'
 import { Alert, FormGroup } from '@sveltestrap/sveltestrap'

warpgate-web/src/admin/CreateTicket.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { api, User, Target, TargetOptions, TicketAndSecret } from 'admin/lib/api'
+import { api, type User, type Target, type TicketAndSecret } from 'admin/lib/api'
 import AsyncButton from 'common/AsyncButton.svelte'
 import ConnectionInstructions from 'common/ConnectionInstructions.svelte'
 import { TargetKind } from 'gateway/lib/api'
@@ -68,7 +68,7 @@ async function create () {
         targetName={selectedTarget.name}
         targetKind={TargetKind[selectedTarget.options.kind]}
         username={selectedUser.username}
-        targetExternalHost={selectedTarget.options.kind == "Http" ? selectedTarget.options.externalHost : undefined}
+        targetExternalHost={selectedTarget.options.kind === 'Http' ? selectedTarget.options.externalHost : undefined}
         ticketSecret={result.secret}
     />
     {/if}

warpgate-web/src/admin/Home.svelte

@@ -3,12 +3,12 @@
     import { faCircleDot as iconActive } from '@fortawesome/free-regular-svg-icons'
     import { onDestroy } from 'svelte'
     import { link } from 'svelte-spa-router'
-    import { api, SessionSnapshot } from 'admin/lib/api'
-    import { formatDistance } from 'date-fns';
+    import { api, type SessionSnapshot } from 'admin/lib/api'
+    import { formatDistance } from 'date-fns'
     import { timer, Observable, switchMap, from, combineLatest, fromEvent, merge } from 'rxjs'
     import RelativeDate from './RelativeDate.svelte'
     import AsyncButton from 'common/AsyncButton.svelte'
-    import ItemList, { LoadOptions, PaginatedResponse } from 'common/ItemList.svelte'
+    import ItemList, { type LoadOptions, type PaginatedResponse } from 'common/ItemList.svelte'
     import { Input } from '@sveltestrap/sveltestrap'
     import { autosave } from 'common/autosave'
 

warpgate-web/src/admin/LogViewer.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { api, LogEntry } from 'admin/lib/api'
+import { api, type LogEntry } from 'admin/lib/api'
 import { Alert } from '@sveltestrap/sveltestrap'
 import { firstBy } from 'thenby'
 import IntersectionObserver from 'svelte-intersection-observer'
@@ -31,7 +31,7 @@ function addItems (newItems: LogEntry[]) {
         return
     }
     items ??= []
-    if (items?.[0]?.timestamp > newItems[0].timestamp) {
+    if ((items?.[0]?.timestamp ?? 0) > newItems[0]!.timestamp) {
         items = items.concat(newItems)
     } else {
         items = [

warpgate-web/src/admin/Recording.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { api, Recording } from 'admin/lib/api'
+import { api, type Recording } from 'admin/lib/api'
 import { Alert } from '@sveltestrap/sveltestrap'
 import TerminalRecordingPlayer from 'admin/player/TerminalRecordingPlayer.svelte'
 import DelayedSpinner from 'common/DelayedSpinner.svelte'

warpgate-web/src/admin/Role.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { api, Role } from 'admin/lib/api'
+import { api, type Role } from 'admin/lib/api'
 import AsyncButton from 'common/AsyncButton.svelte'
 import DelayedSpinner from 'common/DelayedSpinner.svelte'
 import { replace } from 'svelte-spa-router'

warpgate-web/src/admin/SSH.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { api, SSHKey, SSHKnownHost } from 'admin/lib/api'
+import { api, type SSHKey, type SSHKnownHost } from 'admin/lib/api'
 import CopyButton from 'common/CopyButton.svelte'
 import { Alert } from '@sveltestrap/sveltestrap'
 

warpgate-web/src/admin/Session.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-import { api, SessionSnapshot, Recording, TargetSSHOptions, TargetHTTPOptions, TargetMySqlOptions } from 'admin/lib/api'
+import { api, type SessionSnapshot, type Recording, type TargetSSHOptions, type TargetHTTPOptions, type TargetMySqlOptions } from 'admin/lib/api'
 import { timeAgo } from 'admin/lib/time'
 import AsyncButton from 'common/AsyncButton.svelte'
 import DelayedSpinner from 'common/DelayedSpinner.svelte'
-import { formatDistance, formatDistanceToNow } from 'date-fns';
+import { formatDistance, formatDistanceToNow } from 'date-fns'
 import { onDestroy } from 'svelte'
 import { link } from 'svelte-spa-router'
 import { Alert } from '@sveltestrap/sveltestrap'

warpgate-web/src/admin/Target.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 import { faExternalLink } from '@fortawesome/free-solid-svg-icons'
-import { api, Role, Target, User } from 'admin/lib/api'
+import { api, type Role, type Target, type User } from 'admin/lib/api'
 import AsyncButton from 'common/AsyncButton.svelte'
 import ConnectionInstructions from 'common/ConnectionInstructions.svelte'
 import DelayedSpinner from 'common/DelayedSpinner.svelte'
@@ -17,7 +17,7 @@ let error: Error|undefined
 let selectedUser: User|undefined
 let target: Target
 let allRoles: Role[] = []
-let roleIsAllowed: { [id: string] : any; } = {}
+let roleIsAllowed: Record<string, any> = {}
 
 async function load () {
     try {
@@ -110,8 +110,8 @@ async function toggleRole (role: Role) {
                     {/each}
                 </select>
             </FormGroup>
-        {:catch error}
-            <Alert color="danger">{error}</Alert>
+        {:catch _error}
+            <Alert color="danger">{_error}</Alert>
         {/await}
     {/if}
 
@@ -124,7 +124,7 @@ async function toggleRole (role: Role) {
             Http: TargetKind.Http,
             MySql: TargetKind.MySql,
         }[target.options.kind ?? '']}
-        targetExternalHost={target.options.kind == "Http" ? target.options.externalHost : undefined}
+        targetExternalHost={target.options.kind === 'Http' ? target.options.externalHost : undefined}
     />
 
     <h4 class="mt-4">Configuration</h4>
@@ -234,16 +234,18 @@ async function toggleRole (role: Role) {
     {#await loadRoles() then}
         <div class="list-group list-group-flush mb-3">
             {#each allRoles as role}
-                <div
+                <label
+                    for="role-{role.id}"
                     class="list-group-item list-group-item-action d-flex align-items-center"
-                    on:click={() => toggleRole(role)}
                 >
                     <Input
+                        id="role-{role.id}"
                         class="mb-0 me-2"
                         type="switch"
+                        on:click={() => toggleRole(role)}
                         checked={roleIsAllowed[role.id]} />
                     <div>{role.name}</div>
-                </div>
+                </label>
             {/each}
         </div>
     {/await}

warpgate-web/src/admin/Tickets.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { api, Ticket } from 'admin/lib/api'
+import { api, type Ticket } from 'admin/lib/api'
 import { link } from 'svelte-spa-router'
 import { Alert } from '@sveltestrap/sveltestrap'
 import RelativeDate from './RelativeDate.svelte'

warpgate-web/src/admin/TlsConfiguration.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { Tls, TlsMode } from 'admin/lib/api'
+import { type Tls, TlsMode } from 'admin/lib/api'
 import { FormGroup, Input } from '@sveltestrap/sveltestrap'
 
 export let value: Tls

warpgate-web/src/admin/User.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 import { faIdBadge, faKey, faKeyboard, faMobileScreen } from '@fortawesome/free-solid-svg-icons'
-import { api, CredentialKind, Role, User, UserAuthCredential, UserRequireCredentialsPolicy } from 'admin/lib/api'
+import { api, CredentialKind, type Role, type User, type UserAuthCredential, type UserRequireCredentialsPolicy } from 'admin/lib/api'
 import AsyncButton from 'common/AsyncButton.svelte'
 import DelayedSpinner from 'common/DelayedSpinner.svelte'
 import Fa from 'svelte-fa'
@@ -16,9 +16,9 @@ let user: User
 let editingCredential: UserAuthCredential|undefined
 let policy: UserRequireCredentialsPolicy
 let allRoles: Role[] = []
-let roleIsAllowed: { [id: string] : any; } = {}
+let roleIsAllowed: Record<string, any> = {}
 
-const policyProtocols: {id: 'ssh' | 'http' | 'mysql', name: string}[] = [
+const policyProtocols: { id: 'ssh' | 'http' | 'mysql', name: string }[] = [
     { id: 'ssh', name: 'SSH' },
     { id: 'http', name: 'HTTP' },
     { id: 'mysql', name: 'MySQL' },
@@ -100,7 +100,7 @@ function saveCredential () {
                     editingCredential.kind === CredentialKind.Totp
                     && !user.credentialPolicy?.[protocol]
                     && user.credentials.some(x => x.kind === ck)
-                    && possibleCredentials[protocol].has(ck)
+                    && possibleCredentials[protocol]?.has(ck)
                 ) {
                     user.credentialPolicy = {
                         ...user.credentialPolicy ?? {},
@@ -114,6 +114,12 @@ function saveCredential () {
     editingCredential = undefined
 }
 
+function assertDefined<T>(value: T|undefined): T {
+    if (value === undefined) {
+        throw new Error('Value is undefined')
+    }
+    return value
+}
 </script>
 
 {#await load()}
@@ -202,29 +208,34 @@ function saveCredential () {
                 <div>
                     <strong>{protocol.name}</strong>
                 </div>
-                <AuthPolicyEditor
-                    user={user}
-                    bind:value={policy}
-                    possibleCredentials={possibleCredentials[protocol.id]}
-                    protocolId={protocol.id}
-                />
+                {#if possibleCredentials[protocol.id]}
+                    {@const _possibleCredentials = assertDefined(possibleCredentials[protocol.id])}
+                    <AuthPolicyEditor
+                        user={user}
+                        bind:value={policy}
+                        possibleCredentials={_possibleCredentials}
+                        protocolId={protocol.id}
+                    />
+                {/if}
             </div>
         {/each}
     </div>
 
     <h4 class="mt-4">User roles</h4>
     <div class="list-group list-group-flush mb-3">
         {#each allRoles as role}
-            <div
+            <label
+                for="role-{role.id}"
                 class="list-group-item list-group-item-action d-flex align-items-center"
-                on:click={() => toggleRole(role)}
             >
                 <Input
+                    id="role-{role.id}"
                     class="mb-0 me-2"
                     type="switch"
+                    on:click={() => toggleRole(role)}
                     checked={roleIsAllowed[role.id]} />
                 <div>{role.name}</div>
-            </div>
+            </label>
         {/each}
     </div>
 

warpgate-web/src/admin/UserCredentialModal.svelte

@@ -2,7 +2,7 @@
 import { onMount } from 'svelte'
 import { Alert, Button, FormGroup, Input, Modal, ModalBody, ModalFooter, ModalHeader } from '@sveltestrap/sveltestrap'
 import QRCode from 'qrcode'
-import { TOTP, TOTPOptions } from '@otplib/core'
+import { TOTP, type TOTPOptions } from '@otplib/core'
 import { createDigest } from '@otplib/plugin-crypto-js'
 import { faRefresh } from '@fortawesome/free-solid-svg-icons'
 import Fa from 'svelte-fa'