Add vault secret manager frontend UI

Three-state page: not initialized → locked → unlocked.
Any user with vault.view can unlock (for store opening).
Admins can lock and change master password.

- Two-panel layout: categories on left, entries on right
- Entry reveal button shows decrypted value for 30s with copy
- Add/edit/delete entries and categories
- KeyRound icon in sidebar navigation
This commit is contained in:
Ryan Moon
2026-03-30 06:17:58 -05:00
parent 7246587955
commit 1f9297f533
4 changed files with 616 additions and 1 deletions

View File

@@ -0,0 +1,91 @@
import { queryOptions } from '@tanstack/react-query'
import { api } from '@/lib/api-client'
import type { VaultStatus, VaultCategory, VaultCategoryPermission, VaultEntry } from '@/types/vault'
import type { PaginatedResponse, PaginationInput } from '@forte/shared/schemas'
// --- Keys ---
export const vaultKeys = {
status: ['vault-status'] as const,
categories: ['vault-categories'] as const,
categoryDetail: (id: string) => ['vault-categories', id] as const,
categoryPermissions: (id: string) => ['vault-categories', id, 'permissions'] as const,
entries: (categoryId: string) => ['vault-entries', categoryId] as const,
entryList: (categoryId: string, params: PaginationInput) => ['vault-entries', categoryId, params] as const,
entryDetail: (id: string) => ['vault-entry', id] as const,
}
// --- Queries ---
export function vaultStatusOptions() {
return queryOptions({
queryKey: vaultKeys.status,
queryFn: () => api.get<VaultStatus>('/v1/vault/status'),
})
}
export function vaultCategoryListOptions() {
return queryOptions({
queryKey: vaultKeys.categories,
queryFn: () => api.get<{ data: VaultCategory[] }>('/v1/vault/categories'),
})
}
export function vaultCategoryDetailOptions(id: string) {
return queryOptions({
queryKey: vaultKeys.categoryDetail(id),
queryFn: () => api.get<VaultCategory>(`/v1/vault/categories/${id}`),
enabled: !!id,
})
}
export function vaultCategoryPermissionsOptions(id: string) {
return queryOptions({
queryKey: vaultKeys.categoryPermissions(id),
queryFn: () => api.get<{ data: VaultCategoryPermission[] }>(`/v1/vault/categories/${id}/permissions`),
enabled: !!id,
})
}
export function vaultEntryListOptions(categoryId: string, params: PaginationInput) {
return queryOptions({
queryKey: vaultKeys.entryList(categoryId, params),
queryFn: () => api.get<PaginatedResponse<VaultEntry>>(`/v1/vault/categories/${categoryId}/entries`, params),
enabled: !!categoryId,
})
}
export function vaultEntryDetailOptions(id: string) {
return queryOptions({
queryKey: vaultKeys.entryDetail(id),
queryFn: () => api.get<VaultEntry>(`/v1/vault/entries/${id}`),
enabled: !!id,
})
}
// --- Mutations ---
export const vaultMutations = {
initialize: (masterPassword: string) => api.post('/v1/vault/initialize', { masterPassword }),
unlock: (masterPassword: string) => api.post('/v1/vault/unlock', { masterPassword }),
lock: () => api.post('/v1/vault/lock', {}),
changeMasterPassword: (currentPassword: string, newPassword: string) =>
api.post('/v1/vault/change-master-password', { currentPassword, newPassword }),
}
export const vaultCategoryMutations = {
create: (data: Record<string, unknown>) => api.post<VaultCategory>('/v1/vault/categories', data),
update: (id: string, data: Record<string, unknown>) => api.patch<VaultCategory>(`/v1/vault/categories/${id}`, data),
delete: (id: string) => api.del<VaultCategory>(`/v1/vault/categories/${id}`),
addPermission: (categoryId: string, data: Record<string, unknown>) =>
api.post<VaultCategoryPermission>(`/v1/vault/categories/${categoryId}/permissions`, data),
removePermission: (permId: string) => api.del<VaultCategoryPermission>(`/v1/vault/category-permissions/${permId}`),
}
export const vaultEntryMutations = {
create: (categoryId: string, data: Record<string, unknown>) =>
api.post<VaultEntry>(`/v1/vault/categories/${categoryId}/entries`, data),
update: (id: string, data: Record<string, unknown>) => api.patch<VaultEntry>(`/v1/vault/entries/${id}`, data),
delete: (id: string) => api.del<VaultEntry>(`/v1/vault/entries/${id}`),
reveal: (id: string) => api.post<{ value: string | null }>(`/v1/vault/entries/${id}/reveal`, {}),
}