eising/sshecret
1
0
Fork 0
Code Issues 28 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Implement routes and transitions

Browse Source
This commit is contained in:
Allan Eising
2025-07-14 12:08:09 +02:00
parent 736dad748b
commit 5ac4c987d3
27 changed files with 860 additions and 376 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
packages/sshecret-frontend/src/api/paths.ts Normal file
View File

@ -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
}

6
packages/sshecret-frontend/src/api/types.ts
View File

@ -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,
}

108
packages/sshecret-frontend/src/components/audit/AuditSkeleton.vue Normal file
View File

@ -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>

355
packages/sshecret-frontend/src/components/audit/AuditTable.vue
View File

@ -1,182 +1,190 @@
<template>
<table v-if="auditEntries" 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="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"
>
Timestamp
</th>
<th
scope="col"
class="p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
>
Subsystem
</th>
<th
scope="col"
class="p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
>
Operation
</th>
<th
scope="col"
class="p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
>
Client
</th>
<th
scope="col"
class="p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
>
Secret
</th>
<th
scope="col"
class="p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
>
Message
</th>
<th
scope="col"
class="p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
>
Origin
</th>
</tr>
</thead>
<tbody class="bg-white dark:bg-gray-800">
<template v-for="entry in auditEntries" :key="entry.id">
<tr class="auditRow hover:bg-gray-100 dark:hover:bg-gray-700">
<td>
<sl-icon-button
name="chevron-right"
@click="toggle(entry.id)"
:class="{ 'rotate-90': isExpanded(entry.id) }"
></sl-icon-button>
</td>
<td class="p-4 text-sm font-normal text-gray-900 whitespace-nowrap dark:text-white">
{{ entry.timestamp }}
</td>
<td class="p-4 text-sm font-normal text-gray-900 whitespace-nowrap dark:text-white">
{{ entry.subsystem }}
</td>
<td class="p-4 text-sm font-normal text-gray-900 whitespace-nowrap dark:text-white">
{{ entry.operation }}
</td>
<td class="p-4 text-sm font-normal text-gray-900 whitespace-nowrap dark:text-white">
<abbr :title="entry.client_id" v-if="entry.client_name">{{ entry.client_name }}</abbr>
</td>
<td class="p-4 text-sm font-normal text-gray-900 whitespace-nowrap dark:text-white">
<abbr :title="entry.secret_id" v-if="entry.secret_name">{{ entry.secret_name }}</abbr>
</td>
<td class="p-4 text-sm font-normal text-gray-500 whitespace-nowrap dark:text-gray-400">
{{ entry.message }}
</td>
<td class="p-4 text-sm font-normal text-gray-500 whitespace-nowrap dark:text-gray-400">
{{ entry.origin }}
</td>
<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
scope="col"
class="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"
>
Timestamp
</th>
<th
scope="col"
class="p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
>
Subsystem
</th>
<th
scope="col"
class="p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
>
Operation
</th>
<th
scope="col"
class="p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
>
Client
</th>
<th
scope="col"
class="p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
>
Secret
</th>
<th
scope="col"
class="p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
>
Message
</th>
<th
scope="col"
class="p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white"
>
Origin
</th>
</tr>
<tr v-if="isExpanded(entry.id)" class="auditRow">
<td></td>
<td colspan="8">
<dl
class="max-w-md text-gray-900 divide-y divide-gray-200 dark:text-white dark:divide-gray-700 px-2 py-2"
>
<div class="flex flex-col pb-3">
<dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">ID</dt>
<dd class="text-xs font-semibold">{{ entry.id }}</dd>
</div>
<div class="flex flex-col pb-3">
<dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Subsystem</dt>
<dd class="text-xs font-semibold">{{ entry.subsystem }}</dd>
</div>
<div class="flex flex-col pb-3">
<dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Timestamp</dt>
<dd class="text-xs font-semibold">{{ entry.timestamp }}</dd>
</div>
<div class="flex flex-col pb-3">
<dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Operation</dt>
<dd class="text-xs font-semibold">{{ entry.operation }}</dd>
</div>
<div class="flex flex-col pb-3">
<dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Client ID</dt>
<dd class="text-xs font-semibold">{{ entry.client_id }}</dd>
</div>
<div class="flex flex-col pb-3">
<dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Client Name</dt>
<dd class="text-xs font-semibold">{{ entry.client_name }}</dd>
</div>
<div class="flex flex-col pb-3">
<dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Secret ID</dt>
<dd class="text-xs font-semibold">{{ entry.secret_id }}</dd>
</div>
<div class="flex flex-col pb-3">
<dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Secret Name</dt>
<dd class="text-xs font-semibold">{{ entry.secret_name }}</dd>
</div>
<div class="flex flex-col pb-3">
<dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Message</dt>
<dd class="text-xs font-semibold">{{ entry.message }}</dd>
</div>
<div class="flex flex-col pb-3">
<dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Origin</dt>
<dd class="text-xs font-semibold">{{ entry.origin }}</dd>
</div>
<template v-if="entry.data">
<template v-for="(value, key) in entry.data">
<div class="flex flex-col pb-3">
<dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">{{ key }}</dt>
<dd class="text-xs font-semibold">{{ value }}</dd>
</div>
</thead>
<tbody class="bg-white dark:bg-gray-800">
<template v-for="entry in auditEntries" :key="entry.id">
<tr class="auditRow hover:bg-gray-100 dark:hover:bg-gray-700">
<td>
<sl-icon-button
name="chevron-right"
@click="toggle(entry.id)"
:class="{ 'rotate-90': isExpanded(entry.id) }"
></sl-icon-button>
</td>
<td class="p-4 text-sm font-normal text-gray-900 whitespace-nowrap dark:text-white">
{{ entry.timestamp }}
</td>
<td class="p-4 text-sm font-normal text-gray-900 whitespace-nowrap dark:text-white">
{{ entry.subsystem }}
</td>
<td class="p-4 text-sm font-normal text-gray-900 whitespace-nowrap dark:text-white">
{{ entry.operation }}
</td>
<td class="p-4 text-sm font-normal text-gray-900 whitespace-nowrap dark:text-white">
<abbr :title="entry.client_id" v-if="entry.client_name">{{ entry.client_name }}</abbr>
</td>
<td class="p-4 text-sm font-normal text-gray-900 whitespace-nowrap dark:text-white">
<abbr :title="entry.secret_id" v-if="entry.secret_name">{{ entry.secret_name }}</abbr>
</td>
<td class="p-4 text-sm font-normal text-gray-500 whitespace-nowrap dark:text-gray-400">
{{ entry.message }}
</td>
<td class="p-4 text-sm font-normal text-gray-500 whitespace-nowrap dark:text-gray-400">
{{ entry.origin }}
</td>
</tr>
<tr v-if="isExpanded(entry.id)" class="auditRow">
<td></td>
<td colspan="8">
<dl
class="max-w-md text-gray-900 divide-y divide-gray-200 dark:text-white dark:divide-gray-700 px-2 py-2"
>
<div class="flex flex-col pb-3">
<dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">ID</dt>
<dd class="text-xs font-semibold">{{ entry.id }}</dd>
</div>
<div class="flex flex-col pb-3">
<dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Subsystem</dt>
<dd class="text-xs font-semibold">{{ entry.subsystem }}</dd>
</div>
<div class="flex flex-col pb-3">
<dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Timestamp</dt>
<dd class="text-xs font-semibold">{{ entry.timestamp }}</dd>
</div>
<div class="flex flex-col pb-3">
<dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Operation</dt>
<dd class="text-xs font-semibold">{{ entry.operation }}</dd>
</div>
<div class="flex flex-col pb-3">
<dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Client ID</dt>
<dd class="text-xs font-semibold">{{ entry.client_id }}</dd>
</div>
<div class="flex flex-col pb-3">
<dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Client Name</dt>
<dd class="text-xs font-semibold">{{ entry.client_name }}</dd>
</div>
<div class="flex flex-col pb-3">
<dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Secret ID</dt>
<dd class="text-xs font-semibold">{{ entry.secret_id }}</dd>
</div>
<div class="flex flex-col pb-3">
<dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Secret Name</dt>
<dd class="text-xs font-semibold">{{ entry.secret_name }}</dd>
</div>
<div class="flex flex-col pb-3">
<dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Message</dt>
<dd class="text-xs font-semibold">{{ entry.message }}</dd>
</div>
<div class="flex flex-col pb-3">
<dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Origin</dt>
<dd class="text-xs font-semibold">{{ entry.origin }}</dd>
</div>
<template v-if="entry.data">
<template v-for="(value, key) in entry.data">
<div class="flex flex-col pb-3">
<dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">{{ key }}</dt>
<dd class="text-xs font-semibold">{{ value }}</dd>
</div>
</template>
</template>
</template>
</dl>
</td>
</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"
v-if="totalPages > 0"
>
<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">
{{ firstResult }}-{{ TotalEntries }}
</dl>
</td>
</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"
v-if="totalPages > 0"
>
<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"
>
{{ firstResult }}-{{ TotalEntries }}
</span>
<span class="font-semibold text-gray-900 dark:text-white" v-else>
{{ firstResult }}-{{ lastResult }}
</span>
of
<span class="font-semibold text-gray-900 dark:text-white">
{{ totalEntries }}
</span>
</span>
<span class="font-semibold text-gray-900 dark:text-white" v-else>
{{ firstResult }}-{{ lastResult }}
</span>
of
<span class="font-semibold text-gray-900 dark:text-white">
{{ totalEntries }}
</span>
</span>
</div>
<div class="flex items-center space-x-3">
<div class="flex space-x-1">
<PageNumbers
@next="nextPage"
@previous="prevPage"
@goto="goToPage"
:pageNum="pageNum"
:totalPages="totalPages"
/>
</div>
<div class="flex items-center space-x-3">
<div class="flex space-x-1">
<PageNumbers
@next="nextPage"
@previous="prevPage"
@goto="goToPage"
:pageNum="pageNum"
:totalPages="totalPages"
/>
</div>
</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 }>()

