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

Dashboard and error handling

Browse Source
This commit is contained in:
Allan Eising
2025-07-15 13:22:11 +02:00
parent 5ac4c987d3
commit 6a5149fd4c
27 changed files with 572 additions and 204 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/sshecret-frontend/openapi.json
View File

File diff suppressed because one or more lines are too long

31
packages/sshecret-frontend/src/api/assertSdkResponseOk.ts Normal file
View File

@ -0,0 +1,31 @@
// /src/utils/assertSdkResponseOk.ts
import type { AxiosResponse, AxiosError } from 'axios'
import { ApiError, ValidationError, NotFoundError } from '@/api/errors'
import { isHttpValidationError } from './typeguards';
export type SDKResponse<T> =
| (AxiosResponse<T> & { error: undefined })
| (AxiosError<any> & { data: undefined; error: any })
export function assertSdkResponseOk<T>(response: SDKResponse<T>): T {
if ('error' in response && response.error) {
const status = response.status ?? 500
if (status === 404) {
throw new NotFoundError("Not found")
}
if (status === 422 && isHttpValidationError(response.error)) {
throw new ValidationError(response.error.detail ?? [])
}
const errorMessage = response.error.detail ?? 'Unknown error'
throw new ApiError(`API error: ${errorMessage}`, status)
}
if ('data' in response && response.data) {
return response.data
}
throw new ApiError('Invalid response shape', 500)
}

28
packages/sshecret-frontend/src/api/errors.ts Normal file
View File

@ -0,0 +1,28 @@
export class ApiError extends Error {
public status: number
constructor(message: string, status: number) {
super(message)
this.name = 'ApiError'
this.status = status
}
}
export class NotFoundError extends ApiError {
constructor(message: string) {
super(message, 404)
this.name = "NotFoundError"
}
}
export class ValidationError extends ApiError {
public errors: any[]
constructor(errors: any[], message: string = 'Validation failed') {
super(message, 422)
this.name = 'ValidationError'
this.errors = errors
}
}

5
packages/sshecret-frontend/src/api/interceptors.ts
View File

@ -1,6 +1,8 @@
import { client } from '@/client/client.gen'
import { useAuthTokenStore } from '@/store/auth.ts'
import router from '@/router'
client.instance.interceptors.response.use(
response => response,
@ -11,6 +13,7 @@ client.instance.interceptors.response.use(
if (originalRequest.url.includes("/refresh")) {
const auth = useAuthTokenStore()
auth.logout()
router.push({ name: 'login' })
return Promise.reject("Refresh failed - logged out")
}
if (error.response?.status === 401 && !originalRequest._retry) {
@ -27,6 +30,6 @@ client.instance.interceptors.response.use(
}
return Promise.reject("Could not refresh token")
}
return Promise.reject("Could not refresh token")
return Promise.reject(error)
}
)

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

@ -2,7 +2,7 @@
import { OPERATIONS } from '@/api/types'
import { SUBSYSTEM } from '@/api/types'
import type { Operation, SubSystem } from '@/client'
import type { HttpValidationError, Operation, SubSystem } from '@/client'
export function isOperation(value: string): value is Operation {
return (OPERATIONS as readonly string[]).includes(value)
@ -11,3 +11,7 @@ export function isOperation(value: string): value is Operation {
export function isSubSystem(value: string): value is SubSystem {
return (SUBSYSTEM as readonly string[]).includes(value)
}
export function isHttpValidationError(error: unknown): error is HttpValidationError {
return !!(error && typeof error === 'object' && 'detail' in error)
}

9
packages/sshecret-frontend/src/assets/custom.css
View File

@ -53,3 +53,12 @@ sl-checkbox:focus-within[data-user-valid]::part(control) {
border-color: var(--sl-color-success-600);
box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-color-success-300);
}
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%;
}

20
packages/sshecret-frontend/src/client/sdk.gen.ts
View File

