Fix type errors

packages/sshecret-admin/src/sshecret_admin/api/endpoints/auth.py

@@ -189,7 +189,9 @@ def create_router(dependencies: AdminDependencies) -> APIRouter:
         )
 
         path = f"/auth_cb#access_token={access_token}&refresh_token={refresh_token}"
-        callback_url = os.path.join(dependencies.settings.frontend_url, path)
+        callback_url = os.path.join("admin", path)
+        if dependencies.settings.frontend_test_url:
+            callback_url = os.path.join(dependencies.settings.frontend_test_url, path)
         origin = "UNKNOWN"
         if request.client:
             origin = request.client.host

packages/sshecret-admin/src/sshecret_admin/core/app.py

@@ -4,12 +4,14 @@
 #
 from collections.abc import AsyncGenerator
 import logging
+import pathlib
 from contextlib import asynccontextmanager
 
 from fastapi import FastAPI, Request, status
 from fastapi.encoders import jsonable_encoder
 from fastapi.exceptions import RequestValidationError
 from fastapi.responses import JSONResponse
+from fastapi.staticfiles import StaticFiles
 from fastapi.middleware.cors import CORSMiddleware
 
 from sqlalchemy.ext.asyncio import AsyncSession
@@ -29,6 +31,28 @@ from .settings import AdminServerSettings
 LOG = logging.getLogger(__name__)
 
 