4
packages/sshecret-frontend/src/components/clients/ClientSecretTreeItem.vue
View File

@ -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>

6
packages/sshecret-frontend/src/components/clients/ClientSkeleton.vue
View File

@ -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>

15
packages/sshecret-frontend/src/components/common/DetailPage.vue Normal file
View File

@ -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>

3
packages/sshecret-frontend/src/components/common/GenericDetail.vue Normal file
View File

@ -0,0 +1,3 @@
<template>
<p class="p-4 text-gray-500 dark:text-gray-200">Select an item to view details</p>
</template>

109
packages/sshecret-frontend/src/components/common/MasterDetailWorkspace.vue Normal file
View File

@ -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>

36
packages/sshecret-frontend/src/components/common/MasterTabs.vue Normal file
View File

@ -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>

15
packages/sshecret-frontend/src/components/common/TreeItemSkeleton.vue Normal file
View File

@ -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>

108
packages/sshecret-frontend/src/components/secrets/SecretSkeleton.vue
View File

@ -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="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="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="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="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>
</dl>
</div>
</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>
<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>
<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>

2
packages/sshecret-frontend/src/main.ts
View File

@ -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'

59
packages/sshecret-frontend/src/router/index.ts
View File

@ -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 },
}
],
}
]

16
packages/sshecret-frontend/src/store/useTreeState.ts
View File