@ -1,7 +1,7 @@
// This file is auto-generated by @hey-api/openapi-ts
import { type Options as ClientOptions, type TDataShape, type Client, urlSearchParamsBodySerializer } from './client';
import type { GetHealthHealthGetData, GetHealthHealthGetResponses, GetAuditLogApiV1AuditGetData, GetAuditLogApiV1AuditGetResponses, GetAuditLogApiV1AuditGetErrors, LoginForAccessTokenApiV1TokenPostData, LoginForAccessTokenApiV1TokenPostResponses, LoginForAccessTokenApiV1TokenPostErrors, RefreshTokenApiV1RefreshPostData, RefreshTokenApiV1RefreshPostResponses, RefreshTokenApiV1RefreshPostErrors, GetClientsApiV1ClientsGetData, GetClientsApiV1ClientsGetResponses, CreateClientApiV1ClientsPostData, CreateClientApiV1ClientsPostResponses, CreateClientApiV1ClientsPostErrors, GetClientsTerseApiV1ClientsTerseGetData, GetClientsTerseApiV1ClientsTerseGetResponses, QueryClientsApiV1QueryClientsGetData, QueryClientsApiV1QueryClientsGetResponses, QueryClientsApiV1QueryClientsGetErrors, DeleteClientApiV1ClientsIdDeleteData, DeleteClientApiV1ClientsIdDeleteResponses, DeleteClientApiV1ClientsIdDeleteErrors, GetClientApiV1ClientsIdGetData, GetClientApiV1ClientsIdGetResponses, GetClientApiV1ClientsIdGetErrors, UpdateClientApiV1ClientsIdPutData, UpdateClientApiV1ClientsIdPutResponses, UpdateClientApiV1ClientsIdPutErrors, DeleteSecretFromClientApiV1ClientsIdSecretsSecretNameDeleteData, DeleteSecretFromClientApiV1ClientsIdSecretsSecretNameDeleteResponses, DeleteSecretFromClientApiV1ClientsIdSecretsSecretNameDeleteErrors, AddSecretToClientApiV1ClientsIdSecretsSecretNamePutData, AddSecretToClientApiV1ClientsIdSecretsSecretNamePutResponses, AddSecretToClientApiV1ClientsIdSecretsSecretNamePutErrors, UpdateClientPoliciesApiV1ClientsIdPoliciesPutData, UpdateClientPoliciesApiV1ClientsIdPoliciesPutResponses, UpdateClientPoliciesApiV1ClientsIdPoliciesPutErrors, UpdateClientPublicKeyApiV1ClientsIdPublicKeyPutData, UpdateClientPublicKeyApiV1ClientsIdPublicKeyPutResponses, UpdateClientPublicKeyApiV1ClientsIdPublicKeyPutErrors, GetSecretNamesApiV1SecretsGetData, GetSecretNamesApiV1SecretsGetResponses, AddSecretApiV1SecretsPostData, AddSecretApiV1SecretsPostResponses, AddSecretApiV1SecretsPostErrors, DeleteSecretApiV1SecretsNameDeleteData, DeleteSecretApiV1SecretsNameDeleteResponses, DeleteSecretApiV1SecretsNameDeleteErrors, GetSecretApiV1SecretsNameGetData, GetSecretApiV1SecretsNameGetResponses, GetSecretApiV1SecretsNameGetErrors, UpdateSecretApiV1SecretsNamePutData, UpdateSecretApiV1SecretsNamePutResponses, UpdateSecretApiV1SecretsNamePutErrors, GetSecretGroupsApiV1SecretsGroupsGetData, GetSecretGroupsApiV1SecretsGroupsGetResponses, GetSecretGroupsApiV1SecretsGroupsGetErrors, AddSecretGroupApiV1SecretsGroupsPostData, AddSecretGroupApiV1SecretsGroupsPostResponses, AddSecretGroupApiV1SecretsGroupsPostErrors, DeleteSecretGroupApiV1SecretsGroupsGroupPathDeleteData, DeleteSecretGroupApiV1SecretsGroupsGroupPathDeleteResponses, DeleteSecretGroupApiV1SecretsGroupsGroupPathDeleteErrors, GetSecretGroupApiV1SecretsGroupsGroupPathGetData, GetSecretGroupApiV1SecretsGroupsGroupPathGetResponses, GetSecretGroupApiV1SecretsGroupsGroupPathGetErrors, UpdateSecretGroupApiV1SecretsGroupsGroupPathPutData, UpdateSecretGroupApiV1SecretsGroupsGroupPathPutResponses, UpdateSecretGroupApiV1SecretsGroupsGroupPathPutErrors, DeleteGroupIdApiV1SecretsGroupIdDeleteData, DeleteGroupIdApiV1SecretsGroupIdDeleteResponses, DeleteGroupIdApiV1SecretsGroupIdDeleteErrors, AssignSecretGroupApiV1SecretsSetGroupPostData, AssignSecretGroupApiV1SecretsSetGroupPostResponses, AssignSecretGroupApiV1SecretsSetGroupPostErrors, MoveGroupApiV1SecretsMoveGroupGroupNamePostData, MoveGroupApiV1SecretsMoveGroupGroupNamePostResponses, MoveGroupApiV1SecretsMoveGroupGroupNamePostErrors } from './types.gen';
import type { GetHealthHealthGetData, GetHealthHealthGetResponses, GetAuditLogApiV1AuditGetData, GetAuditLogApiV1AuditGetResponses, GetAuditLogApiV1AuditGetErrors, LoginForAccessTokenApiV1TokenPostData, LoginForAccessTokenApiV1TokenPostResponses, LoginForAccessTokenApiV1TokenPostErrors, RefreshTokenApiV1RefreshPostData, RefreshTokenApiV1RefreshPostResponses, RefreshTokenApiV1RefreshPostErrors, GetClientsApiV1ClientsGetData, GetClientsApiV1ClientsGetResponses, CreateClientApiV1ClientsPostData, CreateClientApiV1ClientsPostResponses, CreateClientApiV1ClientsPostErrors, GetClientsTerseApiV1ClientsTerseGetData, GetClientsTerseApiV1ClientsTerseGetResponses, QueryClientsApiV1QueryClientsGetData, QueryClientsApiV1QueryClientsGetResponses, QueryClientsApiV1QueryClientsGetErrors, DeleteClientApiV1ClientsIdDeleteData, DeleteClientApiV1ClientsIdDeleteResponses, DeleteClientApiV1ClientsIdDeleteErrors, GetClientApiV1ClientsIdGetData, GetClientApiV1ClientsIdGetResponses, GetClientApiV1ClientsIdGetErrors, UpdateClientApiV1ClientsIdPutData, UpdateClientApiV1ClientsIdPutResponses, UpdateClientApiV1ClientsIdPutErrors, DeleteSecretFromClientApiV1ClientsIdSecretsSecretNameDeleteData, DeleteSecretFromClientApiV1ClientsIdSecretsSecretNameDeleteResponses, DeleteSecretFromClientApiV1ClientsIdSecretsSecretNameDeleteErrors, AddSecretToClientApiV1ClientsIdSecretsSecretNamePutData, AddSecretToClientApiV1ClientsIdSecretsSecretNamePutResponses, AddSecretToClientApiV1ClientsIdSecretsSecretNamePutErrors, UpdateClientPoliciesApiV1ClientsIdPoliciesPutData, UpdateClientPoliciesApiV1ClientsIdPoliciesPutResponses, UpdateClientPoliciesApiV1ClientsIdPoliciesPutErrors, UpdateClientPublicKeyApiV1ClientsIdPublicKeyPutData, UpdateClientPublicKeyApiV1ClientsIdPublicKeyPutResponses, UpdateClientPublicKeyApiV1ClientsIdPublicKeyPutErrors, GetSystemStatsApiV1StatsGetData, GetSystemStatsApiV1StatsGetResponses, GetSecretNamesApiV1SecretsGetData, GetSecretNamesApiV1SecretsGetResponses, AddSecretApiV1SecretsPostData, AddSecretApiV1SecretsPostResponses, AddSecretApiV1SecretsPostErrors, DeleteSecretApiV1SecretsNameDeleteData, DeleteSecretApiV1SecretsNameDeleteResponses, DeleteSecretApiV1SecretsNameDeleteErrors, GetSecretApiV1SecretsNameGetData, GetSecretApiV1SecretsNameGetResponses, GetSecretApiV1SecretsNameGetErrors, UpdateSecretApiV1SecretsNamePutData, UpdateSecretApiV1SecretsNamePutResponses, UpdateSecretApiV1SecretsNamePutErrors, GetSecretGroupsApiV1SecretsGroupsGetData, GetSecretGroupsApiV1SecretsGroupsGetResponses, GetSecretGroupsApiV1SecretsGroupsGetErrors, AddSecretGroupApiV1SecretsGroupsPostData, AddSecretGroupApiV1SecretsGroupsPostResponses, AddSecretGroupApiV1SecretsGroupsPostErrors, DeleteSecretGroupApiV1SecretsGroupsGroupPathDeleteData, DeleteSecretGroupApiV1SecretsGroupsGroupPathDeleteResponses, DeleteSecretGroupApiV1SecretsGroupsGroupPathDeleteErrors, GetSecretGroupApiV1SecretsGroupsGroupPathGetData, GetSecretGroupApiV1SecretsGroupsGroupPathGetResponses, GetSecretGroupApiV1SecretsGroupsGroupPathGetErrors, UpdateSecretGroupApiV1SecretsGroupsGroupPathPutData, UpdateSecretGroupApiV1SecretsGroupsGroupPathPutResponses, UpdateSecretGroupApiV1SecretsGroupsGroupPathPutErrors, DeleteGroupIdApiV1SecretsGroupIdDeleteData, DeleteGroupIdApiV1SecretsGroupIdDeleteResponses, DeleteGroupIdApiV1SecretsGroupIdDeleteErrors, AssignSecretGroupApiV1SecretsSetGroupPostData, AssignSecretGroupApiV1SecretsSetGroupPostResponses, AssignSecretGroupApiV1SecretsSetGroupPostErrors, MoveGroupApiV1SecretsMoveGroupGroupNamePostData, MoveGroupApiV1SecretsMoveGroupGroupNamePostResponses, MoveGroupApiV1SecretsMoveGroupGroupNamePostErrors } from './types.gen';
import { client as _heyApiClient } from './client.gen';
export type Options<TData extends TDataShape = TDataShape, ThrowOnError extends boolean = boolean> = ClientOptions<TData, ThrowOnError> & {
@ -300,6 +300,24 @@ export class SshecretAdmin {
});
}
/**
* Get System Stats
* Get system stats.
*/
public static getSystemStatsApiV1StatsGet<ThrowOnError extends boolean = false>(options?: Options<GetSystemStatsApiV1StatsGetData, ThrowOnError>) {
return (options?.client ?? _heyApiClient).get<GetSystemStatsApiV1StatsGetResponses, unknown, ThrowOnError>({
responseType: 'json',
security: [
{
scheme: 'bearer',
type: 'http'
}
],
url: '/api/v1/stats',
...options
});
}
/**
* Get Secret Names
* Get Secret Names.

40
packages/sshecret-frontend/src/client/types.gen.ts
View File

@ -477,10 +477,7 @@ export type SecretView = {
* Secret
*/
secret: string | null;
/**
* Group
*/
group?: string | null;
group?: GroupReference | null;
/**
* Clients
*/
@ -493,6 +490,25 @@ export type SecretView = {
*/
export type SubSystem = 'admin' | 'sshd' | 'backend';
/**
* SystemStats
* Generic system stats.
*/
export type SystemStats = {
/**
* Clients
*/
clients: number;
/**
* Secrets
*/
secrets: number;
/**
* Audit Events
*/
audit_events: number;
};
/**
* Token
*/
@ -1031,6 +1047,22 @@ export type UpdateClientPublicKeyApiV1ClientsIdPublicKeyPutResponses = {
export type UpdateClientPublicKeyApiV1ClientsIdPublicKeyPutResponse = UpdateClientPublicKeyApiV1ClientsIdPublicKeyPutResponses[keyof UpdateClientPublicKeyApiV1ClientsIdPublicKeyPutResponses];
export type GetSystemStatsApiV1StatsGetData = {
body?: never;
path?: never;
query?: never;
url: '/api/v1/stats';
};
export type GetSystemStatsApiV1StatsGetResponses = {
/**
* Successful Response
*/
200: SystemStats;
};
export type GetSystemStatsApiV1StatsGetResponse = GetSystemStatsApiV1StatsGetResponses[keyof GetSystemStatsApiV1StatsGetResponses];
export type GetSecretNamesApiV1SecretsGetData = {
body?: never;
path?: never;

12
packages/sshecret-frontend/src/components/audit/AuditFilters.vue
View File

@ -79,6 +79,8 @@ import { ref, reactive, onMounted, watch } from 'vue'
import { useAuditFilterState } from '@/store/useAuditFilterState'
import { SshecretAdmin } from '@/client'
import { SUBSYSTEM, OPERATIONS } from '@/api/types'
import { assertSdkResponseOk } from '@/api/AssertSdkResponseOk'
const auditFilterState = useAuditFilterState()
const clientNames = ref<string[]>()
@ -94,16 +96,14 @@ const filterForm = reactive({
async function fetchClientNames() {
const response = await SshecretAdmin.getClientsTerseApiV1ClientsTerseGet()
if (response.data) {
clientNames.value = response.data.map((x) => x.name)
}
const responseData = assertSdkResponseOk(response)
clientNames.value = responseData.map((x) => x.name)
}
async function fetchSecretNames() {
const response = await SshecretAdmin.getSecretNamesApiV1SecretsGet()
if (response.data) {
secretNames.value = response.data.map((x) => x.name)
}
const responseData = assertSdkResponseOk(response)
secretNames.value = responseData.map((x) => x.name)
}
async function fetchNames() {

9
packages/sshecret-frontend/src/components/audit/AuditSkeleton.vue
View File

@ -53,7 +53,7 @@
</tr>
</thead>
<tbody class="bg-white dark:bg-gray-800">
<template v-for="row in 25">
<template v-for="row in amount">
<tr class="auditRow hover:bg-gray-100 dark:hover:bg-gray-700">
<td class="w-[1rem]">
<sl-skeleton class="iconSkeleton"></sl-skeleton>
@ -84,6 +84,13 @@
</div>
</template>
<script setup lang="ts">
import { toRef } from 'vue'
const props = defineProps<{ amount: number }>()
const amount = toRef(() => props.amount ?? 25)
</script>
<style>
tr.auditRow {
background-color: var(--color-white);

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

@ -147,6 +147,7 @@
</template>
</tbody>
</table>
<template v-if="shouldPaginate">
<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"
@ -182,8 +183,9 @@
</div>
</div>
</template>
</template>
<template v-else>
<AuditSkeleton />
<AuditSkeleton :amount="perPage" />
</template>
</template>
<script setup lang="ts">
@ -193,11 +195,18 @@ import { usePagination } from '@/composables/usePagination'
import { SshecretAdmin, GetAuditLogApiV1AuditGetData } from '@/client'
import type { AuditListResult } from '@/client'
import type { AuditFilter } from '@/api/types'
import { assertSdkResponseOk } from '@/api/AssertSdkResponseOk'
import PageNumbers from '@/components/common/PageNumbers.vue'
import AuditSkeleton from '@/components/audit/AuditSkeleton.vue'
const props = defineProps<{ auditFilter: AuditFilter }>()
interface Props {
auditFilter: AuditFilter
paginate?: boolean
}
const props = defineProps<Props>()
const shouldPaginate = toRef(() => props.paginate ?? true)
const auditFilter = toRef(() => props.auditFilter)
console.log(auditFilter.value)
const auditList = ref<AuditListResult>([])
@ -220,7 +229,8 @@ async function loadLogs() {
const response = await SshecretAdmin.getAuditLogApiV1AuditGet({
query: queryInput.value,
})
auditList.value = response.data
const responseData = assertSdkResponseOk(response)
auditList.value = responseData
}
const expanded = ref(new Set<string>())

24
packages/sshecret-frontend/src/components/clients/ClientDetail.vue
View File

@ -89,7 +89,13 @@
</sl-tab-group>
<sl-drawer label="Edit Client" :open="updateDrawerOpen" @sl-hide="updateDrawerOpen = false">
<ClientForm @submit="updateClient" @cancel="updateDrawerOpen = false" :client="client" />
<ClientForm
@submit="updateClient"
@cancel="updateDrawerOpen = false"
@clearErrors="clearFormErrors"
:client="client"
:errors="formErrors"
/>
</sl-drawer>
<sl-dialog label="Are you sure?" :open="showConfirm">
Are you sure you want to delete this client?
@ -107,7 +113,15 @@ import type { Client, ClientCreate } from '@/client/types.gen'
import AuditTable from '@/components/audit/AuditTable.vue'
import ClientForm from '@/components/clients/ClientForm.vue'
const props = defineProps<{ client: Client }>()
const props = defineProps({
client: {
type: Object,
},
updateErrors: {
type: Array,
detault: [],
},
})
const emit = defineEmits<{
(e: 'update', data: ClientCreate): void
(e: 'deleted', data: string): void
@ -115,6 +129,12 @@ const emit = defineEmits<{
const localClient = ref({ ...props.client })
const formErrors = ref([])
function clearFormErrors() {
formErrors.value = []
}
const updateDrawerOpen = ref<boolean>(false)
const showConfirm = ref<boolean>(false)
const clientSecretCount = computed(() => localClient.value.secrets.length)

30
packages/sshecret-frontend/src/components/clients/ClientForm.vue
View File

@ -9,7 +9,8 @@
:disabled="isEdit"
:value="name"
@blur="checkName"
@input="name = $event.target.value"
@sl-input="name = $event.target.value"
@input="emit('clearErrors')"
ref="nameField"
></sl-input>
<br />
@ -79,15 +80,22 @@ const name = ref('')
const description = ref('')
const sourcePrefix = ref('')
const policies = ref(['0.0.0.0/0', '::/0'])
const publicKey = ref('')
// This key is only here during testing.
const publicKey = ref(
'ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABgQC737Yj7mbuBLDNbAuNGqhFF4Cvzd/ROq/QeQX0QIcPyZOoUtpXc7R/JIrdL6DXkPYXpN/IrUFoSeJQjV9Le+ewVxYELUPVhF0/nQhpBNE1Rjx2PRtJlfmywG5VRStgPQ+DSTDtgm4L0wPpnJiH3udkq/JFMHEYrVAF40QqNmR7AqYo1ZfEFk8YcQGb/S29JxWigq0qoJyufFENmSGNmabjqPAWJEf/oshMPaxwlDfTdmjeUWkPtsm10gi98XCwtnVCAVYZdVKeLSNpQCKUYVYWlycpahNczaITY9lehcMtux79uXTk2d4difra1Q4guw8oorUp1eRn/Al0BPeRb7x9WdgRs8wVY1kPD2796CTAQMkeBrOzGxwzwWhTf1XOuHG/wB5O2QSbcC6aMW9KAFmcCF+AOMb8Mv2Y5D7l/gbp938qTyZJ8ivP1/fy/88CWr+mrv5yP4HOZmNCyC9nMlAvrS/Kkg0tFU+NHFkDsmWpT3oar+VvGzkImEF6ip6Mzk8= testkey',
)
const nameField = ref<HTMLSlInputElement>()
const sourceField = ref<HTMLSlInputElement>()
const publicKeyField = ref<HTMLSlInputElement>()
const clientCreateForm = ref<HTMLElement>()
const props = defineProps<{ client?: Client | null }>()
const emit = defineEmits<{ (e: 'submit', data: ClientCreate): void; (e: 'cancel'): void }>()
const props = defineProps<{ client?: Client | null; errors: any[] | null }>()
const emit = defineEmits<{
(e: 'submit', data: ClientCreate): void
(e: 'cancel'): void
(e: 'clearErrors'): void
}>()
const isEdit = computed(() => !!props.client)
@ -138,6 +146,7 @@ function removePolicy(index: number) {
function checkName() {
nameField.value.reportValidity()
emit('clearErrors')
}
function validatePublicKey() {
@ -160,6 +169,19 @@ function validatePublicKey() {
setFieldValidation(publicKeyField, '')
}
watch(
() => props.errors,
(errors) => {
const nameErrors = errors.filter((e) => e.loc.includes('name'))
if (nameErrors.length > 0) {
console.log(nameErrors)
setFieldValidation(nameField, nameErrors[0].msg)
} else {
setFieldValidation(nameField, '')
}
},
)
async function submitForm() {
if (clientCreateForm.value?.checkValidity()) {
let clientDescription: string | null = null

9
packages/sshecret-frontend/src/components/clients/ClientSelectDropdown.vue
View File

@ -1,7 +1,8 @@
<script setup lang="ts">
import { nextTick, onMounted, ref } from 'vue'
import { onMounted, ref } from 'vue'
import { SshecretAdmin } from '@/client'
import { assertSdkResponseOk } from '@/api/AssertSdkResponseOk'
import type { ClientReference } from '@/client'
const clients = ref<ClientReference[]>([])
@ -11,9 +12,9 @@ const emit = defineEmits<{ (e: 'update:modelValue', data: string[]): void }>()
async function getClients() {
// Get just names and IDs of the clients
const response = await SshecretAdmin.getClientsTerseApiV1ClientsTerseGet()
if (response.data) {
clients.value = response.data
}
const responseData = assertSdkResponseOk(response)
clients.value = responseData
}
onMounted(getClients)

66
packages/sshecret-frontend/src/components/clients/CreateClient.vue
View File

@ -66,11 +66,7 @@ import type { Ref } from 'vue'
import { isIP } from 'is-ip'
import isCidr from 'is-cidr'
import '@shoelace-style/shoelace/dist/components/button/button.js'
import '@shoelace-style/shoelace/dist/components/input/input.js'
import '@shoelace-style/shoelace/dist/components/icon-button/icon-button.js'
import '@shoelace-style/shoelace/dist/components/tag/tag.js'
import '@shoelace-style/shoelace/dist/components/textarea/textarea.js'
import { assertSdkResponseOk } from '@/api/AssertSdkResponseOk'
import type { ClientCreate } from '@/client/types.gen'
import { SshecretAdmin } from '@/client/sdk.gen'
@ -152,65 +148,7 @@ async function submitForm() {
sources: [...policies.value],
}
const response = await SshecretAdmin.createClientApiV1ClientsPost({ body: clientCreate })
console.log(response.data)
assertSdkResponseOk(response)
}
}
</script>
<style>
.client-form sl-input,
.client-form sl-select,
.client-form sl-checkbox {
display: block;
margin-bottom: var(--sl-spacing-medium);
}
/* user invalid styles */
.client-form sl-input[data-user-invalid]::part(base),
.client-form sl-select[data-user-invalid]::part(combobox),
.client-form sl-checkbox[data-user-invalid]::part(control) {
border-color: var(--sl-color-danger-600);
}
.client-form [data-user-invalid]::part(form-control-label),
.client-form [data-user-invalid]::part(form-control-help-text),
.client-form sl-checkbox[data-user-invalid]::part(label) {
color: var(--sl-color-danger-700);
}
.client-form sl-checkbox[data-user-invalid]::part(control) {
outline: none;
}
.client-form sl-input:focus-within[data-user-invalid]::part(base),
.client-form sl-select:focus-within[data-user-invalid]::part(combobox),
.client-form sl-checkbox:focus-within[data-user-invalid]::part(control) {
border-color: var(--sl-color-danger-600);
box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-color-danger-300);
}
/* User valid styles */
.client-form sl-input[data-user-valid]::part(base),
.client-form sl-select[data-user-valid]::part(combobox),
.client-form sl-checkbox[data-user-valid]::part(control) {
border-color: var(--sl-color-success-600);
}
.client-form [data-user-valid]::part(form-control-label),
.client-form [data-user-valid]::part(form-control-help-text),
.client-form sl-checkbox[data-user-valid]::part(label) {
color: var(--sl-color-success-700);
}
.client-form sl-checkbox[data-user-valid]::part(control) {
background-color: var(--sl-color-success-600);
outline: none;
}
.client-form sl-input:focus-within[data-user-valid]::part(base),
.client-form sl-select:focus-within[data-user-valid]::part(combobox),
.client-form sl-checkbox:focus-within[data-user-valid]::part(control) {
border-color: var(--sl-color-success-600);
box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-color-success-300);
}
</style>

22
packages/sshecret-frontend/src/components/common/Dialog.vue Normal file
View File

@ -0,0 +1,22 @@
<template>
<sl-dialog ref="dialogRef" :open="open" @sl-hide="handleHide" :label="label">
<slot />
<div slot="footer">
<slot name="footer" />
</div>
</sl-dialog>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { useBubbleSafeHandler } from '@/composables/useBubbleSafeHandler'
const props = defineProps<{ label: string; open: boolean }>()
const emit = defineEmits<{ (e: 'hide'): void }>()
const dialogRef = ref<HTMLSlDrawerElement>()
const handleHide = useBubbleSafeHandler(dialogRef, () => {
emit('hide')
})
</script>

6
packages/sshecret-frontend/src/components/common/MasterTabs.vue
View File

@ -9,17 +9,23 @@
<sl-tab slot="nav" panel="audit" :active="selectedTab === 'audit'">Audit</sl-tab>
<sl-tab-panel name="clients">
<slot name="clients">
<template v-if="selectedTab === 'clients'">
<ClientTreeList />
</template>
</slot>
</sl-tab-panel>
<sl-tab-panel name="secrets">
<slot name="secrets">
<template v-if="selectedTab === 'secrets'">
<SecretTreeList />
</template>
</slot>
</sl-tab-panel>
<sl-tab-panel name="audit">
<slot name="audit">
<template v-if="selectedTab === 'audit'">
<AuditFilters />
</template>
</slot>
</sl-tab-panel>
</sl-tab-group>

25
packages/sshecret-frontend/src/components/common/NotFound.vue Normal file
View File

@ -0,0 +1,25 @@
<template>
<div class="flex flex-col justify-center items-center px-6 xl:px-0 dark:bg-gray-900">
<div class="text-center xl:max-w-4xl">
<h1
class="mb-3 text-2xl font-bold leading-tight text-gray-900 sm:text-4xl lg:text-5xl dark:text-white"
>
Not found
</h1>
<p class="mb-5 text-base font-normal text-gray-500 md:text-lg dark:text-gray-400">
Oops! Looks like you followed a link to an item that does not exist anymore. The item may
have been deleted.
</p>
<sl-button @click="router.go(-1)">
<sl-icon name="arrow-left" slot="prefix"></sl-icon>
Back
</sl-button>
</div>
</div>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router'
const router = useRouter()
</script>

57
packages/sshecret-frontend/src/components/secrets/SecretDetail.vue
View File

@ -1,23 +1,15 @@
<template>
<div class="flex justify-end px-4">
<button
id="secret-menu-button"
class="inline-block text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:ring-4 focus:outline-none focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-1.5"
type="button"
>
<span class="sr-only">Open dropdown</span>
<svg
class="w-5 h-5"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 16 3"
>
<path
d="M2 0a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm6.041 0a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM14 0a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Z"
/>
</svg>
</button>
<sl-dropdown>
<div slot="trigger">
<sl-icon-button name="three-dots"></sl-icon-button>
</div>
<sl-menu>
<sl-menu-item value="delete">
<span class="text-red-600" @click="showConfirm = true">Delete secret</span>
</sl-menu-item>
</sl-menu>
</sl-dropdown>
</div>
<sl-tab-group>
<sl-tab slot="nav" panel="secret_data">Secret Data</sl-tab>
@ -100,6 +92,21 @@
Secret is not managed, and can only decrypted by the client
</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">Group</dt>
<dd
class="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0 dark:text-gray-300"
v-if="secret.group"
>
{{ secret.group.path }}
<div class="mt-2 float-right">
<sl-button size="medium" variant="default" outline>
<sl-icon slot="prefix" name="box-arrow-in-right"></sl-icon>
Move
</sl-button>
</div>
</dd>
</div>
</dl>
</div>
@ -165,6 +172,13 @@
v-if="addDialog"
/>
</sl-drawer>
<Dialog label="Are you sure?" :open="showConfirm" @hide="showConfirm = false">
Are you sure you want to delete this secret?
<template #footer>
<sl-button variant="default" @click="showConfirm = false" class="mr-2">Cancel</sl-button>
<sl-button variant="danger" @click="deleteSecret">Delete</sl-button>
</template>
</Dialog>
</template>
<script setup lang="ts">
@ -173,6 +187,7 @@ import type { SecretView } from '@/client/types.gen.ts'
import AuditTable from '@/components/audit/AuditTable.vue'
import AddSecretToClients from '@/components/secrets/AddSecretToClients.vue'
import Dialog from '@/components/common/Dialog.vue'
const props = defineProps<{ secret: SecretView }>()
const emit = defineEmits<{
@ -190,6 +205,8 @@ const secretValue = ref<string | null>(secret.value?.secret)
const addDialog = ref<boolean>(false)
const showConfirm = ref<boolean>(false)
const secretChanged = computed(() => {
if (!secretValue.value) {
return false
@ -223,4 +240,8 @@ function removeClient(clientId: string, event: any) {
console.log(event.target.parentNode)
emit('removeClient', clientId)
}
function deleteSecret() {
showConfirm.value = false
emit('delete')
}
</script>

6
packages/sshecret-frontend/src/components/secrets/SecretForm.vue
View File

@ -108,10 +108,14 @@ function submitCreateSecret() {
if (createSecretForm.value?.checkValidity()) {
console.log('SelectedClients: ', selectedClients.value)
const secretGroup = props.group ?? null
let secretClients = []
if (Array.isArray(selectedClients.value)) {
secretClients = [...selectedClients.value]
}
const secretCreate: SecretCreate = {
value: secretValue.value,
name: secretName.value,
clients: [...selectedClients.value],
clients: secretClients,
client_distinguisher: 'id',
group: secretGroup,
}

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

@ -1,7 +1,7 @@
import { createRouter, createWebHistory } from 'vue-router'
import LoginPage from '@/views/LoginPage.vue'
import WorkspaceView from '@/views/WorkspaceView.vue'
import Dashboard from '@/views/Dashboard.vue'
import AuditPage from '@/views/audit/AuditPage.vue'
import ClientPage from '@/views/clients/ClientPage.vue'
import SecretPage from '@/views/secrets/SecretPage.vue'
@ -17,9 +17,11 @@ const routes = [
{ path: '/login', name: 'login', component: LoginPage },
{
path: '/',
name: 'clientList',
component: WorkspaceView,
component: ClientPage,
meta: { requiresAuth: true },
children: [{
path: '', component: Dashboard, name: 'dashboard', meta: { requiresAuth: true },
}],
},
{
path: '/audit', name: 'audit', component: AuditPage, meta: { requiresAuth: true }

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

@ -3,6 +3,7 @@ import { SshecretObjectType } from '@/api/types'
import type { SshecretObject } from '@/api/types'
import { SshecretAdmin } from '@/client'
import type { ClientQueryResult, Client, SecretView, ClientSecretGroupList, SecretListView, ClientSecretGroup } from '@/client'
import { assertSdkResponseOk } from '@/api/assertSdkResponseOk'
export const useTreeState = defineStore('treeState', {
state: () => ({
@ -55,12 +56,9 @@ export const useTreeState = defineStore('treeState', {
limit,
}
})
if (response.data) {
this.clients = response.data
return response.data.total_results
}
this.clients = null
return 0
const clientData = assertSdkResponseOk(response)
this.clients = clientData
return clientData.total_results
},
async queryClients(query: string, offset: number = 0, limit: number = 100): Promise<number> {
// Query or search. Result is the number of hits.
@ -74,30 +72,21 @@ export const useTreeState = defineStore('treeState', {
}
})
if (response.data) {
this.clients = response.data
return response.data.total_results
}
this.clients = null
return 0
const clientData = assertSdkResponseOk(response)
this.clients = clientData
return clientData.total_results
},
async getSecretNames(): Promise<boolean> {
// Get all secret names.
const response = await SshecretAdmin.getSecretNamesApiV1SecretsGet()
if (response.data) {
this.secrets = response.data
this.secrets = assertSdkResponseOk(response)
return true
}
return false
},
async getSecretGroups(): Promise<boolean> {
const response = await SshecretAdmin.getSecretGroupsApiV1SecretsGroupsGet()
if (response.data) {
this.secretGroups = response.data
this.secretGroups = assertSdkResponseOk(response)
return true
}
return false
},
async getClient(id: string | null = null): Promise<Client> {
if (!id && this.selected?.objectType === SshecretObjectType.Client) {
@ -115,24 +104,15 @@ export const useTreeState = defineStore('treeState', {
}
}
const response = await SshecretAdmin.getClientApiV1ClientsIdGet({ path: { id: id } })
if (response.data) {
return response.data
}
throw "Client not found"
return assertSdkResponseOk(response)
},
async getSecret(name: string): Promise<SecretView> {
const response = await SshecretAdmin.getSecretApiV1SecretsNameGet({ path: { name: name } })
if (response.data) {
return response.data
}
throw "Secret not found"
return assertSdkResponseOk(response)
},
async getGroup(path: string): Promise<ClientSecretGroup> {
const response = await SshecretAdmin.getSecretGroupApiV1SecretsGroupsGroupPathGet({ path: { group_path: path } })
if (response.data) {
return response.data
}
throw "Group not found"
return assertSdkResponseOk(response)
},
async getSelected(): Promise<Client | SecretView | ClientSecretGroup | null> {
if (!this.selected) {
@ -156,13 +136,11 @@ export const useTreeState = defineStore('treeState', {
if (clientIndex >= 0) {
console.log("found client at index: ", clientIndex, this.clients.clients[clientIndex])
const response = await SshecretAdmin.getClientApiV1ClientsIdGet({ path: { id: id } })
if (response.data) {
const newClient = response.data
const newClient = assertSdkResponseOk(response)
this.clients.clients = this.clients.clients.map(c => c.id === id ? newClient : c)
return true
}
}
}
return false
},
bumpGroupRevision() {

113
packages/sshecret-frontend/src/views/Dashboard.vue Normal file
View File

@ -0,0 +1,113 @@
<template>
<div class="px-4 pt-6">
<div class="grid w-full grid-cols-1 gap-4 mt-4 xl:grid-cols-2 2xl:grid-cols-3">
<div
class="items-center justify-between p-4 bg-white border border-gray-200 rounded-lg shadow-sm sm:flex dark:border-gray-700 sm:p-6 dark:bg-gray-800"
id="dashboard-stats-panel"
>
<div class="w-full">
<h3 class="text-base text-gray-500 dark:text-gray-400">Stats</h3>
<dl
class="max-w-md text-gray-900 divide-y divide-gray-200 dark:text-white dark:divide-gray-700"
v-if="stats"
>
<div class="flex flex-col pb-3">
<dt class="mb-1 text-gray-500 text-xs dark:text-gray-400">Clients</dt>
<dd class="text-lg font-semibold" id="stats-client-count">
{{ stats.clients }}
</dd>
</div>
<div class="flex flex-col py-3">
<dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Secrets</dt>
<dd class="text-lg font-semibold" id="stats-secret-count">
{{ stats.secrets }}
</dd>
</div>
<div class="flex flex-col py-3">
<dt class="mb-1 text-gray-500 md:text-xs dark:text-gray-400">Audit Events</dt>
<dd class="text-lg font-semibold" id="stats-audit-count">
{{ stats.audit_events }}
</dd>
</div>
</dl>
<dl
class="max-w-md text-gray-900 divide-y divide-gray-200 dark:text-white dark:divide-gray-700"
v-else
>
<div class="flex flex-col pb-3">
<dt class="mb-1 text-gray-500 text-xs dark:text-gray-400">
<sl-skeleton effect="pulse" class="stat-skeleton"></sl-skeleton>
</dt>
<dd class="text-lg font-semibold" id="stats-client-count">
<sl-skeleton class="stat-val-skeleton" effect="pulse"></sl-skeleton>
</dd>
</div>
<div class="flex flex-col pb-3">
<dt class="mb-1 text-gray-500 text-xs dark:text-gray-400">
<sl-skeleton effect="pulse" class="stat-skeleton"></sl-skeleton>
</dt>
<dd class="text-lg font-semibold" id="stats-client-count">
<sl-skeleton class="stat-val-skeleton" effect="pulse"></sl-skeleton>
</dd>
</div>
<div class="flex flex-col pb-3">
<dt class="mb-1 text-gray-500 text-xs dark:text-gray-400">
<sl-skeleton effect="pulse" class="stat-skeleton"></sl-skeleton>
</dt>
<dd class="text-lg font-semibold" id="stats-client-count">
<sl-skeleton class="stat-val-skeleton" effect="pulse"></sl-skeleton>
</dd>
</div>
</dl>
</div>
</div>
<div
class="items-center 2xl: col-span-2 xl:col-span-2 justify-between p-4 bg-white border border-gray-200 rounded-lg shadow-sm sm:flex dark:border-gray-700 sm:p-6 dark:bg-gray-800"
>
<div class="w-full">
<h3 class="text-base font-normal text-gray-500 dark:text-gray-400">Last Login Events</h3>
<AuditTable :auditFilter="loginAuditFilter" :paginate="false"></AuditTable>
</div>
</div>
<div
class="items-center 2xl:col-span-3 xl:col-span-3 justify-between p-4 bg-white border border-gray-200 rounded-lg shadow-sm sm:flex dark:border-gray-700 sm:p-6 dark:bg-gray-800"
>
<div class="w-full">
<h3 class="text-base font-normal text-gray-500 dark:text-gray-400">Last Audit Events</h3>
<AuditTable :auditFilter="auditFilter" :paginate="false"></AuditTable>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import type { SystemStats } from '@/client'
import type { AuditFilter } from '@/api/types'
import { SshecretAdmin } from '@/client'
import AuditTable from '@/components/audit/AuditTable.vue'
import { useAlertsStore } from '@/store/useAlertsStore'
const loginAuditFilter = {
operation: 'login',
limit: 10,
}
const auditFilter = { limit: 10 }
const stats = ref<SystemStats>({})
const alerts = useAlertsStore()
async function loadStats() {
const response = await SshecretAdmin.getSystemStatsApiV1StatsGet()
if (response.data) {
stats.value = response.data
} else {
alerts.showAlert('Unable to fetch stats', 'error')
}
}
onMounted(loadStats)
</script>

7
packages/sshecret-frontend/src/views/clients/ClientDetailPage.vue
View File

@ -7,7 +7,12 @@ 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 }>()
interface Props {
id: string
parentId?: string
}
const props = defineProps<Props>()
const router = useRouter()
const clientId = toRef(() => props.id)
const parentId = toRef(() => props.parentId)

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

@ -11,25 +11,30 @@
<script setup lang="ts">
import { ref, toRef, watch, onMounted } from 'vue'
import { assertSdkResponseOk } from '@/api/AssertSdkResponseOk'
import { ValidationError } from '@/api/errors'
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'
import { useAlertsStore } from '@/store/useAlertsStore'
const props = defineProps<{ id: string | null; parentId: string | null }>()
interface Props {
id: string
parentId?: string
}
const props = defineProps<Props>()
const clientId = toRef(() => props.id)
const client = ref<Client>()
const treeState = useTreeState()
const emit = defineEmits<{ (e: 'clientDeleted', data: string): void }>()
const alerts = useAlertsStore()
const updateErrors = ref([])
async function loadClient() {
console.log('loadClient called: ', props.id)
if (!props.id) return
client.value = await treeState.getClient(props.id)
}
@ -46,12 +51,27 @@ async function deleteClient(deleteId: string) {
emit('clientDeleted', deleteId)
}
function clearUpdateErrors() {
updateErrors.value = []
}
async function updateClient(updated: ClientCreate) {
const response = await SshecretAdmin.updateClientApiV1ClientsIdPut({
path: { id: idKey(localClient.value.id) },
body: data,
})
client.value = response.data
try {
const responseData = assertSdkResponseOk(response)
client.value = responseData
clearUpdateErrors()
} catch (err) {
if (err instanceof ValidationError) {
updateErrors.value = err.errors
} else {
const errorMessage = err.message ?? 'Unknown error'
alerts.showAlert(`Error from backend: ${errorMessage}`, 'error')
}
}
}
onMounted(loadClient)

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

@ -88,7 +88,13 @@
</div>
</div>
<sl-drawer label="Create Client" :open="createDrawerOpen" @sl-hide="createDrawerOpen = false">
<ClientForm @submit="createClient" @cancel="createDrawerOpen = false" :key="createFormKey" />
<ClientForm
@submit="createClient"
@cancel="createDrawerOpen = false"
@clearErrors="clearCreateErrors"
:key="createFormKey"
:errors="createErrors"
/>
</sl-drawer>
</template>
@ -101,6 +107,8 @@ import { usePagination } from '@/composables/usePagination'
import { SshecretAdmin } from '@/client/sdk.gen'
import type { Client, ClientCreate } from '@/client/types.gen'
import { ValidationError } from '@/api/errors'
import { assertSdkResponseOk } from '@/api/AssertSdkResponseOk'
import { useTreeState } from '@/store/useTreeState'
import { useRouter, useRoute } from 'vue-router'
@ -110,6 +118,7 @@ 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 { useAlertsStore } from '@/store/useAlertsStore'
import { useDebounce } from '@/composables/useDebounce'
const treeState = useTreeState()
@ -121,6 +130,8 @@ const clients = computed(() => treeState.clients.clients)
const selectedClient = ref<Client | null>(null)
const selectedSecret = ref<string | null>(null)
const createErrors = ref([])
const createFormKey = ref<number>(0)
const createDrawerOpen = ref<boolean>(false)
@ -135,6 +146,7 @@ const router = useRouter()
const clientQuery = toRef(() => props.loadClient)
const debouncedQuery = useDebounce(clientQuery, 300)
const alerts = useAlertsStore()
const { pageNum, offset, firstResult, lastResult, totalPages, nextPage, prevPage, goToPage } =
usePagination(totalClients, clientsPerPage)
@ -173,12 +185,28 @@ function itemSelected(event: Event) {
async function createClient(data: ClientCreate) {
const response = await SshecretAdmin.createClientApiV1ClientsPost({ body: data })
clients.value.unshift(response.data)
try {
const responseData = assertSdkResponseOk(response)
clients.value.unshift(responseData)
totalClients.value += 1
createDrawerOpen.value = false
createFormKey.value += 1
treeState.selectClient(response.data.id)
router.push({ name: 'Client', params: { id: response.data.id } })
treeState.selectClient(responseData.id)
router.push({ name: 'Client', params: { id: responseData.id } })
createErrors.value = []
} catch (err) {
if (err instanceof ValidationError) {
createErrors.value = err.errors
} else {
const errorMessage = err.message ?? 'Unknown error'
alerts.showAlert(`Error from backend: ${errorMessage}`, 'error')
}
}
}
function clearCreateErrors() {
// Clear any errors from the create form.
createErrors.value = []
}
async function clientDeleted(id: string) {

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

@ -1,5 +1,7 @@
<template>
<div>
<SecretSkeleton v-if="loading" />
<NotFound v-if="notfound" />
<SecretDetail
:secret="secret"
@update="updateSecretValue"
@ -8,26 +10,43 @@
@removeClient="removeClientSecret"
v-if="secret"
/>
<SecretSkeleton v-else />
</div>
</template>
<script setup lang="ts">
import { ref, watch, onMounted } from 'vue'
import SecretDetail from '@/components/secrets/SecretDetail.vue'
import SecretSkeleton from '@/components/secrets/SecretSkeleton.vue'
import NotFound from '@/components/common/NotFound.vue'
import { ApiError, NotFoundError, ValidationError } from '@/api/errors'
import { useTreeState } from '@/store/useTreeState'
import { useAlertsStore } from '@/store/useAlertsStore'
import type { SecretView } from '@/client/types.gen.ts'
import { SshecretAdmin } from '@/client'
const alerts = useAlertsStore()
const props = defineProps<{ id: string | null; parentId: string | null }>()
const secret = ref<SecretView>()
const treeState = useTreeState()
const notfound = ref(false)
const loading = ref(true)
async function loadSecret() {
if (!props.id) return
loading.value = true
try {
secret.value = await treeState.getSecret(props.id)
} catch (err) {
if (err instanceof NotFoundError) {
notfound.value = true
} else {
alerts.showAlert(`Error from backend: ${err.message}`, 'error')
}
} finally {
loading.value = false
}
}
async function updateSecretValue(value: string) {
@ -53,6 +72,8 @@ async function deleteSecret(clients: string[]) {
for (const clientId in clients) {
await treeState.refreshClient(clientId)
}
await treeState.getSecretGroups()
treeState.bumpGroupRevision()
}
}