Implement routes and transitions

2025-07-14 12:08:09 +02:00
parent 736dad748b
commit 5ac4c987d3
27 changed files with 860 additions and 376 deletions
--- a/packages/sshecret-frontend/src/api/paths.ts
+++ b/packages/sshecret-frontend/src/api/paths.ts
@ -0,0 +1,23 @@
+
+/*
+ * Split a path like /foo/bar/baz into ['foo', 'bar', 'baz']
+ */
+export function splitPath(path: string): string[] {
+  if (path.startsWith('/')) {
+    const newPath = path.substring(1)
+    return newPath.split("/")
+  }
+  return path.split("/")
+}
+
+/*
+ * Reassemble a path array like ['foo', 'bar', 'baz'] into /foo/bar/baz
+ */
+export function reassemblePath(segments: string[]): string {
+  const elements = segments.join('/')
+  return '/' + elements
+}
+
+export function idKey(id: string): string {
+  return 'id:' + id
+}
--- a/packages/sshecret-frontend/src/api/types.ts
+++ b/packages/sshecret-frontend/src/api/types.ts
@ -8,6 +8,7 @@ export enum SshecretObjectType {
  Client = "Client",
  ClientSecret = "ClientSecret",
  SecretGroup = "SecretGroup",
+  Audit = "Audit",  // Not technically an object, but added for navigational purposes.
 }

 export type SshecretObject = {
@ -71,3 +72,8 @@ export const SUBSYSTEM = [
  'sshd',
  'backend',
 ] as const
+
+export interface PageState {
+  activePane: 'clients' | 'secrets' | 'audit',
+  selectedObject?: string,
+}
--- a/packages/sshecret-frontend/src/components/audit/AuditSkeleton.vue
+++ b/packages/sshecret-frontend/src/components/audit/AuditSkeleton.vue
@ -0,0 +1,108 @@
+<template>
+  <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-600">
+    <thead class="bg-gray-50 dark:bg-gray-700">
+      <tr>
+        <th
+          scope="col"
+          class="w-[1rem] p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
+        >
+          &nbsp;
+        </th>
+        <th
+          scope="col"
+          class="p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
+        >
+          <sl-skeleton class="headerSkeleton"></sl-skeleton>
+        </th>
+        <th
+          scope="col"
+          class="p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
+        >
+          <sl-skeleton class="headerSkeleton"></sl-skeleton>
+        </th>
+        <th
+          scope="col"
+          class="p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
+        >
+          <sl-skeleton class="headerSkeleton"></sl-skeleton>
+        </th>
+        <th
+          scope="col"
+          class="p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
+        >
+          <sl-skeleton class="headerSkeleton"></sl-skeleton>
+        </th>
+        <th
+          scope="col"
+          class="p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
+        >
+          <sl-skeleton class="headerSkeleton"></sl-skeleton>
+        </th>
+        <th
+          scope="col"
+          class="p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
+        >
+          <sl-skeleton class="headerSkeleton"></sl-skeleton>
+        </th>
+        <th
+          scope="col"
+          class="p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
+        >
+          <sl-skeleton class="headerSkeleton"></sl-skeleton>
+        </th>
+      </tr>
+    </thead>
+    <tbody class="bg-white dark:bg-gray-800">
+      <template v-for="row in 25">
+        <tr class="auditRow hover:bg-gray-100 dark:hover:bg-gray-700">
+          <td class="w-[1rem]">
+            <sl-skeleton class="iconSkeleton"></sl-skeleton>
+          </td>
+          <template v-for="col in 7">
+            <td><sl-skeleton effect="pulse" class="tableSkeleton"></sl-skeleton></td>
+          </template>
+        </tr>
+      </template>
+    </tbody>
+  </table>
+  <div
+    class="sticky bottom-0 right-0 items-center w-full p-4 bg-white border-t border-gray-200 sm:flex sm:justify-between dark:bg-gray-800 dark:border-gray-700"
+  >
+    <div class="flex items-center mb-4 sm:mb-0">
+      <span class="text-sm font-normal text-gray-500 dark:text-gray-400">
+        <sl-skeleton effect="pulse" style="width: 10rem"></sl-skeleton>
+      </span>
+    </div>
+
+    <div class="flex items-center space-x-3">
+      <div class="flex space-x-1">
+        <sl-skeleton effect="pulse" style="width: 2rem"></sl-skeleton>
+        <sl-skeleton effect="pulse" style="width: 1rem"></sl-skeleton>
+        <sl-skeleton effect="pulse" style="width: 15rem"></sl-skeleton>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+tr.auditRow {
+  background-color: var(--color-white);
+}
+tr.auditRow:nth-child(even) {
+  background-color: var(--color-gray-50);
+}
+sl-skeleton.tableSkeleton {
+  height: 1rem;
+  margin: 1rem;
+}
+sl-skeleton.headerSkeleton {
+  height: 1rem;
+  margin: 1rem;
+  width: 50%;
+}
+
+sl-skeleton.iconSkeleton {
+  margin: 1em;
+  width: 1em;
+}
+</style>
--- a/packages/sshecret-frontend/src/components/audit/AuditTable.vue
+++ b/packages/sshecret-frontend/src/components/audit/AuditTable.vue
@ -1,5 +1,6 @@
 <template>
-  <table v-if="auditEntries" class="min-w-full divide-y divide-gray-200 dark:divide-gray-600">
+  <template v-if="auditEntries">
+    <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-600">
      <thead class="bg-gray-50 dark:bg-gray-700">
        <tr>
          <th
@ -153,7 +154,10 @@
      <div class="flex items-center mb-4 sm:mb-0">
        <span class="text-sm font-normal text-gray-500 dark:text-gray-400">
          Showing
-        <span class="font-semibold text-gray-900 dark:text-white" v-if="totalEntries < lastResult">
+          <span
+            class="font-semibold text-gray-900 dark:text-white"
+            v-if="totalEntries < lastResult"
+          >
            {{ firstResult }}-{{ TotalEntries }}
          </span>
          <span class="font-semibold text-gray-900 dark:text-white" v-else>
@ -177,6 +181,10 @@
        </div>
      </div>
    </div>
+  </template>
+  <template v-else>
+    <AuditSkeleton />
+  </template>
 </template>
 <script setup lang="ts">
 import { computed, ref, reactive, onMounted, watch, toRef } from 'vue'
@ -186,6 +194,7 @@ import { SshecretAdmin, GetAuditLogApiV1AuditGetData } from '@/client'
 import type { AuditListResult } from '@/client'
 import type { AuditFilter } from '@/api/types'
 import PageNumbers from '@/components/common/PageNumbers.vue'
+import AuditSkeleton from '@/components/audit/AuditSkeleton.vue'

 const props = defineProps<{ auditFilter: AuditFilter }>()

--- a/packages/sshecret-frontend/src/components/clients/ClientSecretTreeItem.vue
+++ b/packages/sshecret-frontend/src/components/clients/ClientSecretTreeItem.vue
@ -1,5 +1,5 @@
 <template>
-  <sl-tree-item :id="itemId" data-type="secret" :data-name="name" :data-parent-id="parent_id">
+  <sl-tree-item :id="itemId" data-type="secret" :data-name="name" :data-parent-id="props.parentId">
    <sl-icon name="file-lock2"> </sl-icon>
    <span class="px-2">{{ name }}</span>
  </sl-tree-item>
@ -12,5 +12,5 @@ const props = defineProps<{
  name: string
  selected?: boolean
 }>()
-const itemId = computed(() => `client-${props.parent_id}-secret-${props.name}`)
+const itemId = computed(() => `client-${props.parentId}-secret-${props.name}`)
 </script>
--- a/packages/sshecret-frontend/src/components/clients/ClientSkeleton.vue
+++ b/packages/sshecret-frontend/src/components/clients/ClientSkeleton.vue
@ -69,9 +69,3 @@ p sl-skeleton {
  width: 10rem;
 }
 </style>
-
-<script setup lang="ts">
-import '@shoelace-style/shoelace/dist/components/tab-group/tab-group.js'
-import '@shoelace-style/shoelace/dist/components/tab/tab.js'
-import '@shoelace-style/shoelace/dist/components/skeleton/skeleton.js'
-</script>
--- a/packages/sshecret-frontend/src/components/common/DetailPage.vue
+++ b/packages/sshecret-frontend/src/components/common/DetailPage.vue
@ -0,0 +1,15 @@
+<template></template>
+<script setup lang="ts">
+/*
+     This component is responsible for loading the correct object based on props and state.
+  */
+
+import AuditView from '@/views/audit/AuditView.vue'
+import ClientDetailView from '@/views/clients/ClientDetailView.vue'
+import SecretDetailView from '@/views/secrets/SecretDetailView.vue'
+import SecretGroupDetailView from '@/views/secrets/SecretGroupDetailView.vue'
+import { SshecretObjectType } from '@/api/types'
+import { useAuditFilterState } from '@/store/useAuditFilterState'
+import { useTreeState } from '@/store/useTreeState'
+import { useAlertsStore } from '@/store/useAlertsStore'
+</script>
--- a/packages/sshecret-frontend/src/components/common/GenericDetail.vue
+++ b/packages/sshecret-frontend/src/components/common/GenericDetail.vue
@ -0,0 +1,3 @@
+<template>
+  <p class="p-4 text-gray-500 dark:text-gray-200">Select an item to view details</p>
+</template>
--- a/packages/sshecret-frontend/src/components/common/MasterDetailWorkspace.vue
+++ b/packages/sshecret-frontend/src/components/common/MasterDetailWorkspace.vue
@ -0,0 +1,109 @@
+<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>
--- a/packages/sshecret-frontend/src/components/common/MasterTabs.vue
+++ b/packages/sshecret-frontend/src/components/common/MasterTabs.vue
@ -0,0 +1,36 @@
+<template>
+  <sl-tab-group
+    id="sideTabs"
+    class="flex flex-col flex-1 h-full overflow-hidden master-pane-tabs"
+    @sl-tab-show="emit('change', $event.detail.name)"
+  >
+    <sl-tab slot="nav" panel="clients" :active="selectedTab === 'clients'">Clients</sl-tab>
+    <sl-tab slot="nav" panel="secrets" :active="selectedTab === 'secrets'">Secrets</sl-tab>
+    <sl-tab slot="nav" panel="audit" :active="selectedTab === 'audit'">Audit</sl-tab>
+    <sl-tab-panel name="clients">
+      <slot name="clients">
+        <ClientTreeList />
+      </slot>
+    </sl-tab-panel>
+    <sl-tab-panel name="secrets">
+      <slot name="secrets">
+        <SecretTreeList />
+      </slot>
+    </sl-tab-panel>
+    <sl-tab-panel name="audit">
+      <slot name="audit">
+        <AuditFilters />
+      </slot>
+    </sl-tab-panel>
+  </sl-tab-group>
+</template>
+<script setup lang="ts">
+import { toRef } from 'vue'
+import ClientTreeList from '@/views/clients/ClientTreeList.vue'
+import SecretTreeList from '@/views/secrets/SecretTreeList.vue'
+import AuditFilters from '@/components/audit/AuditFilters.vue'
+
+const props = defineProps<{ selectedTab: string }>()
+const selectedTab = toRef(() => props.selectedTab)
+const emit = defineEmits<{ (e: 'change', data: string): void }>()
+</script>
--- a/packages/sshecret-frontend/src/components/common/TreeItemSkeleton.vue
+++ b/packages/sshecret-frontend/src/components/common/TreeItemSkeleton.vue
@ -0,0 +1,15 @@
+<template>
+  <sl-tree-item>
+    <sl-skeleton effect="sheen" class="tree-icon-skeleton"></sl-skeleton>
+    <sl-skeleton effect="sheen" class="tree-item-skeleton"></sl-skeleton>
+  </sl-tree-item>
+</template>
+<style>
+sl-skeleton.tree-icon-skeleton {
+  width: 1rem;
+  margin-right: 1rem;
+}
+sl-skeleton.tree-item-skeleton {
+  width: 6rem;
+}
+</style>
--- a/packages/sshecret-frontend/src/components/secrets/SecretSkeleton.vue
+++ b/packages/sshecret-frontend/src/components/secrets/SecretSkeleton.vue
@ -1,43 +1,71 @@
 <template>
-  <div
-    role="status"
-    class="w-full p-4 space-y-4 border border-gray-200 divide-y divide-gray-200 rounded-sm shadow-sm animate-pulse dark:divide-gray-700 md:p-6 dark:border-gray-700"
-  >
-    <div class="flex items-center justify-between">
-      <div>
-        <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24 mb-2.5"></div>
-        <div class="w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700"></div>
+  <sl-tab-group>
+    <sl-tab slot="nav" panel="skeleton"><sl-skeleton></sl-skeleton></sl-tab>
+
+    <sl-tab-panel name="skeleton">
+      <div id="client_details">
+        <div class="w-full p-2">
+          <div class="px-4 sm:px-0">
+            <h3 class="text-base/7 font-semibold text-gray-900 dark:text-gray-50">
+              <sl-skeleton effect="pulse"></sl-skeleton>
+            </h3>
+            <p class="mt-1 max-w-2xl text-sm/6 text-gray-500 dark:text-gray-100">
+              <sl-skeleton effect="pulse"></sl-skeleton>
+            </p>
          </div>
-      <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12"></div>
+          <div class="mt-6 border-t border-gray-100">
+            <dl class="divide-y divide-gray-100">
+              <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                <dt class="text-sm/6 font-medium text-gray-900 dark:text-gray-200">
+                  <sl-skeleton effect="pulse"></sl-skeleton>
+                </dt>
+                <dd class="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0 dark:text-gray-300">
+                  <sl-skeleton effect="pulse"></sl-skeleton>
+                </dd>
              </div>
-    <div class="flex items-center justify-between pt-4">
-      <div>
-        <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24 mb-2.5"></div>
-        <div class="w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700"></div>
+              <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                <dt class="text-sm/6 font-medium text-gray-900 dark:text-gray-200">
+                  <sl-skeleton effect="pulse"></sl-skeleton>
+                </dt>
+                <dd class="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0 dark:text-gray-300">
+                  <sl-skeleton effect="pulse"></sl-skeleton>
+                </dd>
              </div>
-      <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12"></div>
+
+              <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                <dt class="text-sm/6 font-medium text-gray-900 dark:text-gray-200">
+                  <sl-skeleton effect="pulse"></sl-skeleton>
+                </dt>
+                <dd class="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0 dark:text-gray-300">
+                  <sl-skeleton effect="pulse"></sl-skeleton>
+                </dd>
              </div>
-    <div class="flex items-center justify-between pt-4">
-      <div>
-        <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24 mb-2.5"></div>
-        <div class="w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700"></div>
+
+              <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                <dt class="text-sm/6 font-medium text-gray-900 dark:text-gray-200">
+                  <sl-skeleton effect="pulse"></sl-skeleton>
+                </dt>
+                <dd class="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0 dark:text-gray-300">
+                  <sl-skeleton effect="pulse"></sl-skeleton>
+                </dd>
              </div>
-      <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12"></div>
+            </dl>
          </div>
-    <div class="flex items-center justify-between pt-4">
-      <div>
-        <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24 mb-2.5"></div>
-        <div class="w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700"></div>
        </div>
-      <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12"></div>
-    </div>
-    <div class="flex items-center justify-between pt-4">
-      <div>
-        <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24 mb-2.5"></div>
-        <div class="w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700"></div>
-      </div>
-      <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12"></div>
-    </div>
-    <span class="sr-only">Loading...</span>
      </div>
+    </sl-tab-panel>
+  </sl-tab-group>
 </template>
+
+<style scoped>
+  sl-tab sl-skeleton {
+    width: 30%;
+  }
+  h3 sl-skeleton {
+    width: 15rem;
+  }
+
+  p sl-skeleton {
+    width: 10rem;
+  }
+</style>
--- a/packages/sshecret-frontend/src/main.ts
+++ b/packages/sshecret-frontend/src/main.ts
@ -30,6 +30,8 @@ import '@shoelace-style/shoelace/dist/components/option/option.js'
 import '@shoelace-style/shoelace/dist/components/range/range.js'
 import '@shoelace-style/shoelace/dist/components/select/select.js'
 import '@shoelace-style/shoelace/dist/components/skeleton/skeleton.js'
+import '@shoelace-style/shoelace/dist/components/spinner/spinner.js'
+
 import '@shoelace-style/shoelace/dist/components/tab-group/tab-group.js'
 import '@shoelace-style/shoelace/dist/components/tab-panel/tab-panel.js'
 import '@shoelace-style/shoelace/dist/components/tab/tab.js'
--- a/packages/sshecret-frontend/src/router/index.ts
+++ b/packages/sshecret-frontend/src/router/index.ts
@ -2,8 +2,15 @@ import { createRouter, createWebHistory } from 'vue-router'

 import LoginPage from '@/views/LoginPage.vue'
 import WorkspaceView from '@/views/WorkspaceView.vue'
-import AuditView from '@/views/audit/AuditView.vue'
+import AuditPage from '@/views/audit/AuditPage.vue'
+import ClientPage from '@/views/clients/ClientPage.vue'
+import SecretPage from '@/views/secrets/SecretPage.vue'
+import ClientDetailPage from '@/views/clients/ClientDetailPage.vue'
+import SecretDetailView from '@/views/secrets/SecretDetailView.vue'
+import SecretGroupDetailView from '@/views/secrets/SecretGroupDetailView.vue'
+import GenericDetail from '@/components/common/GenericDetail.vue'
 import { useAuthTokenStore } from '@/store/auth'
+import { reassemblePath } from '@/api/paths'


 const routes = [
@ -15,7 +22,55 @@ const routes = [
    meta: { requiresAuth: true },
  },
  {
-    path: '/audit', name: 'audit', component: AuditView, meta: { requiresAuth: true },
+    path: '/audit', name: 'audit', component: AuditPage, meta: { requiresAuth: true }
+  },
+  {
+    path: '/clients', component: ClientPage, meta: { requiresAuth: true }, children: [
+      {
+        path: '', component: GenericDetail, name: 'clients', meta: { requiresAuth: true },
+      },
+      {
+        name: 'Client',
+        path: ':id',
+        component: ClientDetailPage,
+        props: true,
+        meta: { requiresAuth: true },
+
+      },
+      {
+        name: 'ClientSecret',
+        path: ':parentId/:id',
+        component: SecretDetailView,
+        props: true,
+        meta: { requiresAuth: true },
+      },
+    ]
+  },
+  {
+    path: '/secrets', component: SecretPage, meta: { requiresAuth: true }, children: [
+      {
+        path: '', component: GenericDetail, name: 'secrets',
+        meta: { requiresAuth: true },
+
+      },
+      {
+        name: 'Secret',
+        path: ':id',
+        component: SecretDetailView,
+        props: true,
+        meta: { requiresAuth: true },
+
+      },
+      {
+        name: 'Group',
+        path: '/group/:groupPath(.*)*',
+        component: SecretGroupDetailView,
+        props: route => ({
+          groupPath: Array.isArray(route.params.groupPath) ? reassemblePath(route.params.groupPath) : route.params.groupPath || ''
+        }),
+        meta: { requiresAuth: true },
+      }
+    ],
  }
 ]

--- a/packages/sshecret-frontend/src/store/useTreeState.ts
+++ b/packages/sshecret-frontend/src/store/useTreeState.ts
@ -20,6 +20,22 @@ export const useTreeState = defineStore('treeState', {
    selectClient(id: string) {
      this.selected = { objectType: SshecretObjectType.Client, id: id }
    },
+    /*
+     * Fetch and select a specific client.
+     */
+    async loadClientName(name: string) {
+      const existing = this.clients?.clients.find(c => c.name === name)
+      if (existing) {
+        this.selected = { objectType: SshecretObjectType.Client, id: existing.id, param: name }
+      } else {
+        const result = await this.queryClients(name, 0, 1)
+        if (result === 1 && this.clients) {
+          this.selected = { objectType: SshecretObjectType.Client, id: this.clients.clients[0].id, param: name }
+        } else {
+          throw new Error("The selected client could not be found.")
+        }
+      }
+    },
    selectSecret(name: string, parent?: string) {
      this.selected = { objectType: SshecretObjectType.ClientSecret, id: name }
      if (parent) {
--- a/packages/sshecret-frontend/src/views/WorkspaceView.vue
+++ b/packages/sshecret-frontend/src/views/WorkspaceView.vue
@ -1,93 +1,6 @@
 <template>
-  <MasterDetail>
-    <template #master>
-      <sl-tab-group
-        id="sideTabs"
-        class="flex flex-col flex-1 h-full overflow-hidden master-pane-tabs"
-        @sl-tab-show="tabSelected($event)"
-      >
-        <sl-tab slot="nav" panel="clients">Clients</sl-tab>
-        <sl-tab slot="nav" panel="secrets">Secrets</sl-tab>
-        <sl-tab slot="nav" panel="audit">Audit</sl-tab>
-        <sl-tab-panel name="clients">
-          <ClientTreeList />
-        </sl-tab-panel>
-        <sl-tab-panel name="secrets">
-          <SecretTreeList />
-        </sl-tab-panel>
-        <sl-tab-panel name="audit">
-          <AuditFilters />
-        </sl-tab-panel>
-      </sl-tab-group>
-    </template>
-    <template #detail v-if="showAudit">
-      <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>
+  <MasterDetailWorkspace />
 </template>
 <script setup lang="ts">
-import { ref } from 'vue'
-import AuditView from '@/views/audit/AuditView.vue'
-import MasterDetail from '@/views/layout/MasterDetail.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 { SshecretObjectType } from '@/api/types'
-import { useAuditFilterState } from '@/store/useAuditFilterState'
-import { useTreeState } from '@/store/useTreeState'
-
-const treeState = useTreeState()
-
-const auditFilterState = useAuditFilterState()
-
-const showAudit = ref<{ boolean }>()
-
-function tabSelected(tab) {
-  const tabName = tab.detail.name
-  if (tabName == 'audit') {
-    console.log('Showing audit')
-    treeState.showAudit = true
-    showAudit.value = true
-  } else {
-    treeState.showAudit = false
-    showAudit.value = false
-  }
-}
+import MasterDetailWorkspace from '@/components/common/MasterDetailWorkspace.vue'
 </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>
--- a/packages/sshecret-frontend/src/views/audit/AuditPage.vue
+++ b/packages/sshecret-frontend/src/views/audit/AuditPage.vue
@ -0,0 +1,29 @@
+<template>
+  <MasterDetail>
+    <template #master>
+      <MasterTabs selectedTab="audit" @change="tabSelected" />
+    </template>
+    <template #detail>
+      <AuditView />
+    </template>
+  </MasterDetail>
+</template>
+<script setup lang="ts">
+import { computed } from 'vue'
+import AuditView from '@/views/audit/AuditView.vue'
+import MasterDetail from '@/views/layout/MasterDetail.vue'
+import MasterTabs from '@/components/common/MasterTabs.vue'
+import { useRouter, useRoute } from 'vue-router'
+import { RouterView } from 'vue-router'
+
+const router = useRouter()
+const route = useRoute()
+
+function tabSelected(tabName: string) {
+  if (tabName !== 'audit') {
+    router.push({ name: tabName })
+  }
+}
+
+const routeKey = computed(() => route.name + '-' + (route.params.id ?? 'root'))
+</script>
--- a/packages/sshecret-frontend/src/views/audit/AuditView.vue
+++ b/packages/sshecret-frontend/src/views/audit/AuditView.vue
@ -2,10 +2,14 @@
  <template v-if="loaded">
    <AuditTable :auditFilter="auditFilter" />
  </template>
+  <template v-else>
+    <AuditSkeleton />
+  </template>
 </template>
 <script setup lang="ts">
 import { ref, watch, onMounted } from 'vue'
 import AuditTable from '@/components/audit/AuditTable.vue'
+import AuditSkeleton from '@/components/audit/AuditSkeleton.vue'
 import type { AuditFilter } from '@/api/types'
 import type { GetAuditLogApiV1AuditGetData } from '@/client'
 import { useAuditFilterState } from '@/store/useAuditFilterState'
@ -13,10 +17,10 @@ const auditFilterState = useAuditFilterState()
 const auditFilter = ref<GetAuditLogApiV1AuditGetData['query']>({})

 watch(auditFilterState, () => (auditFilter.value = auditFilterState.getFilter))
-const loaded = ref<{ boolean }>()
+const loaded = ref<{ boolean }>(false)

 onMounted(() => {
-  loaded.value = true
  auditFilter.value = auditFilterState.getFilter
+  loaded.value = true
 })
 </script>
--- a/packages/sshecret-frontend/src/views/clients/ClientDetailPage.vue
+++ b/packages/sshecret-frontend/src/views/clients/ClientDetailPage.vue
@ -0,0 +1,24 @@
+<template>
+  <ClientDetailView :id="clientId" :parentId="parentId" @clientDeleted="onClientDelete" />
+</template>
+<script setup lang="ts">
+import { toRef } from 'vue'
+import ClientDetailView from '@/views/clients/ClientDetailView.vue'
+import { useRouter, useRoute } from 'vue-router'
+import { useTreeState } from '@/store/useTreeState'
+
+const props = defineProps<{ id: string | null; parentId: string | null }>()
+const router = useRouter()
+const clientId = toRef(() => props.id)
+const parentId = toRef(() => props.parentId)
+
+const treeState = useTreeState()
+
+async function onClientDelete(id: string) {
+  // React when a client is deleted
+
+  console.log('Client deleted')
+  await treeState.loadClients()
+  router.push({ name: 'clients' })
+}
+</script>
--- a/packages/sshecret-frontend/src/views/clients/ClientDetailView.vue
+++ b/packages/sshecret-frontend/src/views/clients/ClientDetailView.vue
@ -1,44 +1,54 @@
 <template>
-  <ClientDetail :client="client" @update="updateClient" @deleted="deleteClient" v-if="client" />
+  <ClientDetail
+    :client="client"
+    @update="updateClient"
+    @deleted="deleteClient"
+    v-if="client"
+    :key="clientId"
+  />
  <ClientSkeleton v-else />
 </template>

 <script setup lang="ts">
-import { ref, watch, onMounted } from 'vue'
+import { ref, toRef, watch, onMounted } from 'vue'
 import ClientSkeleton from '@/components/clients/ClientSkeleton.vue'
 import ClientDetail from '@/components/clients/ClientDetail.vue'
 import type { ClientCreate } from '@/client'
+import { idKey } from '@/api/paths'
 import { SshecretAdmin } from '@/client'
 import { useTreeState } from '@/store/useTreeState'

-const props = defineProps<{ clientId: string | null }>()
+const props = defineProps<{ id: string | null; parentId: string | null }>()
+
+const clientId = toRef(() => props.id)

 const client = ref<Client>()

 const treeState = useTreeState()

+const emit = defineEmits<{ (e: 'clientDeleted', data: string): void }>()
+
 async function loadClient() {
-  if (!props.clientId) return
-  client.value = await treeState.getClient()
+  console.log('loadClient called: ', props.id)
+  if (!props.id) return
+  client.value = await treeState.getClient(props.id)
 }

-async function deleteClient(clientId: string) {
-  console.log(`Delete ${localClient.value.id}`)
+async function deleteClient(deleteId: string) {
  const response = await SshecretAdmin.deleteClientApiV1ClientsIdDelete({
-    path: { id: clientId },
+    path: { id: idKey(deleteId) },
  })
  if (response.status !== 200) {
    console.error(response)
    return
  }

-  emit('clientDeleted', clientId)
-  props.clientId = null
+  emit('clientDeleted', deleteId)
 }

 async function updateClient(updated: ClientCreate) {
  const response = await SshecretAdmin.updateClientApiV1ClientsIdPut({
-    path: { id: localClient.value.id },
+    path: { id: idKey(localClient.value.id) },
    body: data,
  })
  client.value = response.data
@ -47,7 +57,7 @@ async function updateClient(updated: ClientCreate) {
 onMounted(loadClient)

 watch(
-  () => props.client_id,
+  () => props.id,
  () => loadClient(),
  { immediate: true },
 )
--- a/packages/sshecret-frontend/src/views/clients/ClientPage.vue
+++ b/packages/sshecret-frontend/src/views/clients/ClientPage.vue
@ -0,0 +1,29 @@
+<template>
+  <MasterDetail>
+    <template #master>
+      <MasterTabs selectedTab="clients" @change="tabSelected" />
+    </template>
+    <template #detail>
+      <RouterView :key="routeKey" />
+    </template>
+  </MasterDetail>
+</template>
+<script setup lang="ts">
+import { computed } from 'vue'
+import MasterDetail from '@/views/layout/MasterDetail.vue'
+import MasterTabs from '@/components/common/MasterTabs.vue'
+import ClientDetailView from '@/views/clients/ClientDetailView.vue'
+import { useRouter, useRoute } from 'vue-router'
+import { RouterView } from 'vue-router'
+
+const router = useRouter()
+const route = useRoute()
+
+function tabSelected(tabName: string) {
+  if (tabName !== 'clients') {
+    router.push({ name: tabName })
+  }
+}
+
+const routeKey = computed(() => route.name + '-' + (route.params.id ?? 'root'))
+</script>
--- a/packages/sshecret-frontend/src/views/clients/ClientTreeList.vue
+++ b/packages/sshecret-frontend/src/views/clients/ClientTreeList.vue
@ -44,6 +44,11 @@
            </ClientTreeItem>
          </template>
        </sl-tree>
+        <sl-tree class="w-full" v-else>
+          <template v-for="n in 20">
+            <TreeItemSkeleton />
+          </template>
+        </sl-tree>
      </div>
      <div
        class="shrink-0 mt-4 pt-2 border-t border-gray-100 dark:border-gray-700 bg-white dark:bg-gray-800"
@ -88,7 +93,7 @@
 </template>

 <script setup lang="ts">
-import { computed, ref, reactive, onMounted, watch } from 'vue'
+import { computed, ref, reactive, toRef, onMounted, watch, nextTick } from 'vue'
 import type { Ref } from 'vue'

 import { usePagination } from '@/composables/usePagination'
@ -98,11 +103,13 @@ import { SshecretAdmin } from '@/client/sdk.gen'
 import type { Client, ClientCreate } from '@/client/types.gen'

 import { useTreeState } from '@/store/useTreeState'
+import { useRouter, useRoute } from 'vue-router'

 import ClientTreeItem from '@/components/clients/ClientTreeItem.vue'
 import ClientSecretTreeItem from '@/components/clients/ClientSecretTreeItem.vue'
 import ClientForm from '@/components/clients/ClientForm.vue'
 import PageNumbers from '@/components/common/PageNumbers.vue'
+import TreeItemSkeleton from '@/components/common/TreeItemSkeleton.vue'

 import { useDebounce } from '@/composables/useDebounce'
 const treeState = useTreeState()
@ -117,7 +124,15 @@ const selectedSecret = ref<string | null>(null)
 const createFormKey = ref<number>(0)
 const createDrawerOpen = ref<boolean>(false)

-const clientQuery = ref('')
+const props = defineProps({
+  loadClient: {
+    type: String,
+    default: '',
+  },
+})
+const router = useRouter()
+
+const clientQuery = toRef(() => props.loadClient)

 const debouncedQuery = useDebounce(clientQuery, 300)

@ -134,49 +149,43 @@ async function loadClients() {

 function updateClient(updated: Client) {
  const index = clients.value.findIndex((c) => c.name === updated.name)
-  console.log(`UpdateClient fired: ${updated.name} => ${index}`)
  if (index >= 0) {
    clients.value[index] = updated
  }
 }
-
 function itemSelected(event: Event) {
-  if (event.detail.selection.length == 0) {
-    treeState.unselect()
-  } else {
+  if (event.detail.selection) {
    const el = event.detail.selection[0] as HTMLElement
    const childType = el.dataset.type
    if (childType === 'client') {
-      const clientId = el.dataset.clientId
-      treeState.selectClient(clientId)
-    } else if (childType == 'secret') {
-      const secretName = el.dataset.name
+      router.push({ name: 'Client', params: { id: el.dataset.clientId } })
+    } else {
+      const secretId = el.dataset.name
      const parentId = el.dataset.parentId
-      treeState.selectSecret(secretName, parentId)
+      console.log(el.dataset)
+      router.push({
+        name: 'ClientSecret',
+        params: { parentId: el.dataset.parentId, id: el.dataset.name },
+      })
    }
  }
 }

 async function createClient(data: ClientCreate) {
  const response = await SshecretAdmin.createClientApiV1ClientsPost({ body: data })
-  console.log(response.data)
  clients.value.unshift(response.data)
  totalClients.value += 1
  createDrawerOpen.value = false
  createFormKey.value += 1
-  treeState.value.selected = true
-  treeState.value.item_type = 'secret'
-  treeState.value.client = response.data
+  treeState.selectClient(response.data.id)
+  router.push({ name: 'Client', params: { id: response.data.id } })
 }

 async function clientDeleted(id: string) {
  const index = clients.value.findIndex((c) => c.id === id)
-  console.log(`Client Deleted event received: ID: ${id} => ${index}`)
  if (index >= 0) {
    clients.value.splice(index, 1)
-    treeState.value.selected = false
-    treeState.value.item_type = null
-    treeState.value.client = null
+    treeState.unselect()
    await loadClients()
  }
 }
@ -196,7 +205,6 @@ async function clearSearch() {

 // Watch the search query
 watch(debouncedQuery, async () => {
-  console.log('Handling search event.')
  await handleSearchEvent()
 })

--- a/packages/sshecret-frontend/src/views/layout/MasterDetail.vue
+++ b/packages/sshecret-frontend/src/views/layout/MasterDetail.vue
@ -26,7 +26,7 @@
      <section id="detail-pane" class="flex-1 flex overflow-y-auto bg-white p-4 dark:bg-gray-800">
        <div class="flex flex-col w-full">
          <slot name="detail">
-            <p class="p-4 text-gray-500 dark:text-gray-200">Select an item to view details</p>
+            <GenericDetail />
          </slot>
        </div>
      </section>
@ -38,6 +38,7 @@
 import { ref } from 'vue'
 import '@shoelace-style/shoelace/dist/components/icon/icon.js'
 import Navbar from '@/components/layout/Navbar.vue'
+import GenericDetail from '@/components/common/GenericDetail.vue'

 const masterHidden = ref(true)
 </script>
--- a/packages/sshecret-frontend/src/views/secrets/SecretDetailView.vue
+++ b/packages/sshecret-frontend/src/views/secrets/SecretDetailView.vue
@ -1,4 +1,5 @@
 <template>
+  <div>
    <SecretDetail
      :secret="secret"
      @update="updateSecretValue"
@ -8,6 +9,7 @@
      v-if="secret"
    />
    <SecretSkeleton v-else />
+  </div>
 </template>
 <script setup lang="ts">
 import { ref, watch, onMounted } from 'vue'
@ -18,21 +20,21 @@ import { useTreeState } from '@/store/useTreeState'
 import type { SecretView } from '@/client/types.gen.ts'
 import { SshecretAdmin } from '@/client'

-const props = defineProps<{ secretName: string | null; parentId: string | null }>()
+const props = defineProps<{ id: string | null; parentId: string | null }>()
 const secret = ref<SecretView>()

 const treeState = useTreeState()

 async function loadSecret() {
-  if (!props.secretName) return
-  secret.value = await treeState.getSecret(props.secretName)
+  if (!props.id) return
+  secret.value = await treeState.getSecret(props.id)
 }

 async function updateSecretValue(value: string) {
  // Update a secret value
  await SshecretAdmin.updateSecretApiV1SecretsNamePut({
    path: {
-      name: props.secretName,
+      name: props.id,
    },
    body: {
      value: value,
@ -46,8 +48,8 @@ async function updateSecretValue(value: string) {

 async function deleteSecret(clients: string[]) {
  // Delete the whole secret
-  if (props.secretName) {
-    await SshecretAdmin.deleteSecretApiV1SecretsNameDelete({ path: { name: props.secretName } })
+  if (props.id) {
+    await SshecretAdmin.deleteSecretApiV1SecretsNameDelete({ path: { name: props.id } })
    for (const clientId in clients) {
      await treeState.refreshClient(clientId)
    }
@ -55,12 +57,11 @@ async function deleteSecret(clients: string[]) {
 }

 async function addSecretToClient(clientId: string) {
-  if (props.secretName) {
-    console.log('Add Secret to client', props.secretName, clientId)
+  if (props.id) {
    await SshecretAdmin.addSecretToClientApiV1ClientsIdSecretsSecretNamePut({
      path: {
        id: clientId,
-        secret_name: props.secretName,
+        secret_name: props.id,
      },
    })
    await treeState.refreshClient(clientId)
@ -69,11 +70,11 @@ async function addSecretToClient(clientId: string) {
 }

 async function removeClientSecret(clientId: string) {
-  if (props.secretName) {
+  if (props.id) {
    await SshecretAdmin.deleteSecretFromClientApiV1ClientsIdSecretsSecretNameDelete({
      path: {
        id: clientId,
-        secret_name: props.secretName,
+        secret_name: props.id,
      },
    })
    await treeState.refreshClient(clientId)
@ -83,7 +84,7 @@ async function removeClientSecret(clientId: string) {
 onMounted(loadSecret)

 watch(
-  () => props.secretName,
+  () => props.id,
  () => loadSecret(),
  { immediate: true },
 )
--- a/packages/sshecret-frontend/src/views/secrets/SecretGroupDetailView.vue
+++ b/packages/sshecret-frontend/src/views/secrets/SecretGroupDetailView.vue
@ -1,6 +1,12 @@
 <template>
+  <div>
+    <Transition name="fade" :css="false">
+      <div>
        <GroupDetail :group="group" v-if="group" />
        <ClientSkeleton v-else />
+      </div>
+    </Transition>
+  </div>
 </template>
 <script setup lang="ts">
 import { ref, watch, onMounted } from 'vue'
--- a/packages/sshecret-frontend/src/views/secrets/SecretPage.vue
+++ b/packages/sshecret-frontend/src/views/secrets/SecretPage.vue
@ -0,0 +1,32 @@
+<template>
+  <MasterDetail>
+    <template #master>
+      <MasterTabs selectedTab="secrets" @change="tabSelected" />
+    </template>
+    <template #detail>
+      <RouterView v-slot="{ Component, route }">
+        <transition name="fade" :css="false">
+          <component :is="Component" :key="route.path" />
+        </transition>
+      </RouterView>
+    </template>
+  </MasterDetail>
+</template>
+<script setup lang="ts">
+import { computed } from 'vue'
+import MasterDetail from '@/views/layout/MasterDetail.vue'
+import MasterTabs from '@/components/common/MasterTabs.vue'
+import { useRouter, useRoute } from 'vue-router'
+import { RouterView } from 'vue-router'
+
+const router = useRouter()
+const route = useRoute()
+
+function tabSelected(tabName: string) {
+  if (tabName !== 'secrets') {
+    router.push({ name: tabName })
+  }
+}
+
+const routeKey = computed(() => route.name + '-' + (route.params.id ?? 'root'))
+</script>
--- a/packages/sshecret-frontend/src/views/secrets/SecretTreeList.vue
+++ b/packages/sshecret-frontend/src/views/secrets/SecretTreeList.vue
@ -34,6 +34,11 @@
              <SecretGroup v-for="group in secretGroups" :group="group" />
            </template>
          </sl-tree>
+          <sl-tree v-else>
+            <template v-for="n in 10">
+              <TreeItemSkeleton />
+            </template>
+          </sl-tree>
        </div>
        <!-- pagination would go here -->
      </div>
@ -60,17 +65,21 @@
 import type { SshecretObject } from '@/api/types'
 import type { SecretCreate } from '@/client'
 import { computed, ref, reactive, onMounted, watch } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
 import { useTreeState } from '@/store/useTreeState'
 import { useAlertsStore } from '@/store/useAlertsStore'
 import { SshecretAdmin } from '@/client'
 import { SshecretObjectType } from '@/api/types'
+import { splitPath } from '@/api/paths'
 import SecretGroup from '@/components/secrets/SecretGroup.vue'
 import SecretGroupTreeItem from '@/components/secrets/SecretGroupTreeItem.vue'
 import SecretGroupTreeEntry from '@/components/secrets/SecretGroupTreeEntry.vue'
 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'

+const router = useRouter()
 const treeState = useTreeState()
 const alerts = useAlertsStore()

@ -126,12 +135,15 @@ async function itemSelected(event: Event) {
    if (childType === 'secret') {
      const secretName = el.dataset.name
      treeState.selectSecret(secretName, null)
+      router.push({ name: 'Secret', params: { id: secretName } })
    } else if (childType === 'group') {
      const groupPath = el.dataset.groupPath
      if (groupPath === 'ungrouped') {
        treeState.unselect()
      } else {
+        const groupPathElements = splitPath(groupPath)
        treeState.selectGroup(groupPath)
+        router.push({ name: 'Group', params: { groupPath: groupPathElements } })
      }
    }
  }
@ -139,14 +151,12 @@ async function itemSelected(event: Event) {

 async function createGroup(path: string) {
  // Create a group
-  console.log('Submit called')
  const response = await SshecretAdmin.addSecretGroupApiV1SecretsGroupsPost({
    body: {
      name: path,
    },
  })
  if (response.status === 200) {
-    console.log('Success. Group created.')
    alerts.showAlert('Group created', 'success')
    createGroupDrawer.value = false
    drawerKey.value += 1
@ -159,7 +169,6 @@ async function createGroup(path: string) {
 }

 async function createSecret(secretCreate: SecretCreate) {
-  console.log('Creating secret')
  const response = await SshecretAdmin.addSecretApiV1SecretsPost({
    body: secretCreate,
  })
@ -172,13 +181,12 @@ async function createSecret(secretCreate: SecretCreate) {
    await loadGroups()
    // Also update all the clients affected
    for (const clientId in secretCreate.clients) {
-      console.log('Refreshing client: ', clientId)
      await treeState.refreshClient(clientId)
    }

    treeState.selectSecret(secretCreate.name)
  } else {
-    console.log(response)
+    console.error(response)
    alerts.showAlert('Secret creation failed', 'error')
  }
 }