@ -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) {

91
packages/sshecret-frontend/src/views/WorkspaceView.vue
View File

@ -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>

29
packages/sshecret-frontend/src/views/audit/AuditPage.vue Normal file
View File

@ -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>

8
packages/sshecret-frontend/src/views/audit/AuditView.vue
View File

@ -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>

24
packages/sshecret-frontend/src/views/clients/ClientDetailPage.vue Normal file
View File

@ -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>

34
packages/sshecret-frontend/src/views/clients/ClientDetailView.vue
View File

@ -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 },
)

29
packages/sshecret-frontend/src/views/clients/ClientPage.vue Normal file
View File

@ -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>

50
packages/sshecret-frontend/src/views/clients/ClientTreeList.vue
View File

@ -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()
})

3
packages/sshecret-frontend/src/views/layout/MasterDetail.vue
View File

@ -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>

43
packages/sshecret-frontend/src/views/secrets/SecretDetailView.vue
View File

@ -1,13 +1,15 @@
<template>
<SecretDetail
:secret="secret"
@update="updateSecretValue"
@delete="deleteSecret"
@addClient="addSecretToClient"
@removeClient="removeClientSecret"
v-if="secret"
/>
<SecretSkeleton v-else />
<div>
<SecretDetail
:secret="secret"
@update="updateSecretValue"
@delete="deleteSecret"
@addClient="addSecretToClient"
@removeClient="removeClientSecret"
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 },
)

10
packages/sshecret-frontend/src/views/secrets/SecretGroupDetailView.vue
View File

@ -1,6 +1,12 @@
<template>
<GroupDetail :group="group" v-if="group" />
<ClientSkeleton v-else />
<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'

32
packages/sshecret-frontend/src/views/secrets/SecretPage.vue Normal file
View File

@ -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>

18
packages/sshecret-frontend/src/views/secrets/SecretTreeList.vue
View File

@ -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')
}
}