+def valid_frontend_directory(frontend_dir: pathlib.Path) -> bool:
+    """Validate frontend dir."""
+    if not frontend_dir.exists():
+        return False
+    if not frontend_dir.is_dir():
+        return False
+    if (frontend_dir / "index.html").exists():
+        return True
+    return False
+
+
+def setup_frontend(app: FastAPI, settings: AdminServerSettings) -> None:
+    """Setup frontend."""
+    if not settings.frontend_dir:
+        return
+    if not valid_frontend_directory(settings.frontend_dir):
+        LOG.error("Error: Not a valid frontend directory: %s", settings.frontend_dir)
+        return
+    frontend = StaticFiles(directory=settings.frontend_dir)
+    app.mount("/admin", frontend, name="frontend")
+
+
 def create_admin_app(
     settings: AdminServerSettings,
     create_db: bool = False,
@@ -104,5 +128,6 @@ def create_admin_app(
     dependencies = BaseDependencies(settings, get_db_session, get_async_session)
 
     app.include_router(api.create_api_router(dependencies))
+    setup_frontend(app, settings)
 
     return app

packages/sshecret-admin/src/sshecret_admin/core/settings.py

@@ -40,7 +40,8 @@ class AdminServerSettings(BaseSettings):
     password_manager_directory: Path | None = None
     oidc: OidcSettings | None = None
     frontend_origin: str = Field(default="*")
-    frontend_url: str
+    frontend_test_url: str | None = Field(default=None)
+    frontend_dir: Path | None = None
 
     @property
     def admin_db(self) -> URL:

packages/sshecret-frontend/src/api/validation.ts

@@ -1,9 +1,12 @@
 import type { Ref } from 'vue'
-import  SlInput  from '@shoelace-style/shoelace/dist/components/input/input.js'
+//import SlInput from '@shoelace-style/shoelace/dist/components/input/input.js'
 
 
-export function setFieldValidation(field: Ref<SlInput>, errorMessage: string = '') {
+export function setFieldValidation(field: Ref<any>, errorMessage: string = '') {
   // Set validation on a field
+  if (!field.value) {
+    return
+  }
   field.value?.setCustomValidity(errorMessage)
   field.value?.reportValidity()
 }

packages/sshecret-frontend/src/components/__tests__/HelloWorld.spec.ts

@@ -1,11 +0,0 @@
-import { describe, it, expect } from 'vitest'
-
-import { mount } from '@vue/test-utils'
-import HelloWorld from '../HelloWorld.vue'
-
-describe('HelloWorld', () => {
-  it('renders properly', () => {
-    const wrapper = mount(HelloWorld, { props: { msg: 'Hello Vitest' } })
-    expect(wrapper.text()).toContain('Hello Vitest')
-  })
-})

packages/sshecret-frontend/src/components/audit/AuditFilters.vue

@@ -1,7 +1,7 @@
 <template>
   <h1 class="text-lg font-semibold text-gray-900 dark:text-white">Audit log</h1>
   <div class="mt-4">
-    <form @submit.prevent="applyFilter">
+    <form @submit.prevent="">
       <div class="py-2 border-b border-gray-100">
         <sl-select
           size="small"
@@ -79,7 +79,7 @@ import { ref, reactive, onMounted, watch } from 'vue'
 import { useAuditFilterState } from '@/store/useAuditFilterState'
 import { SshecretAdmin } from '@/client'
 import { SUBSYSTEM, OPERATIONS } from '@/api/types'
-import { assertSdkResponseOk } from '@/api/AssertSdkResponseOk'
+import { assertSdkResponseOk } from '@/api/assertSdkResponseOk'
 
 const auditFilterState = useAuditFilterState()
 

packages/sshecret-frontend/src/components/audit/AuditSkeleton.vue

@@ -86,7 +86,10 @@
 
 <script setup lang="ts">
 import { toRef } from 'vue'
-const props = defineProps<{ amount: number }>()
+interface Props {
+  amount?: number
+}
+const props = defineProps<Props>()
 
 const amount = toRef(() => props.amount ?? 25)
 </script>

packages/sshecret-frontend/src/components/audit/AuditTable.vue

@@ -55,7 +55,7 @@
           </tr>
         </thead>
         <tbody class="bg-white dark:bg-gray-800">
-          <template v-for="entry in auditEntries" :key="entry.id">
+          <template v-for="entry in auditEntries" :key="entry.id" v-if="auditEntries">
             <tr class="audit-table-row auditRow hover:bg-gray-100 dark:hover:bg-gray-700">
               <td class="audit-col-chevron">
                 <sl-icon-button
@@ -84,14 +84,14 @@
               <td
                 class="audit-col-client p-4 text-sm font-normal text-gray-900 whitespace-nowrap dark:text-white"
               >
-                <abbr :title="entry.client_id" v-if="entry.client_name">{{
+                <abbr :title="entry.client_id" v-if="entry.client_name && entry.client_id">{{
                   entry.client_name
                 }}</abbr>
               </td>
               <td
                 class="audit-col-secret p-4 text-sm font-normal text-gray-900 whitespace-nowrap dark:text-white"
               >
-                <abbr :title="entry.secret_id" v-if="entry.secret_name">{{
+                <abbr :title="entry.secret_id" v-if="entry.secret_name && entry.secret_id">{{
                   entry.secret_name
                 }}</abbr>
               </td>
@@ -179,7 +179,7 @@
               class="font-semibold text-gray-900 dark:text-white"
               v-if="totalEntries < lastResult"
             >
-              {{ firstResult }}-{{ TotalEntries }}
+              {{ firstResult }}-{{ totalEntries }}
             </span>
             <span class="font-semibold text-gray-900 dark:text-white" v-else>
               {{ firstResult }}-{{ lastResult }}
@@ -210,17 +210,15 @@
 </template>
 <script setup lang="ts">
 import { computed, ref, reactive, onMounted, watch, toRef } from 'vue'
-import type { ComputedRef } from 'vue'
 import { usePagination } from '@/composables/usePagination'
-import { SshecretAdmin, GetAuditLogApiV1AuditGetData } from '@/client'
+import { SshecretAdmin } from '@/client'
-import type { AuditListResult } from '@/client'
+import type { AuditListResult, AuditLog, GetAuditLogApiV1AuditGetData } from '@/client'
-import type { AuditFilter } from '@/api/types'
+import { assertSdkResponseOk } from '@/api/assertSdkResponseOk'
-import { assertSdkResponseOk } from '@/api/AssertSdkResponseOk'
 import PageNumbers from '@/components/common/PageNumbers.vue'
 import AuditSkeleton from '@/components/audit/AuditSkeleton.vue'
 
 interface Props {
-  auditFilter: AuditFilter
+  auditFilter: GetAuditLogApiV1AuditGetData['query']
   paginate?: boolean
 }
 
@@ -228,19 +226,25 @@ const props = defineProps<Props>()
 
 const shouldPaginate = toRef(() => props.paginate ?? true)
 const auditFilter = toRef(() => props.auditFilter)
-const auditList = ref<AuditListResult>([])
+const auditList = ref<AuditListResult>()
-const auditEntries = computed(() => auditList.value?.results)
+const auditEntries = computed<AuditLog[]>(() => (auditList.value ? auditList.value.results : []))
-const totalEntries = computed(() => auditList.value?.total)
+const totalEntries = computed<number>(() => auditList.value?.total ?? 0)
 
-const perPage = props.auditFilter.limit ?? 25
+const perPage = computed<number>(() => {
+  if (props.auditFilter) {
+    return props.auditFilter.limit ?? 25
+  } else {
+    return 25
+  }
+})
 const { pageNum, offset, firstResult, lastResult, totalPages, nextPage, prevPage, goToPage } =
-  usePagination(totalEntries, perPage)
+  usePagination(totalEntries.value, perPage.value)
 
 const queryInput = computed<GetAuditLogApiV1AuditGetData['query']>(() => {
   return {
     ...props.auditFilter,
     offset: offset.value,
-    limit: perPage,
+    limit: perPage.value,
   }
 })
 
@@ -254,7 +258,10 @@ async function loadLogs() {
 
 const expanded = ref(new Set<string>())
 
-function toggle(id: string) {
+function toggle(id: string | null | undefined) {
+  if (!id) {
+    return
+  }
   if (expanded.value.has(id)) {
     expanded.value.delete(id)
   } else {
@@ -262,9 +269,12 @@ function toggle(id: string) {
   }
 }
 
-function isExpanded(id: string) {
+function isExpanded(id: any) {
+  if (id) {
     return expanded.value.has(id)
   }
+  return false
+}
 
 watch([offset, pageNum, auditFilter], loadLogs)
 onMounted(loadLogs)

packages/sshecret-frontend/src/components/auth/ChangePassword.vue

@@ -46,6 +46,7 @@
 </template>
 
 <script setup lang="ts">
+import type SlInput from '@shoelace-style/shoelace/dist/components/input/input.component.js'
 import { ref } from 'vue'
 import { useAlertsStore } from '@/store/useAlertsStore'
 import { SshecretAdmin } from '@/client'
@@ -55,19 +56,23 @@ import { ApiError, ValidationError } from '@/api/errors'
 import { setFieldValidation } from '@/api/validation'
 
 const currentPassword = ref<string>('')
+
 const newPassword = ref<string>('')
 const newPasswordConfirm = ref<string>('')
 
 const passwordChangeForm = ref<HTMLFormElement>()
 const currentPasswordField = ref<SlInput>()
 const newPasswordField = ref<SlInput>()
-const newPasswordFieldConfirm = ref<Slinput>()
+const newPasswordFieldConfirm = ref<SlInput>()
 
 const alerts = useAlertsStore()
 
 const emit = defineEmits<{ (e: 'changed'): void; (e: 'cancel'): void }>()
 
 function checkCurrent() {
+  if (!currentPasswordField.value) {
+    return
+  }
   setFieldValidation(currentPasswordField)
   currentPasswordField.value.reportValidity()
 }
@@ -105,8 +110,11 @@ async function changePassword() {
       setFieldValidation(newPasswordFieldConfirm, 'Passwords do not match match')
     } else if (err instanceof ApiError && err.message.includes('Invalid current password')) {
       setFieldValidation(currentPasswordField, 'Invalid current password')
-    } else {
+    } else if (err instanceof ApiError) {
       alerts.showAlert(err.message, 'error', 'Error changing password')
+    } else {
+      console.error(err)
+      alerts.showAlert('Error changing password', 'error')
     }
   }
 }

packages/sshecret-frontend/src/components/auth/OidcCallback.vue

@@ -12,9 +12,12 @@ function getTokens() {
   const params = new URLSearchParams(hash)
   const accessToken = params.get('access_token')
   const refreshToken = params.get('refresh_token')
+  if (accessToken && refreshToken) {
     auth.setToken(accessToken, refreshToken)
-
     router.push({ name: 'dashboard' })
+  } else {
+    router.push({ name: 'login' })
+  }
 }
 
 onMounted(getTokens)

packages/sshecret-frontend/src/components/clients/ClientDetail.vue

@@ -107,32 +107,30 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue'
+import { computed, ref, toRef, watch, withDefaults } from 'vue'
 
 import type { Client, ClientCreate } from '@/client/types.gen'
 
 import AuditTable from '@/components/audit/AuditTable.vue'
 import ClientForm from '@/components/clients/ClientForm.vue'
-const props = defineProps({
+interface Props {
-  client: {
+  client: Client
-    type: Object,
+  updateErrors?: any[]
-  },
+}
-  updateErrors: {
+
-    type: Array,
+const props = withDefaults(defineProps<Props>(), { updateErrors: () => [] })
-    detault: [],
-  },
-})
 const emit = defineEmits<{
   (e: 'update', data: ClientCreate): void
   (e: 'deleted', data: string): void
+  (e: 'clearErrors'): void
 }>()
 
 const localClient = ref({ ...props.client })
 
-const formErrors = ref([])
+const formErrors = toRef(() => props.updateErrors)
 
 function clearFormErrors() {
-  formErrors.value = []
+  emit('clearErrors')
 }
 
 const updateDrawerOpen = ref<boolean>(false)

packages/sshecret-frontend/src/components/clients/ClientForm.vue

@@ -8,7 +8,7 @@
         help-text="Name of the client, usually the hostname"
         :disabled="isEdit"
         :value="name"
-        @blur="checkName"
+        @blur="checkName()"
         @sl-input="name = $event.target.value"
         @input="emit('clearErrors')"
         ref="nameField"
@@ -68,10 +68,11 @@ import { computed, ref, watch } from 'vue'
 import type { Ref } from 'vue'
 import { isIP } from 'is-ip'
 import isCidr from 'is-cidr'
+import type SlInput from '@shoelace-style/shoelace/dist/components/input/input.component.js'
 
 import { setFieldValidation } from '@/api/validation'
 
-import type { ClientCreate } from '@/client/types.gen'
+import type { ClientCreate, Client } from '@/client'
 
 const name = ref('')
 const description = ref('')
@@ -79,10 +80,10 @@ const sourcePrefix = ref('')
 const policies = ref(['0.0.0.0/0', '::/0'])
 const publicKey = ref('')
 
-const nameField = ref<HTMLSlInputElement>()
+const nameField = ref<SlInput>()
-const sourceField = ref<HTMLSlInputElement>()
+const sourceField = ref<SlInput>()
-const publicKeyField = ref<HTMLSlInputElement>()
+const publicKeyField = ref<SlInput>()
-const clientCreateForm = ref<HTMLElement>()
+const clientCreateForm = ref<HTMLFormElement>()
 
 interface Props {
   client?: Client
@@ -137,7 +138,9 @@ function removePolicy(index: number) {
 }
 
 function checkName() {
+  if (nameField.value) {
     nameField.value.reportValidity()
+  }
   emit('clearErrors')
 }
 
@@ -170,23 +173,26 @@ function resetValidation() {
 watch(
   () => props.errors,
   (errors) => {
+    if (!errors) {
+      return
+    }
     resetValidation()
     const nameErrors = errors.filter((e) => e.loc.includes('name'))
     const sourceErrors = errors.filter((e) => e.loc.includes('source'))
-    const publicKeyError = errors.filter((e) => e.loc.includes('public_key'))
+    const publicKeyErrors = errors.filter((e) => e.loc.includes('public_key'))
     if (nameErrors.length > 0) {
       setFieldValidation(nameField, nameErrors[0].msg)
     }
     if (sourceErrors.length > 0) {
       setFieldValidation(sourceField, sourceErrors[0].msg)
     }
-    if (publicKeyError.length > 0) {
+    if (publicKeyErrors.length > 0) {
       setFieldValidation(publicKeyField, publicKeyErrors[0].msg)
     }
   },
 )
 
-async function submitForm() {
+function submitForm() {
   if (clientCreateForm.value?.checkValidity()) {
     let clientDescription: string | null = null
     if (description.value) {

packages/sshecret-frontend/src/components/clients/ClientSelectDropdown.vue

@@ -2,7 +2,7 @@
 import { onMounted, ref } from 'vue'
 
 import { SshecretAdmin } from '@/client'
-import { assertSdkResponseOk } from '@/api/AssertSdkResponseOk'
+import { assertSdkResponseOk } from '@/api/assertSdkResponseOk'
 import type { ClientReference } from '@/client'
 
 const clients = ref<ClientReference[]>([])

packages/sshecret-frontend/src/components/clients/CreateClient.vue

@@ -60,27 +60,30 @@
     </form>
   </div>
 </template>
+
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 import type { Ref } from 'vue'
 import { isIP } from 'is-ip'
 import isCidr from 'is-cidr'
 
-import { assertSdkResponseOk } from '@/api/AssertSdkResponseOk'
+import { assertSdkResponseOk } from '@/api/assertSdkResponseOk'
 import type { ClientCreate } from '@/client/types.gen'
 import { SshecretAdmin } from '@/client/sdk.gen'
 import { setFieldValidation } from '@/api/validation'
 
+import type SlInput from '@shoelace-style/shoelace/dist/components/input/input.component.js'
+
 const name = ref('')
 const description = ref('')
 const sourcePrefix = ref('')
 const policies = ref(['0.0.0.0/0', '::/0'])
-const publicKey = ref([])
+const publicKey = ref('')
 
-const nameField = ref<HTMLSlInputElement>()
+const nameField = ref<SlInput>()
-const sourceField = ref<HTMLSlInputElement>()
+const sourceField = ref<SlInput>()
-const publicKeyField = ref<HTMLSlInputElement>()
+const publicKeyField = ref<SlInput>()
-const clientCreateForm = ref<HTMLElement>()
+const clientCreateForm = ref<HTMLFormElement>()
 
 function addPolicy() {
   if (!sourcePrefix.value) {
@@ -107,11 +110,14 @@ function removePolicy(index: number) {
 }
 
 function checkName() {
+  if (nameField.value) {
     nameField.value.reportValidity()
   }
+}
 
 function validatePublicKey() {
-  const pubkey = publicKey.value
+  const pubkey: string = publicKey.value
+  if (pubkey) {
     const defaultError = 'Invalid public key. Must be a valid ssh-rsa key.'
     if (!pubkey.startsWith('ssh-rsa ')) {
       setFieldValidation(publicKeyField, defaultError)
@@ -129,6 +135,7 @@ function validatePublicKey() {
 
     setFieldValidation(publicKeyField, '')
   }
+}
 
 async function submitForm() {
   if (clientCreateForm.value?.checkValidity()) {

packages/sshecret-frontend/src/components/common/AlertToast.vue

@@ -14,17 +14,21 @@
 </template>
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
-import { useAlertsStore, Alert } from '@/store/useAlertsStore'
+import { useAlertsStore } from '@/store/useAlertsStore'
+import type { Alert } from '@/store/useAlertsStore'
+import type SlAlert from '@shoelace-style/shoelace/dist/components/alert/alert.component.js'
 
 const alerts = useAlertsStore()
 
 const props = defineProps<{ alert: Alert }>()
 
-const alertElement = ref<HTMLSlAlertElement>()
+const alertElement = ref<SlAlert>()
 
 function showToast() {
+  if (alertElement.value) {
     alertElement.value.toast()
   }
+}
 
 onMounted(showToast)
 </script>

packages/sshecret-frontend/src/components/common/Dialog.vue

@@ -10,11 +10,12 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { useBubbleSafeHandler } from '@/composables/useBubbleSafeHandler'
+import type SlDialog from '@shoelace-style/shoelace/dist/components/dialog/dialog.component.js'
 
 const props = defineProps<{ label: string; open: boolean }>()
 
 const emit = defineEmits<{ (e: 'hide'): void }>()
-const dialogRef = ref<HTMLSlDrawerElement>()
+const dialogRef = ref<SlDialog>()
 
 const handleHide = useBubbleSafeHandler(dialogRef, () => {
   emit('hide')

packages/sshecret-frontend/src/components/common/Drawer.vue

@@ -7,11 +7,12 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { useBubbleSafeHandler } from '@/composables/useBubbleSafeHandler'
+import type SlDrawer from '@shoelace-style/shoelace/dist/components/drawer/drawer.component.js'
 
 const props = defineProps<{ label: string; open: boolean }>()
 
 const emit = defineEmits<{ (e: 'hide'): void }>()
-const drawerRef = ref<HTMLSlDrawerElement>()
+const drawerRef = ref<SlDrawer>()
 
 const handleHide = useBubbleSafeHandler(drawerRef, () => {
   emit('hide')

packages/sshecret-frontend/src/components/common/MasterDetailWorkspace.vue

@@ -1,109 +0,0 @@
-<template>
-  <MasterDetail>
-    <template #master>
-      <MasterTabs :selectedTab="selectedTab" @change="tabSelected" />
-    </template>
-    <template #detail v-if="showAudit || selectedTab === 'audit'">
-      <AuditView />
-    </template>
-    <template #detail v-else>
-      <template v-if="treeState.selected">
-        <ClientDetailView
-          v-if="treeState.selected.objectType === SshecretObjectType.Client"
-          :clientId="treeState.selected.id"
-          :key="treeState.selected.id"
-        />
-        <SecretDetailView
-          v-else-if="treeState.selected.objectType === SshecretObjectType.ClientSecret"
-          :secretName="treeState.selected.id"
-          :parentId="null"
-          :key="treeState.selected.id"
-        />
-        <SecretGroupDetailView
-          v-else-if="
-            treeState.selected.objectType === SshecretObjectType.SecretGroup &&
-            treeState.selected.id != 'ungrouped'
-          "
-          :groupPath="treeState.selected.id"
-          :key="treeState.selected.id"
-        />
-      </template>
-    </template>
-  </MasterDetail>
-</template>
-<script setup lang="ts">
-import type { PageState } from '@/api/types'
-import { computed, ref, onMounted } from 'vue'
-import { useRouter, useRoute } from 'vue-router'
-import MasterTabs from '@/components/common/MasterTabs.vue'
-import MasterDetail from '@/views/layout/MasterDetail.vue'
-import AuditView from '@/views/audit/AuditView.vue'
-import ClientTreeList from '@/views/clients/ClientTreeList.vue'
-import SecretTreeList from '@/views/secrets/SecretTreeList.vue'
-import ClientDetailView from '@/views/clients/ClientDetailView.vue'
-import SecretDetailView from '@/views/secrets/SecretDetailView.vue'
-import SecretGroupDetailView from '@/views/secrets/SecretGroupDetailView.vue'
-import AuditFilters from '@/components/audit/AuditFilters.vue'
-import GenericDetail from '@/components/common/GenericDetail.vue'
-
-import { SshecretObjectType } from '@/api/types'
-import { useAuditFilterState } from '@/store/useAuditFilterState'
-import { useTreeState } from '@/store/useTreeState'
-import { useAlertsStore } from '@/store/useAlertsStore'
-
-const router = useRouter()
-const alerts = useAlertsStore()
-
-const treeState = useTreeState()
-
-const auditFilterState = useAuditFilterState()
-
-const showAudit = ref<{ boolean }>()
-
-const props = defineProps<{ loadPage: PageState }>()
-
-const selectedTab = computed(() => props.loadPage?.activePane)
-const selectedClientName = ref()
-
-async function loadObjectSelection() {
-  if (!props.loadPage) {
-    return
-  }
-  if (props.loadPage.activePane === 'audit') {
-    treeState.showAudit = true
-    showAudit.value = true
-  }
-  if (props.loadPage.activePane === 'clients' && props.loadPage.selectedObject) {
-    try {
-      await treeState.loadClientName(props.loadPage.selectedObject)
-      selectedClientName.value = props.loadPage.selectedObject
-    } catch (e) {
-      // We need to figure out how to generate a 404 here
-      alerts.showAlert('Could not find the object', 'error')
-    }
-  }
-}
-
-function tabSelected(tabName) {
-  router.push({ name: tabName })
-  if (tabName == 'audit') {
-    treeState.showAudit = true
-    showAudit.value = true
-  } else {
-    treeState.showAudit = false
-    showAudit.value = false
-  }
-}
-
-onMounted(loadObjectSelection)
-</script>
-
-<style>
-sl-tab-group.master-pane-tabs::part(base),
-sl-tab-group.master-pane-tabs::part(body),
-sl-tab-group.master-pane-tabs sl-tab-panel::part(base),
-sl-tab-group.master-pane-tabs sl-tab-panel::part(body),
-sl-tab-group.master-pane-tabs sl-tab-panel {
-  height: 100%;
-}
-</style>

packages/sshecret-frontend/src/components/common/PageNumbers.vue

@@ -66,5 +66,9 @@ const props = withDefaults(
     size: 'small',
   },
 )
-const emit = defineEmits<{ (e: 'next'): void; (e: 'previous'): void; (e: 'goto', number): void }>()
+const emit = defineEmits<{
+  (e: 'next'): void
+  (e: 'previous'): void
+  (e: 'goto', data: number): void
+}>()
 </script>

packages/sshecret-frontend/src/components/secrets/AddGroup.vue

@@ -20,8 +20,9 @@
 
 <script setup lang="ts">
 import { computed, ref, toRef } from 'vue'
+import type SlInput from '@shoelace-style/shoelace/dist/components/input/input.component.js'
 
-const props = defineProps<{ parent }>()
+const props = defineProps<{ parent: string }>()
 const groupName = ref<string>('')
 const targetPath = computed(() => `${parentPath.value}/${groupName.value}`)
 const parentPath = toRef(() => props.parent)
@@ -34,14 +35,15 @@ const helpText = computed(() => {
 })
 const emit = defineEmits<{ (e: 'submit', data: string): void; (e: 'cancel'): void }>()
 
-const nameField = ref<HTMLElement>()
+const nameField = ref<SlInput>()
 
 function validateInput(): boolean {
+  if (!nameField.value) return true
   if (groupName.value.includes('/')) {
     nameField.value?.setCustomValidity('Group name cannot contain /')
   }
-  nameField.value?.reportValidity()
+  nameField.value.reportValidity()
-  const validity = nameField.validity
+  const validity = nameField.value.validity
   return validity?.valid ?? true
 }
 

packages/sshecret-frontend/src/components/secrets/GroupDetail.vue

@@ -26,9 +26,19 @@
             <dt class="text-sm/6 font-medium text-gray-900 dark:text-gray-200">
               Entries in this group
             </dt>
-            <dd class="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0 dark:text-gray-300">
+            <dd
+              class="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0 dark:text-gray-300"
+              v-if="group.entries"
+            >
               {{ group.entries.length }}
             </dd>
+
+            <dd
+              class="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0 dark:text-gray-300"
+              v-else
+            >
+              0
+            </dd>
           </div>
         </dl>
       </div>

packages/sshecret-frontend/src/components/secrets/GroupMoveTree.vue

@@ -22,6 +22,7 @@ import type { ClientSecretGroup } from '@/client'
 
 import { assertSdkResponseOk } from '@/api/assertSdkResponseOk'
 import { useAlertsStore } from '@/store/useAlertsStore'
+import { ApiError } from '@/api/errors'
 
 const props = defineProps<{ self: string }>()
 const groups = ref<ClientSecretGroup[]>([])
@@ -31,6 +32,8 @@ const emit = defineEmits<{ (e: 'selected', data: string): void; (e: 'cancel'): v
 
 const selectedPath = ref()
 
+const alerts = useAlertsStore()
+
 async function getGroups() {
   selectedPath.value = props.self
   const response = await SshecretAdmin.getSecretGroupsApiV1SecretsGroupsGet({
@@ -38,9 +41,16 @@ async function getGroups() {
   })
   try {
     const responseData = assertSdkResponseOk(response)
+    if (responseData.groups) {
       groups.value = responseData.groups
+    }
   } catch (err) {
-    alerts.showAlert(err.message, 'error', 'Could not fetch groups from the backend')
+    if (err instanceof ApiError) {
+      const errorMessage = err.message ?? 'Unknown error'
+      alerts.showAlert(errorMessage, 'error', 'Could not fetch groups from the backend')
+    } else {
+      alerts.showAlert('Could not fetch groups from the backend', 'error')
+    }
   }
 }
 

packages/sshecret-frontend/src/components/secrets/MoveSecretGroup.vue

@@ -20,6 +20,7 @@ import type { ClientSecretGroup } from '@/client'
 import { ref, onMounted, toRef } from 'vue'
 import { assertSdkResponseOk } from '@/api/assertSdkResponseOk'
 import { useAlertsStore } from '@/store/useAlertsStore'
+import { ApiError } from '@/api/errors'
 
 interface Props {
   existingPath?: string
@@ -40,13 +41,19 @@ async function getGroups() {
   })
   try {
     const responseData = assertSdkResponseOk(response)
+    if (responseData.groups) {
       if (props.existingPath) {
         groups.value = responseData.groups.filter((entry) => entry.path !== props.existingPath)
       } else {
         groups.value = responseData.groups
       }
+    }
   } catch (err) {
-    alerts.showAlert(err.message, 'error', 'Could not fetch groups from the backend')
+    let errorMessage = 'Unknown error'
+    if (err instanceof ApiError && err.message) {
+      errorMessage = err.message
+    }
+    alerts.showAlert(errorMessage, 'error', 'Could not fetch groups from the backend')
   }
 }
 

packages/sshecret-frontend/src/components/secrets/SecretDetail.vue

@@ -22,12 +22,6 @@
             <h3 class="text-base/7 font-semibold text-gray-900 dark:text-gray-50">
               {{ secret.name }}
             </h3>
-            <p
-              class="mt-1 max-w-2xl text-sm/6 text-gray-500 dark:text-gray-100"
-              v-if="secret?.description"
-            >
-              {{ secret?.description }}
-            </p>
           </div>
           <div class="mt-6 border-t border-gray-100" v-if="secret">
             <dl class="divide-y divide-gray-100">
@@ -219,7 +213,7 @@ const emit = defineEmits<{
   (e: 'moveGroup', data: string): void
 }>()
 
-const secret = ref<Secret>(props.secret)
+const secret = ref<SecretView>(props.secret)
 const clients = computed(() => props.secret?.clients ?? [])
 const secretValue = ref<string | null>(secret.value?.secret)
 const addDialog = ref<boolean>(false)
@@ -238,9 +232,13 @@ const auditFilter = {
   limit: 10,
 }
 
-function handleHide(event) {
+function handleHide(event: CustomEvent<Record<PropertyKey, never>>) {
-  const targetId = event.target.id
+  if (!event.target) {
-  if (targetId === 'addDialogDrawer') {
+    return
+  }
+  const target = event.target as HTMLDivElement
+  const targetId = target.id
+  if (targetId && targetId === 'addDialogDrawer') {
     addDialog.value = false
   }
 }
@@ -253,8 +251,10 @@ function moveGroup(path: string) {
 const existingGroupPath = computed(() => secret.value.group?.path)
 
 function updateSecret() {
+  if (secretValue.value) {
     emit('update', secretValue.value)
   }
+}
 function addSecretToClients(clientIds: string[]) {
   addDialog.value = false
   clientIds.forEach((clientId) => emit('addClient', clientId))

packages/sshecret-frontend/src/components/secrets/SecretForm.vue

@@ -47,7 +47,9 @@
     <label for="clients" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
       >Clients</label
     >
+    <template v-if="selectedClients">
       <ClientSelectDropdown v-model="selectedClients" />
+    </template>
     <div slot="footer">
       <sl-button size="medium" variant="success" outline @click="submitCreateSecret" class="mr-2">
         <sl-icon slot="prefix" name="person-plus"></sl-icon>
@@ -65,6 +67,7 @@ import { generateRandomPassword } from '@/api/password'
 import AddSecretsToClients from '@/components/secrets/AddSecretToClients.vue'
 import ClientSelectDropdown from '@/components/clients/ClientSelectDropdown.vue'
 import { setFieldValidation } from '@/api/validation'
+import type SlInput from '@shoelace-style/shoelace/dist/components/input/input.component.js'
 
 interface Props {
   group?: string
@@ -81,8 +84,8 @@ const emit = defineEmits<{
 
 const secretName = ref<string>()
 const createSecretForm = ref<HTMLFormElement>()
-const nameField = ref<HTMLSlInputElement>()
+const nameField = ref<SlInput>()
-const secretField = ref<HTMLSlInputElement>()
+const secretField = ref<SlInput>()
 const secretValue = ref()
 const secretLength = ref(8)
 const autoGenerate = ref(false)
@@ -94,15 +97,23 @@ function generatePassword() {
 }
 
 function validateName() {
+  if (!nameField.value) {
+    return
+  }
   nameField.value.reportValidity()
 }
 
 function validateSecret() {
+  if (!secretField.value) {
+    return
+  }
   secretField.value.reportValidity()
 }
 
 function cancelCreateSecret() {
+  if (createSecretForm.value) {
     createSecretForm.value.reset()
+  }
   emit('cancel')
 }
 
@@ -114,10 +125,12 @@ function submitCreateSecret() {
   validateName()
   validateSecret()
 
+  if (!secretName.value) return
+
   if (createSecretForm.value?.checkValidity()) {
     console.log('SelectedClients: ', selectedClients.value)
     const secretGroup = props.group ?? null
-    let secretClients = []
+    let secretClients: string[] = []
     if (Array.isArray(selectedClients.value)) {
       secretClients = [...selectedClients.value]
     }
@@ -135,11 +148,13 @@ function submitCreateSecret() {
 watch(
   () => props.errors,
   (errors) => {
+    if (errors) {
       resetValidation()
       const nameErrors = errors.filter((e) => e.loc.includes('name'))
       if (nameErrors.length > 0) {
         setFieldValidation(nameField, nameErrors[0].msg)
       }
+    }
   },
 )
 </script>

packages/sshecret-frontend/src/components/secrets/SecretGroup.vue

@@ -17,7 +17,7 @@ import SecretGroup from '@/components/secrets/SecretGroup.vue'
 import SecretGroupTreeItem from '@/components/secrets/SecretGroupTreeItem.vue'
 import SecretGroupTreeEntry from '@/components/secrets/SecretGroupTreeEntry.vue'
 
-const props = defineProps<{ group: SecretGroup; except?: string }>()
+const props = defineProps<{ group: ClientSecretGroup; except?: string }>()
 
 const groupPath = toRef(() => props.group.path)
 </script>

packages/sshecret-frontend/src/components/secrets/SecretGroupTreeEntry.vue

@@ -13,6 +13,6 @@ const props = defineProps<{
   selected?: boolean
 }>()
 
-const groupPath = toRef(() => props.path)
+const groupPath = toRef(() => props.groupPath)
 const itemId = computed(() => `secret-${props.name}`)
 </script>

packages/sshecret-frontend/src/main.ts

@@ -2,7 +2,7 @@ import './assets/main.css'
 // Added for shoelace.
 // See note on CDB usage: https://shoelace.style/frameworks/vue
 import '@shoelace-style/shoelace/dist/themes/light.css'
-import { setBasePath } from '@shoelace-style/shoelace/dist/utilities/base-path'
+import { setBasePath } from '@shoelace-style/shoelace/dist/utilities/base-path.js'
 
 setBasePath('https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.20.1/cdn/')
 
@@ -51,7 +51,8 @@ import { client } from '@/client/client.gen'
 import router from './router'
 import App from './App.vue'
 
-const baseURL = import.meta.env.SSHECRET_FRONTEND_API_BASE_URL
+const baseURL = import.meta.env.DEV ? import.meta.env.SSHECRET_FRONTEND_API_BASE_URL : "/"
+//const baseURL = import.meta.env.SSHECRET_FRONTEND_API_BASE_URL
 
 client.setConfig({ baseURL })
 

packages/sshecret-frontend/src/router/index.ts

@@ -68,7 +68,7 @@ const routes = [
         name: 'Group',
         path: '/group/:groupPath(.*)*',
         component: SecretGroupDetailView,
-        props: route => ({
+        props: (route: any) => ({
           groupPath: Array.isArray(route.params.groupPath) ? reassemblePath(route.params.groupPath) : route.params.groupPath || ''
         }),
         meta: { requiresAuth: true },

packages/sshecret-frontend/src/store/auth.ts

@@ -23,6 +23,9 @@ export const useAuthTokenStore = defineStore('authtoken', {
     async login(username: string, password: string): Promise<boolean> {
       try {
         const response = await SshecretAdmin.loginForAccessTokenApiV1TokenPost({ body: { username, password } })
+        if (!response.data) {
+          return false
+        }
         const tokenData: Token = response.data
         const accessToken = tokenData.access_token
         const refreshToken = tokenData.refresh_token
@@ -53,6 +56,9 @@ export const useAuthTokenStore = defineStore('authtoken', {
       try {
         console.log("Refreshing token")
         const response = await SshecretAdmin.refreshTokenApiV1RefreshPost({ body: { grant_type: "refresh_token", refresh_token: this.refreshToken } })
+        if (!response.data) {
+          return false
+        }
         const tokenData: Token = response.data
         const accessToken = tokenData.access_token
         const refreshToken = tokenData.refresh_token

packages/sshecret-frontend/src/store/useAlertsStore.ts

@@ -1,7 +1,7 @@
 // stores/useAlertsStore.ts
 import { defineStore } from 'pinia'
 
-interface Alert {
+export interface Alert {
   id: number
   message: string
   title?: string

packages/sshecret-frontend/src/views/Dashboard.vue

@@ -86,17 +86,19 @@ import { ref, onMounted } from 'vue'
 import type { SystemStats } from '@/client'
 import type { AuditFilter } from '@/api/types'
 import { SshecretAdmin } from '@/client'
+import type { Operation } from '@/client'
 import AuditTable from '@/components/audit/AuditTable.vue'
 import { useAlertsStore } from '@/store/useAlertsStore'
 
+const loginOperation: Operation = 'login'
 const loginAuditFilter = {
-  operation: 'login',
+  operation: loginOperation,
   limit: 10,
 }
 
 const auditFilter = { limit: 10 }
 
-const stats = ref<SystemStats>({})
+const stats = ref<SystemStats>()
 
 const alerts = useAlertsStore()
 

packages/sshecret-frontend/src/views/WorkspaceView.vue

@@ -1,6 +0,0 @@
-<template>
-  <MasterDetailWorkspace />
-</template>
-<script setup lang="ts">
-import MasterDetailWorkspace from '@/components/common/MasterDetailWorkspace.vue'
-</script>

packages/sshecret-frontend/src/views/audit/AuditPage.vue

@@ -24,6 +24,4 @@ function tabSelected(tabName: string) {
     router.push({ name: tabName })
   }
 }
-
-const routeKey = computed(() => route.name + '-' + (route.params.id ?? 'root'))
 </script>

packages/sshecret-frontend/src/views/audit/AuditView.vue

@@ -17,7 +17,7 @@ const auditFilterState = useAuditFilterState()
 const auditFilter = ref<GetAuditLogApiV1AuditGetData['query']>({})
 
 watch(auditFilterState, () => (auditFilter.value = auditFilterState.getFilter))
-const loaded = ref<{ boolean }>(false)
+const loaded = ref<boolean>(false)
 
 onMounted(() => {
   auditFilter.value = auditFilterState.getFilter

packages/sshecret-frontend/src/views/clients/ClientDetailView.vue

@@ -11,11 +11,11 @@
 
 <script setup lang="ts">
 import { ref, toRef, watch, onMounted } from 'vue'
-import { assertSdkResponseOk } from '@/api/AssertSdkResponseOk'
+import { assertSdkResponseOk } from '@/api/assertSdkResponseOk'
-import { ValidationError } from '@/api/errors'
+import { ApiError, ValidationError } from '@/api/errors'
 import ClientSkeleton from '@/components/clients/ClientSkeleton.vue'
 import ClientDetail from '@/components/clients/ClientDetail.vue'
-import type { ClientCreate } from '@/client'
+import type { ClientCreate, Client } from '@/client'
 import { idKey } from '@/api/paths'
 import { SshecretAdmin } from '@/client'
 import { useTreeState } from '@/store/useTreeState'
@@ -32,7 +32,7 @@ const treeState = useTreeState()
 const emit = defineEmits<{ (e: 'clientDeleted', data: string): void }>()
 const alerts = useAlertsStore()
 
-const updateErrors = ref([])
+const updateErrors = ref<any[]>([])
 
 async function loadClient() {
   if (!props.id) return
@@ -56,9 +56,10 @@ function clearUpdateErrors() {
 }
 
 async function updateClient(updated: ClientCreate) {
+  if (!client.value) return
   const response = await SshecretAdmin.updateClientApiV1ClientsIdPut({
-    path: { id: idKey(localClient.value.id) },
+    path: { id: idKey(client.value.id) },
-    body: data,
+    body: updated,
   })
   try {
     const responseData = assertSdkResponseOk(response)
@@ -67,9 +68,12 @@ async function updateClient(updated: ClientCreate) {
   } catch (err) {
     if (err instanceof ValidationError) {
       updateErrors.value = err.errors
-    } else {
+    } else if (err instanceof ApiError) {
       const errorMessage = err.message ?? 'Unknown error'
       alerts.showAlert(`Error from backend: ${errorMessage}`, 'error')
+    } else {
+      console.error(err)
+      alerts.showAlert('Unexpected error from backend', 'error')
     }
   }
 }

packages/sshecret-frontend/src/views/clients/ClientPage.vue

@@ -4,7 +4,7 @@
       <MasterTabs selectedTab="clients" @change="tabSelected" />
     </template>
     <template #detail>
-      <RouterView :key="routeKey" />
+      <RouterView :key="route.path" />
     </template>
   </MasterDetail>
 </template>
@@ -24,6 +24,4 @@ function tabSelected(tabName: string) {
     router.push({ name: tabName })
   }
 }
-
-const routeKey = computed(() => route.name + '-' + (route.params.id ?? 'root'))
 </script>

packages/sshecret-frontend/src/views/clients/ClientTreeList.vue

@@ -107,8 +107,8 @@ import { usePagination } from '@/composables/usePagination'
 import { SshecretAdmin } from '@/client/sdk.gen'
 
 import type { Client, ClientCreate } from '@/client/types.gen'
-import { ValidationError } from '@/api/errors'
+import { ApiError, ValidationError } from '@/api/errors'
-import { assertSdkResponseOk } from '@/api/AssertSdkResponseOk'
+import { assertSdkResponseOk } from '@/api/assertSdkResponseOk'
 
 import { useTreeState } from '@/store/useTreeState'
 import { useRouter, useRoute } from 'vue-router'
@@ -119,31 +119,26 @@ import ClientForm from '@/components/clients/ClientForm.vue'
 import PageNumbers from '@/components/common/PageNumbers.vue'
 import TreeItemSkeleton from '@/components/common/TreeItemSkeleton.vue'
 import { useAlertsStore } from '@/store/useAlertsStore'
+import type SlTreeItem from '@shoelace-style/shoelace/dist/components/tree-item/tree-item.component.js'
 
 import { useDebounce } from '@/composables/useDebounce'
 const treeState = useTreeState()
 
 const clientsPerPage = 20
-const totalClients = computed(() => treeState.clients?.total_results)
+const totalClients = computed<number>(() => treeState.clients?.total_results ?? 0)
 
-const clients = computed(() => treeState.clients.clients)
+const clients = computed(() => treeState.clients?.clients)
 const selectedClient = ref<Client | null>(null)
 const selectedSecret = ref<string | null>(null)
 
-const createErrors = ref([])
+const createErrors = ref<any[]>([])
 
 const createFormKey = ref<number>(0)
 const createDrawerOpen = ref<boolean>(false)
 
-const props = defineProps({
-  loadClient: {
-    type: String,
-    default: '',
-  },
-})
 const router = useRouter()
 
-const clientQuery = toRef(() => props.loadClient)
+const clientQuery = ref<string>()
 
 const debouncedQuery = useDebounce(clientQuery, 300)
 const alerts = useAlertsStore()
@@ -160,12 +155,16 @@ async function loadClients() {
 }
 
 function updateClient(updated: Client) {
+  if (!clients.value) {
+    return
+  }
   const index = clients.value.findIndex((c) => c.name === updated.name)
   if (index >= 0) {
     clients.value[index] = updated
   }
 }
-function itemSelected(event: Event) {
+
+function itemSelected(event: CustomEvent<{ selection: SlTreeItem[] }>) {
   if (event.detail.selection) {
     const el = event.detail.selection[0] as HTMLElement
     const childType = el.dataset.type
@@ -186,8 +185,12 @@ async function createClient(data: ClientCreate) {
   const response = await SshecretAdmin.createClientApiV1ClientsPost({ body: data })
   try {
     const responseData = assertSdkResponseOk(response)
+    if (clients.value) {
       clients.value.unshift(responseData)
-    totalClients.value += 1
+    }
+    if (treeState.clients) {
+      treeState.clients.total_results += 1
+    }
     createDrawerOpen.value = false
     createFormKey.value += 1
     treeState.selectClient(responseData.id)
@@ -196,9 +199,12 @@ async function createClient(data: ClientCreate) {
   } catch (err) {
     if (err instanceof ValidationError) {
       createErrors.value = err.errors
-    } else {
+    } else if (err instanceof ApiError) {
       const errorMessage = err.message ?? 'Unknown error'
       alerts.showAlert(`Error from backend: ${errorMessage}`, 'error')
+    } else {
+      console.error(err)
+      alerts.showAlert('Error communicating with backend', 'error', 'Unexpected Error')
     }
   }
 }
@@ -209,6 +215,7 @@ function clearCreateErrors() {
 }
 
 async function clientDeleted(id: string) {
+  if (!clients.value) return
   const index = clients.value.findIndex((c) => c.id === id)
   if (index >= 0) {
     clients.value.splice(index, 1)

packages/sshecret-frontend/src/views/secrets/SecretDetailView.vue

@@ -25,7 +25,7 @@ import { useAlertsStore } from '@/store/useAlertsStore'
 
 import { useRouter } from 'vue-router'
 
-import type { SecretView } from '@/client/types.gen.ts'
+import type { SecretView } from '@/client'
 import { SshecretAdmin } from '@/client'
 
 const alerts = useAlertsStore()
@@ -46,8 +46,11 @@ async function loadSecret() {
   } catch (err) {
     if (err instanceof NotFoundError) {
       notfound.value = true
-    } else {
+    } else if (err instanceof ApiError) {
       alerts.showAlert(`Error from backend: ${err.message}`, 'error')
+    } else {
+      console.error(err)
+      alerts.showAlert('Error communicating with backend', 'error')
     }
   } finally {
     loading.value = false
@@ -56,7 +59,9 @@ async function loadSecret() {
 
 async function updateSecretValue(value: string) {
   // Update a secret value
-  await SshecretAdmin.updateSecretApiV1SecretsNamePut({
+  if (!props.id) return
+  try {
+    const response = await SshecretAdmin.updateSecretApiV1SecretsNamePut({
       path: {
         name: props.id,
       },
@@ -64,13 +69,23 @@ async function updateSecretValue(value: string) {
         value: value,
       },
     })
+    assertSdkResponseOk(response)
+  } catch (err) {
+    if (err instanceof ApiError) {
+      alerts.showAlert(err.message, 'error', 'Error updating secret')
+    } else {
+      console.error(err)
+      alerts.showAlert('Unexpected Error', 'error', 'Error updating secret')
+    }
+  }
+
   if (props.parentId) {
     await treeState.refreshClient(props.parentId)
     await loadSecret()
   }
 }
 
-async function deleteSecret(clients: string[]) {
+async function deleteSecret() {
   // Delete the whole secret
   if (props.id) {
     const response = await SshecretAdmin.deleteSecretApiV1SecretsNameDelete({
@@ -78,14 +93,16 @@ async function deleteSecret(clients: string[]) {
     })
     try {
       assertSdkResponseOk(response)
-      for (const clientId in clients) {
-        await treeState.refreshClient(clientId)
-      }
       await treeState.getSecretGroups()
       treeState.bumpGroupRevision()
       router.go(-1)
     } catch (err) {
+      if (err instanceof ApiError) {
         alerts.showAlert(err.message, 'error', 'Error deleting secret')
+      } else {
+        console.error(err)
+        alerts.showAlert('Unexpected Error', 'error', 'Error deleting secret')
+      }
     }
   }
 }
@@ -103,7 +120,12 @@ async function addSecretToClient(clientId: string) {
       await treeState.refreshClient(clientId)
       await loadSecret()
     } catch (err) {
+      if (err instanceof ApiError) {
         alerts.showAlert(err.message, 'error', 'Failed to add secret to client')
+      } else {
+        console.error(err)
+        alerts.showAlert('Unexpected error', 'error', 'Failed to add secret to client')
+      }
     }
   }
 }
@@ -122,13 +144,21 @@ async function removeClientSecret(clientId: string) {
       await treeState.refreshClient(clientId)
       await loadSecret()
     } catch (err) {
+      if (err instanceof ApiError) {
         alerts.showAlert(err.message, 'error', 'Failed to remove secret from client')
+      } else {
+        console.error(err)
+        alerts.showAlert('Unexpected error', 'error', 'Failed to remove secret from client')
+      }
     }
   }
 }
 
-async function moveGroup(path) {
+async function moveGroup(path: string) {
   // Move secret to a group.
+  if (!secret.value) {
+    return
+  }
   const data = {
     secret_name: secret.value.name,
     group_path: path,
@@ -141,7 +171,12 @@ async function moveGroup(path) {
     treeState.bumpGroupRevision()
     alerts.showAlert('Secret moved', 'success')
   } catch (err) {
+    if (err instanceof ApiError) {
       alerts.showAlert(err.message, 'error', 'Failed to move secret to group')
+    } else {
+      console.error(err)
+      alerts.showAlert('Unexpected error', 'error', 'Failed to move secret to group')
+    }
   }
 }
 onMounted(loadSecret)

packages/sshecret-frontend/src/views/secrets/SecretPage.vue

@@ -27,6 +27,4 @@ function tabSelected(tabName: string) {
     router.push({ name: tabName })
   }
 }
-
-const routeKey = computed(() => route.name + '-' + (route.params.id ?? 'root'))
 </script>

packages/sshecret-frontend/src/views/secrets/SecretTreeList.vue

@@ -73,8 +73,8 @@ import { useAlertsStore } from '@/store/useAlertsStore'
 import { SshecretAdmin } from '@/client'
 import { SshecretObjectType } from '@/api/types'
 import { splitPath } from '@/api/paths'
-import { ValidationError } from '@/api/errors'
+import { ApiError, ValidationError } from '@/api/errors'
-import { assertSdkResponseOk } from '@/api/AssertSdkResponseOk'
+import { assertSdkResponseOk } from '@/api/assertSdkResponseOk'
 import SecretGroup from '@/components/secrets/SecretGroup.vue'
 import SecretGroupTreeItem from '@/components/secrets/SecretGroupTreeItem.vue'
 import SecretGroupTreeEntry from '@/components/secrets/SecretGroupTreeEntry.vue'
@@ -82,19 +82,20 @@ import AddGroup from '@/components/secrets/AddGroup.vue'
 import SecretForm from '@/components/secrets/SecretForm.vue'
 import Drawer from '@/components/common/Drawer.vue'
 import TreeItemSkeleton from '@/components/common/TreeItemSkeleton.vue'
+import type SlTreeItem from '@shoelace-style/shoelace/dist/components/tree-item/tree-item.component.js'
 
 const router = useRouter()
 const treeState = useTreeState()
 const alerts = useAlertsStore()
 
-const ungrouped = computed(() => treeState.secretGroups.ungrouped)
+const ungrouped = computed(() => treeState.secretGroups?.ungrouped)
-const secretGroups = computed(() => treeState.secretGroups.groups)
+const secretGroups = computed(() => treeState.secretGroups?.groups)
 
 const groupSelected = computed(() => {
   if (!treeState.selected) {
     return false
   }
-  if (treesState.selected.objectType === SshecretObject.SecretGroup) {
+  if (treeState.selected.objectType === SshecretObjectType.SecretGroup) {
     return true
   }
   return false
@@ -105,7 +106,7 @@ const createDrawerKey = ref(0)
 const createGroupDrawer = ref<boolean>(false)
 const createSecretDrawer = ref<boolean>(false)
 
-const createErrors = ref([])
+const createErrors = ref<any[]>([])
 
 function cancelCreateGroup() {
   createGroupDrawer.value = false
@@ -123,7 +124,6 @@ const createSecretParent = computed(() => {
   if (treeState.selected && treeState.selected.objectType === SshecretObjectType.SecretGroup) {
     return treeState.selected.id
   }
-  return null
 })
 
 async function loadGroups() {
@@ -132,7 +132,7 @@ async function loadGroups() {
 
 const drawerKeyName = computed(() => `${currentPath.value}_${drawerKey.value}`)
 
-async function itemSelected(event: Event) {
+function itemSelected(event: CustomEvent<{ selection: SlTreeItem[] }>) {
   if (event.detail.selection.length == 0) {
     treeState.unselect()
   } else {
@@ -140,13 +140,15 @@ async function itemSelected(event: Event) {
     const childType = el.dataset.type
     if (childType === 'secret') {
       const secretName = el.dataset.name
-      treeState.selectSecret(secretName, null)
+      if (secretName) {
+        treeState.selectSecret(secretName)
         router.push({ name: 'Secret', params: { id: secretName } })
+      }
     } else if (childType === 'group') {
       const groupPath = el.dataset.groupPath
       if (groupPath === 'ungrouped') {
         treeState.unselect()
-      } else {
+      } else if (groupPath) {
         const groupPathElements = splitPath(groupPath)
         treeState.selectGroup(groupPath)
         router.push({ name: 'Group', params: { groupPath: groupPathElements } })
@@ -195,9 +197,11 @@ async function createSecret(secretCreate: SecretCreate) {
   } catch (err) {
     if (err instanceof ValidationError) {
       createErrors.value = err.errors
-    } else {
+    } else if (err instanceof ApiError) {
       const errorMessage = err.message ?? 'Unknown error'
       alerts.showAlert(`Error from backend: ${errorMessage}`, 'error')
+    } else {
+      alerts.showAlert(`Error from backend: ${err}`, 'error')
     }
   }
 }

packages/sshecret-frontend/vite.config.ts

@@ -5,10 +5,12 @@ import tailwindcss from '@tailwindcss/vite'
 import vue from '@vitejs/plugin-vue'
 import vueDevTools from 'vite-plugin-vue-devtools'
 
+
 // https://vite.dev/config/
 /** @type {import('vite').UserConfig} */
 export default defineConfig({
   envPrefix: "SSHECRET_FRONTEND_",
+  base: process.env.NODE_ENV === "production" ? "/admin/" : "/",
   plugins: [
     vue({
       template: {