98 lines
3.3 KiB
Vue
98 lines
3.3 KiB
Vue
<script setup lang="ts">
|
|
const vault = useVault()
|
|
|
|
const keys = ref<any[]>([])
|
|
const loading = ref(true)
|
|
const showImport = ref(false)
|
|
const deletingId = ref<number | null>(null)
|
|
|
|
async function load() {
|
|
loading.value = true
|
|
try {
|
|
keys.value = (await vault.listKeys()) as any[]
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
async function confirmDelete(key: any) {
|
|
if (!confirm(`Delete SSH key "${key.name}"? This cannot be undone.`)) return
|
|
deletingId.value = key.id
|
|
try {
|
|
await vault.deleteKey(key.id)
|
|
await load()
|
|
} finally {
|
|
deletingId.value = null
|
|
}
|
|
}
|
|
|
|
function formatDate(iso: string) {
|
|
return new Date(iso).toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' })
|
|
}
|
|
|
|
onMounted(load)
|
|
</script>
|
|
|
|
<template>
|
|
<div class="max-w-4xl mx-auto p-6">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<div class="flex items-center gap-3">
|
|
<NuxtLink to="/vault" class="text-gray-500 hover:text-gray-300 text-sm">Vault</NuxtLink>
|
|
<span class="text-gray-700">/</span>
|
|
<h2 class="text-xl font-bold text-white">SSH Keys</h2>
|
|
</div>
|
|
<button @click="showImport = true"
|
|
class="px-3 py-1.5 bg-wraith-600 hover:bg-wraith-700 text-white text-sm rounded">
|
|
Import Key
|
|
</button>
|
|
</div>
|
|
|
|
<div v-if="loading" class="text-gray-500 text-sm">Loading...</div>
|
|
|
|
<div v-else-if="keys.length === 0" class="text-center py-12 text-gray-600">
|
|
<p>No SSH keys yet.</p>
|
|
<button @click="showImport = true" class="mt-3 text-wraith-400 hover:text-wraith-300 text-sm">
|
|
Import your first key
|
|
</button>
|
|
</div>
|
|
|
|
<div v-else class="bg-gray-800 rounded-lg border border-gray-700 overflow-hidden">
|
|
<table class="w-full text-sm">
|
|
<thead>
|
|
<tr class="border-b border-gray-700 text-gray-400">
|
|
<th class="text-left px-4 py-3 font-medium">Name</th>
|
|
<th class="text-left px-4 py-3 font-medium">Type</th>
|
|
<th class="text-left px-4 py-3 font-medium">Fingerprint</th>
|
|
<th class="text-left px-4 py-3 font-medium">Created</th>
|
|
<th class="px-4 py-3"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="key in keys" :key="key.id"
|
|
class="border-b border-gray-700/50 hover:bg-gray-700/30">
|
|
<td class="px-4 py-3 text-white font-medium">{{ key.name }}</td>
|
|
<td class="px-4 py-3">
|
|
<span class="px-2 py-0.5 bg-gray-700 text-gray-300 rounded text-xs font-mono">
|
|
{{ key.keyType || 'rsa' }}
|
|
</span>
|
|
</td>
|
|
<td class="px-4 py-3 text-gray-400 font-mono text-xs">
|
|
{{ key.fingerprint || '—' }}
|
|
</td>
|
|
<td class="px-4 py-3 text-gray-400">{{ formatDate(key.createdAt) }}</td>
|
|
<td class="px-4 py-3 text-right">
|
|
<button @click="confirmDelete(key)"
|
|
:disabled="deletingId === key.id"
|
|
class="text-xs text-red-400 hover:text-red-300 disabled:opacity-50">
|
|
{{ deletingId === key.id ? 'Deleting...' : 'Delete' }}
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<KeyImportDialog v-model:visible="showImport" @imported="load" />
|
|
</div>
|
|
</template>
|