feat: frontend — auth flow, connection manager UI, host tree
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Vantz Stockwell
parent
6fa8f6c5d8
commit
b93fe016ed
103
frontend/components/connections/GroupEditDialog.vue
Normal file
103
frontend/components/connections/GroupEditDialog.vue
Normal file
@ -0,0 +1,103 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { Dialog, InputText, Select, Button } from 'primevue'
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
visible: boolean
|
||||||
|
group?: any | null
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const emit = defineEmits<{
|
||||||
|
(e: 'update:visible', val: boolean): void
|
||||||
|
(e: 'saved'): void
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const connections = useConnectionStore()
|
||||||
|
|
||||||
|
const form = ref({
|
||||||
|
name: '',
|
||||||
|
parentId: null as number | null,
|
||||||
|
})
|
||||||
|
|
||||||
|
const saving = ref(false)
|
||||||
|
const error = ref('')
|
||||||
|
|
||||||
|
const isEdit = computed(() => !!props.group?.id)
|
||||||
|
const title = computed(() => isEdit.value ? 'Edit Group' : 'New Group')
|
||||||
|
|
||||||
|
const parentOptions = computed(() => {
|
||||||
|
const options = [{ label: 'No Parent (top-level)', value: null }]
|
||||||
|
// Flatten groups for parent selection, excluding self if editing
|
||||||
|
const addGroups = (groups: any[], prefix = '') => {
|
||||||
|
for (const g of groups) {
|
||||||
|
if (isEdit.value && g.id === props.group?.id) continue
|
||||||
|
options.push({ label: prefix + g.name, value: g.id })
|
||||||
|
if (g.children?.length) addGroups(g.children, prefix + g.name + ' / ')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
addGroups(connections.groups)
|
||||||
|
return options
|
||||||
|
})
|
||||||
|
|
||||||
|
watch(() => props.visible, (v) => {
|
||||||
|
if (v) {
|
||||||
|
form.value = {
|
||||||
|
name: props.group?.name || '',
|
||||||
|
parentId: props.group?.parentId ?? null,
|
||||||
|
}
|
||||||
|
error.value = ''
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
async function save() {
|
||||||
|
error.value = ''
|
||||||
|
saving.value = true
|
||||||
|
try {
|
||||||
|
if (isEdit.value) {
|
||||||
|
await connections.updateGroup(props.group.id, form.value)
|
||||||
|
} else {
|
||||||
|
await connections.createGroup(form.value)
|
||||||
|
}
|
||||||
|
emit('saved')
|
||||||
|
emit('update:visible', false)
|
||||||
|
} catch (e: any) {
|
||||||
|
error.value = e.data?.message || 'Failed to save group'
|
||||||
|
} finally {
|
||||||
|
saving.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Dialog
|
||||||
|
:visible="visible"
|
||||||
|
@update:visible="emit('update:visible', $event)"
|
||||||
|
:header="title"
|
||||||
|
:modal="true"
|
||||||
|
:closable="true"
|
||||||
|
:style="{ width: '380px' }"
|
||||||
|
>
|
||||||
|
<div class="space-y-4 pt-2">
|
||||||
|
<!-- Name -->
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm text-gray-400 mb-1">Group Name *</label>
|
||||||
|
<InputText v-model="form.name" placeholder="Production Servers" class="w-full" autofocus />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Parent -->
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm text-gray-400 mb-1">Parent Group</label>
|
||||||
|
<Select v-model="form.parentId" :options="parentOptions" optionLabel="label" optionValue="value" class="w-full" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Error -->
|
||||||
|
<p v-if="error" class="text-red-400 text-sm">{{ error }}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<template #footer>
|
||||||
|
<div class="flex justify-end gap-2">
|
||||||
|
<Button label="Cancel" severity="secondary" @click="emit('update:visible', false)" />
|
||||||
|
<Button :label="saving ? 'Saving...' : 'Save'" :disabled="saving || !form.name" @click="save" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</Dialog>
|
||||||
|
</template>
|
||||||
97
frontend/components/connections/HostCard.vue
Normal file
97
frontend/components/connections/HostCard.vue
Normal file
@ -0,0 +1,97 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
interface Host {
|
||||||
|
id: number
|
||||||
|
name: string
|
||||||
|
hostname: string
|
||||||
|
port: number
|
||||||
|
protocol: 'ssh' | 'rdp'
|
||||||
|
tags: string[]
|
||||||
|
notes: string | null
|
||||||
|
color: string | null
|
||||||
|
lastConnectedAt: string | null
|
||||||
|
group: { id: number; name: string } | null
|
||||||
|
}
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
host: Host
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const emit = defineEmits<{
|
||||||
|
(e: 'edit'): void
|
||||||
|
(e: 'delete'): void
|
||||||
|
(e: 'connect'): void
|
||||||
|
}>()
|
||||||
|
|
||||||
|
function formatLastConnected(ts: string | null): string {
|
||||||
|
if (!ts) return 'Never'
|
||||||
|
const d = new Date(ts)
|
||||||
|
const now = new Date()
|
||||||
|
const diffMs = now.getTime() - d.getTime()
|
||||||
|
const diffDays = Math.floor(diffMs / 86400000)
|
||||||
|
if (diffDays === 0) return 'Today'
|
||||||
|
if (diffDays === 1) return 'Yesterday'
|
||||||
|
if (diffDays < 30) return `${diffDays}d ago`
|
||||||
|
return d.toLocaleDateString()
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div
|
||||||
|
class="relative bg-gray-900 border border-gray-800 rounded-lg p-4 hover:border-wraith-700 transition-colors group cursor-pointer"
|
||||||
|
@click="emit('connect')"
|
||||||
|
>
|
||||||
|
<!-- Color indicator strip -->
|
||||||
|
<div
|
||||||
|
v-if="host.color"
|
||||||
|
class="absolute top-0 left-0 w-1 h-full rounded-l-lg"
|
||||||
|
:style="{ backgroundColor: host.color }"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- Header row -->
|
||||||
|
<div class="flex items-start justify-between gap-2 pl-2">
|
||||||
|
<div class="min-w-0 flex-1">
|
||||||
|
<h3 class="font-semibold text-white truncate">{{ host.name }}</h3>
|
||||||
|
<p class="text-sm text-gray-500 truncate">{{ host.hostname }}:{{ host.port }}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Protocol badge -->
|
||||||
|
<span
|
||||||
|
class="text-xs font-medium px-2 py-0.5 rounded shrink-0"
|
||||||
|
:class="host.protocol === 'rdp'
|
||||||
|
? 'bg-purple-900/50 text-purple-300 border border-purple-800'
|
||||||
|
: 'bg-wraith-900/50 text-wraith-300 border border-wraith-800'"
|
||||||
|
>{{ host.protocol.toUpperCase() }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Group + last connected -->
|
||||||
|
<div class="mt-2 pl-2 flex items-center justify-between text-xs text-gray-600">
|
||||||
|
<span v-if="host.group" class="truncate">{{ host.group.name }}</span>
|
||||||
|
<span v-else class="italic">Ungrouped</span>
|
||||||
|
<span>{{ formatLastConnected(host.lastConnectedAt) }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Tags -->
|
||||||
|
<div v-if="host.tags?.length" class="mt-2 pl-2 flex flex-wrap gap-1">
|
||||||
|
<span
|
||||||
|
v-for="tag in host.tags"
|
||||||
|
:key="tag"
|
||||||
|
class="text-xs bg-gray-800 text-gray-400 px-1.5 py-0.5 rounded"
|
||||||
|
>{{ tag }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Action buttons (show on hover) -->
|
||||||
|
<div
|
||||||
|
class="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity flex gap-1"
|
||||||
|
@click.stop
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
@click="emit('edit')"
|
||||||
|
class="text-xs bg-gray-800 hover:bg-gray-700 text-gray-400 hover:text-white px-2 py-1 rounded"
|
||||||
|
>Edit</button>
|
||||||
|
<button
|
||||||
|
@click="emit('delete')"
|
||||||
|
class="text-xs bg-gray-800 hover:bg-red-900 text-gray-400 hover:text-red-300 px-2 py-1 rounded"
|
||||||
|
>Delete</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
240
frontend/components/connections/HostEditDialog.vue
Normal file
240
frontend/components/connections/HostEditDialog.vue
Normal file
@ -0,0 +1,240 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { Dialog, InputText, Select, Textarea, InputGroup, InputGroupAddon, ToggleSwitch, Tag, Button } from 'primevue'
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
visible: boolean
|
||||||
|
host: any | null
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const emit = defineEmits<{
|
||||||
|
(e: 'update:visible', val: boolean): void
|
||||||
|
(e: 'saved'): void
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const connections = useConnectionStore()
|
||||||
|
const auth = useAuthStore()
|
||||||
|
|
||||||
|
const form = ref({
|
||||||
|
name: '',
|
||||||
|
hostname: '',
|
||||||
|
port: 22,
|
||||||
|
protocol: 'ssh' as 'ssh' | 'rdp',
|
||||||
|
groupId: null as number | null,
|
||||||
|
credentialId: null as number | null,
|
||||||
|
tags: [] as string[],
|
||||||
|
notes: '',
|
||||||
|
color: '',
|
||||||
|
})
|
||||||
|
|
||||||
|
const tagInput = ref('')
|
||||||
|
const saving = ref(false)
|
||||||
|
const error = ref('')
|
||||||
|
|
||||||
|
const isEdit = computed(() => !!props.host?.id)
|
||||||
|
const title = computed(() => isEdit.value ? 'Edit Host' : 'New Host')
|
||||||
|
|
||||||
|
const protocolOptions = [
|
||||||
|
{ label: 'SSH', value: 'ssh' },
|
||||||
|
{ label: 'RDP', value: 'rdp' },
|
||||||
|
]
|
||||||
|
|
||||||
|
const groupOptions = computed(() => [
|
||||||
|
{ label: 'No Group', value: null },
|
||||||
|
...connections.groups.map((g: any) => ({ label: g.name, value: g.id })),
|
||||||
|
])
|
||||||
|
|
||||||
|
// Load credentials for dropdown
|
||||||
|
const credentials = ref<any[]>([])
|
||||||
|
const credentialOptions = computed(() => [
|
||||||
|
{ label: 'No Credential', value: null },
|
||||||
|
...credentials.value.map((c: any) => ({ label: c.name, value: c.id })),
|
||||||
|
])
|
||||||
|
|
||||||
|
async function loadCredentials() {
|
||||||
|
try {
|
||||||
|
credentials.value = await $fetch('/api/credentials', {
|
||||||
|
headers: { Authorization: `Bearer ${auth.token}` },
|
||||||
|
})
|
||||||
|
} catch {
|
||||||
|
credentials.value = []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
watch(() => props.visible, (v) => {
|
||||||
|
if (v) {
|
||||||
|
loadCredentials()
|
||||||
|
if (props.host?.id) {
|
||||||
|
// Edit mode — populate form
|
||||||
|
form.value = {
|
||||||
|
name: props.host.name || '',
|
||||||
|
hostname: props.host.hostname || '',
|
||||||
|
port: props.host.port || 22,
|
||||||
|
protocol: props.host.protocol || 'ssh',
|
||||||
|
groupId: props.host.groupId ?? null,
|
||||||
|
credentialId: props.host.credentialId ?? null,
|
||||||
|
tags: [...(props.host.tags || [])],
|
||||||
|
notes: props.host.notes || '',
|
||||||
|
color: props.host.color || '',
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// New host — reset with optional groupId pre-fill
|
||||||
|
form.value = {
|
||||||
|
name: '',
|
||||||
|
hostname: '',
|
||||||
|
port: props.host?.groupId ? 22 : 22,
|
||||||
|
protocol: 'ssh',
|
||||||
|
groupId: props.host?.groupId ?? null,
|
||||||
|
credentialId: null,
|
||||||
|
tags: [],
|
||||||
|
notes: '',
|
||||||
|
color: '',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
error.value = ''
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// Auto-set default port when protocol changes
|
||||||
|
watch(() => form.value.protocol, (proto) => {
|
||||||
|
if (proto === 'rdp' && form.value.port === 22) form.value.port = 3389
|
||||||
|
if (proto === 'ssh' && form.value.port === 3389) form.value.port = 22
|
||||||
|
})
|
||||||
|
|
||||||
|
function addTag() {
|
||||||
|
const t = tagInput.value.trim()
|
||||||
|
if (t && !form.value.tags.includes(t)) {
|
||||||
|
form.value.tags.push(t)
|
||||||
|
}
|
||||||
|
tagInput.value = ''
|
||||||
|
}
|
||||||
|
|
||||||
|
function removeTag(tag: string) {
|
||||||
|
form.value.tags = form.value.tags.filter((t) => t !== tag)
|
||||||
|
}
|
||||||
|
|
||||||
|
async function save() {
|
||||||
|
error.value = ''
|
||||||
|
saving.value = true
|
||||||
|
try {
|
||||||
|
const payload = {
|
||||||
|
...form.value,
|
||||||
|
port: Number(form.value.port),
|
||||||
|
color: form.value.color || undefined,
|
||||||
|
notes: form.value.notes || undefined,
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isEdit.value) {
|
||||||
|
await connections.updateHost(props.host.id, payload)
|
||||||
|
} else {
|
||||||
|
await connections.createHost(payload)
|
||||||
|
}
|
||||||
|
|
||||||
|
emit('saved')
|
||||||
|
emit('update:visible', false)
|
||||||
|
} catch (e: any) {
|
||||||
|
error.value = e.data?.message || 'Failed to save host'
|
||||||
|
} finally {
|
||||||
|
saving.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Dialog
|
||||||
|
:visible="visible"
|
||||||
|
@update:visible="emit('update:visible', $event)"
|
||||||
|
:header="title"
|
||||||
|
:modal="true"
|
||||||
|
:closable="true"
|
||||||
|
:style="{ width: '480px' }"
|
||||||
|
class="bg-gray-900"
|
||||||
|
>
|
||||||
|
<div class="space-y-4 pt-2">
|
||||||
|
<!-- Name -->
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm text-gray-400 mb-1">Name *</label>
|
||||||
|
<InputText v-model="form.name" placeholder="My Server" class="w-full" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Hostname + Port -->
|
||||||
|
<div class="flex gap-3">
|
||||||
|
<div class="flex-1">
|
||||||
|
<label class="block text-sm text-gray-400 mb-1">Hostname / IP *</label>
|
||||||
|
<InputText v-model="form.hostname" placeholder="192.168.1.1" class="w-full" />
|
||||||
|
</div>
|
||||||
|
<div class="w-24">
|
||||||
|
<label class="block text-sm text-gray-400 mb-1">Port</label>
|
||||||
|
<InputText v-model.number="form.port" type="number" class="w-full" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Protocol -->
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm text-gray-400 mb-1">Protocol</label>
|
||||||
|
<Select v-model="form.protocol" :options="protocolOptions" optionLabel="label" optionValue="value" class="w-full" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Group -->
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm text-gray-400 mb-1">Group</label>
|
||||||
|
<Select v-model="form.groupId" :options="groupOptions" optionLabel="label" optionValue="value" class="w-full" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Credential -->
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm text-gray-400 mb-1">Credential</label>
|
||||||
|
<Select v-model="form.credentialId" :options="credentialOptions" optionLabel="label" optionValue="value" class="w-full" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Color -->
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm text-gray-400 mb-1">Color (optional)</label>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<input v-model="form.color" type="color" class="h-8 w-12 rounded cursor-pointer bg-gray-800 border-0" />
|
||||||
|
<span class="text-xs text-gray-500">{{ form.color || 'None' }}</span>
|
||||||
|
<button v-if="form.color" @click="form.color = ''" class="text-xs text-gray-600 hover:text-red-400">Clear</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Tags -->
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm text-gray-400 mb-1">Tags</label>
|
||||||
|
<div class="flex gap-2 mb-2">
|
||||||
|
<InputText
|
||||||
|
v-model="tagInput"
|
||||||
|
placeholder="Add tag..."
|
||||||
|
class="flex-1 text-sm"
|
||||||
|
@keydown.enter.prevent="addTag"
|
||||||
|
/>
|
||||||
|
<button @click="addTag" class="px-3 py-1.5 bg-gray-700 hover:bg-gray-600 text-sm rounded text-gray-300">Add</button>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-wrap gap-1">
|
||||||
|
<span
|
||||||
|
v-for="tag in form.tags"
|
||||||
|
:key="tag"
|
||||||
|
class="inline-flex items-center gap-1 bg-gray-800 text-gray-300 text-xs px-2 py-1 rounded"
|
||||||
|
>
|
||||||
|
{{ tag }}
|
||||||
|
<button @click="removeTag(tag)" class="text-gray-500 hover:text-red-400">×</button>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Notes -->
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm text-gray-400 mb-1">Notes</label>
|
||||||
|
<Textarea v-model="form.notes" rows="3" class="w-full text-sm" placeholder="Optional notes..." />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Error -->
|
||||||
|
<p v-if="error" class="text-red-400 text-sm">{{ error }}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<template #footer>
|
||||||
|
<div class="flex justify-end gap-2">
|
||||||
|
<Button label="Cancel" severity="secondary" @click="emit('update:visible', false)" />
|
||||||
|
<Button :label="saving ? 'Saving...' : 'Save'" :disabled="saving || !form.name || !form.hostname" @click="save" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</Dialog>
|
||||||
|
</template>
|
||||||
97
frontend/components/connections/HostTree.vue
Normal file
97
frontend/components/connections/HostTree.vue
Normal file
@ -0,0 +1,97 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
interface Host {
|
||||||
|
id: number
|
||||||
|
name: string
|
||||||
|
hostname: string
|
||||||
|
port: number
|
||||||
|
protocol: 'ssh' | 'rdp'
|
||||||
|
color: string | null
|
||||||
|
}
|
||||||
|
|
||||||
|
interface HostGroup {
|
||||||
|
id: number
|
||||||
|
name: string
|
||||||
|
parentId: number | null
|
||||||
|
children: HostGroup[]
|
||||||
|
hosts: Host[]
|
||||||
|
}
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
groups: HostGroup[]
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const emit = defineEmits<{
|
||||||
|
(e: 'select-host', host: Host): void
|
||||||
|
(e: 'new-host', groupId?: number): void
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const expanded = ref<Set<number>>(new Set())
|
||||||
|
|
||||||
|
function toggleGroup(id: number) {
|
||||||
|
if (expanded.value.has(id)) {
|
||||||
|
expanded.value.delete(id)
|
||||||
|
} else {
|
||||||
|
expanded.value.add(id)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function isExpanded(id: number) {
|
||||||
|
return expanded.value.has(id)
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="flex-1 overflow-y-auto text-sm">
|
||||||
|
<!-- Groups -->
|
||||||
|
<template v-for="group in groups" :key="group.id">
|
||||||
|
<div>
|
||||||
|
<!-- Group header -->
|
||||||
|
<div
|
||||||
|
class="flex items-center gap-1 px-3 py-1.5 cursor-pointer hover:bg-gray-800 text-gray-400 hover:text-gray-200 select-none"
|
||||||
|
@click="toggleGroup(group.id)"
|
||||||
|
>
|
||||||
|
<span class="text-xs w-3">{{ isExpanded(group.id) ? '▾' : '▸' }}</span>
|
||||||
|
<span class="font-medium truncate flex-1">{{ group.name }}</span>
|
||||||
|
<button
|
||||||
|
@click.stop="emit('new-host', group.id)"
|
||||||
|
class="text-xs text-gray-600 hover:text-wraith-400 px-1"
|
||||||
|
title="Add host to group"
|
||||||
|
>+</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Group children (hosts + sub-groups) -->
|
||||||
|
<div v-if="isExpanded(group.id)" class="pl-3">
|
||||||
|
<!-- Sub-groups recursively -->
|
||||||
|
<HostTree
|
||||||
|
v-if="group.children?.length"
|
||||||
|
:groups="group.children"
|
||||||
|
@select-host="(h) => emit('select-host', h)"
|
||||||
|
@new-host="(gid) => emit('new-host', gid)"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- Hosts in this group -->
|
||||||
|
<div
|
||||||
|
v-for="host in group.hosts"
|
||||||
|
:key="host.id"
|
||||||
|
class="flex items-center gap-2 px-3 py-1 cursor-pointer hover:bg-gray-800 text-gray-300 hover:text-white"
|
||||||
|
@click="emit('select-host', host)"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="w-2 h-2 rounded-full shrink-0"
|
||||||
|
:style="host.color ? { backgroundColor: host.color } : {}"
|
||||||
|
:class="!host.color ? 'bg-gray-600' : ''"
|
||||||
|
/>
|
||||||
|
<span class="truncate flex-1">{{ host.name }}</span>
|
||||||
|
<span
|
||||||
|
class="text-xs px-1 rounded"
|
||||||
|
:class="host.protocol === 'rdp' ? 'text-purple-400 bg-purple-900/30' : 'text-wraith-400 bg-wraith-900/30'"
|
||||||
|
>{{ host.protocol.toUpperCase() }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<!-- Ungrouped hosts (shown at root level when no groups) -->
|
||||||
|
<div v-if="!groups.length" class="px-3 py-2 text-gray-600 text-xs">No groups yet</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
28
frontend/layouts/default.vue
Normal file
28
frontend/layouts/default.vue
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
const auth = useAuthStore()
|
||||||
|
|
||||||
|
// Redirect to login if not authenticated
|
||||||
|
if (!auth.isAuthenticated) {
|
||||||
|
navigateTo('/login')
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="h-screen flex flex-col bg-gray-950 text-gray-100">
|
||||||
|
<!-- Top bar -->
|
||||||
|
<header class="h-12 flex items-center justify-between px-4 bg-gray-900 border-b border-gray-800 shrink-0">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<h1 class="text-lg font-bold tracking-wider text-wraith-400">WRAITH</h1>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<NuxtLink to="/vault" class="text-sm text-gray-400 hover:text-white">Vault</NuxtLink>
|
||||||
|
<NuxtLink to="/settings" class="text-sm text-gray-400 hover:text-white">Settings</NuxtLink>
|
||||||
|
<button @click="auth.logout()" class="text-sm text-gray-500 hover:text-red-400">Logout</button>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<!-- Main content -->
|
||||||
|
<div class="flex-1 flex overflow-hidden">
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
56
frontend/pages/index.vue
Normal file
56
frontend/pages/index.vue
Normal file
@ -0,0 +1,56 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
const connections = useConnectionStore()
|
||||||
|
const showHostDialog = ref(false)
|
||||||
|
const editingHost = ref<any>(null)
|
||||||
|
const showGroupDialog = ref(false)
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
await Promise.all([connections.fetchHosts(), connections.fetchTree()])
|
||||||
|
})
|
||||||
|
|
||||||
|
function openNewHost(groupId?: number) {
|
||||||
|
editingHost.value = groupId ? { groupId } : null
|
||||||
|
showHostDialog.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
function openEditHost(host: any) {
|
||||||
|
editingHost.value = host
|
||||||
|
showHostDialog.value = true
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="flex w-full">
|
||||||
|
<!-- Sidebar: Group tree -->
|
||||||
|
<aside class="w-64 bg-gray-900 border-r border-gray-800 flex flex-col overflow-y-auto shrink-0">
|
||||||
|
<div class="p-3 flex items-center justify-between">
|
||||||
|
<span class="text-sm font-medium text-gray-400">Connections</span>
|
||||||
|
<div class="flex gap-1">
|
||||||
|
<button @click="showGroupDialog = true" class="text-xs text-gray-500 hover:text-wraith-400" title="New Group">+ Group</button>
|
||||||
|
<button @click="openNewHost()" class="text-xs text-gray-500 hover:text-wraith-400" title="New Host">+ Host</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<HostTree :groups="connections.groups" @select-host="openEditHost" @new-host="openNewHost" />
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<!-- Main: host list or active sessions (sessions added in Phase 2) -->
|
||||||
|
<main class="flex-1 p-4 overflow-y-auto">
|
||||||
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
|
||||||
|
<HostCard
|
||||||
|
v-for="host in connections.hosts"
|
||||||
|
:key="host.id"
|
||||||
|
:host="host"
|
||||||
|
@edit="openEditHost(host)"
|
||||||
|
@delete="connections.deleteHost(host.id)"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<p v-if="!connections.hosts.length && !connections.loading" class="text-gray-600 text-center mt-12">
|
||||||
|
No hosts yet. Click "+ Host" to add your first connection.
|
||||||
|
</p>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<!-- Dialogs -->
|
||||||
|
<HostEditDialog v-model:visible="showHostDialog" :host="editingHost" @saved="connections.fetchHosts()" />
|
||||||
|
<GroupEditDialog v-model:visible="showGroupDialog" @saved="connections.fetchTree()" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
48
frontend/pages/login.vue
Normal file
48
frontend/pages/login.vue
Normal file
@ -0,0 +1,48 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
definePageMeta({ layout: 'auth' })
|
||||||
|
|
||||||
|
const auth = useAuthStore()
|
||||||
|
const email = ref('admin@wraith.local')
|
||||||
|
const password = ref('')
|
||||||
|
const error = ref('')
|
||||||
|
const loading = ref(false)
|
||||||
|
|
||||||
|
async function handleLogin() {
|
||||||
|
error.value = ''
|
||||||
|
loading.value = true
|
||||||
|
try {
|
||||||
|
await auth.login(email.value, password.value)
|
||||||
|
navigateTo('/')
|
||||||
|
} catch (e: any) {
|
||||||
|
error.value = e.data?.message || 'Login failed'
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="w-full max-w-sm">
|
||||||
|
<div class="text-center mb-8">
|
||||||
|
<h1 class="text-3xl font-bold text-white tracking-wide">WRAITH</h1>
|
||||||
|
<p class="text-gray-500 mt-1 text-sm">Remote Access Terminal</p>
|
||||||
|
</div>
|
||||||
|
<form @submit.prevent="handleLogin" class="space-y-4 bg-gray-900 p-6 rounded-lg border border-gray-800">
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm text-gray-400 mb-1">Email</label>
|
||||||
|
<input v-model="email" type="email" required autofocus
|
||||||
|
class="w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded text-white focus:border-wraith-500 focus:outline-none" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm text-gray-400 mb-1">Password</label>
|
||||||
|
<input v-model="password" type="password" required
|
||||||
|
class="w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded text-white focus:border-wraith-500 focus:outline-none" />
|
||||||
|
</div>
|
||||||
|
<p v-if="error" class="text-red-400 text-sm">{{ error }}</p>
|
||||||
|
<button type="submit" :disabled="loading"
|
||||||
|
class="w-full py-2 bg-wraith-600 hover:bg-wraith-700 text-white rounded font-medium disabled:opacity-50">
|
||||||
|
{{ loading ? 'Signing in...' : 'Sign In' }}
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
44
frontend/stores/auth.store.ts
Normal file
44
frontend/stores/auth.store.ts
Normal file
@ -0,0 +1,44 @@
|
|||||||
|
import { defineStore } from 'pinia'
|
||||||
|
|
||||||
|
interface User {
|
||||||
|
id: number
|
||||||
|
email: string
|
||||||
|
displayName: string | null
|
||||||
|
}
|
||||||
|
|
||||||
|
export const useAuthStore = defineStore('auth', {
|
||||||
|
state: () => ({
|
||||||
|
token: localStorage.getItem('wraith_token') || '',
|
||||||
|
user: null as User | null,
|
||||||
|
}),
|
||||||
|
getters: {
|
||||||
|
isAuthenticated: (state) => !!state.token,
|
||||||
|
},
|
||||||
|
actions: {
|
||||||
|
async login(email: string, password: string) {
|
||||||
|
const res = await $fetch<{ access_token: string; user: User }>('/api/auth/login', {
|
||||||
|
method: 'POST',
|
||||||
|
body: { email, password },
|
||||||
|
})
|
||||||
|
this.token = res.access_token
|
||||||
|
this.user = res.user
|
||||||
|
localStorage.setItem('wraith_token', res.access_token)
|
||||||
|
},
|
||||||
|
logout() {
|
||||||
|
this.token = ''
|
||||||
|
this.user = null
|
||||||
|
localStorage.removeItem('wraith_token')
|
||||||
|
navigateTo('/login')
|
||||||
|
},
|
||||||
|
async fetchProfile() {
|
||||||
|
if (!this.token) return
|
||||||
|
try {
|
||||||
|
this.user = await $fetch('/api/auth/profile', {
|
||||||
|
headers: { Authorization: `Bearer ${this.token}` },
|
||||||
|
})
|
||||||
|
} catch {
|
||||||
|
this.logout()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||
98
frontend/stores/connection.store.ts
Normal file
98
frontend/stores/connection.store.ts
Normal file
@ -0,0 +1,98 @@
|
|||||||
|
import { defineStore } from 'pinia'
|
||||||
|
import { useAuthStore } from './auth.store'
|
||||||
|
|
||||||
|
interface Host {
|
||||||
|
id: number
|
||||||
|
name: string
|
||||||
|
hostname: string
|
||||||
|
port: number
|
||||||
|
protocol: 'ssh' | 'rdp'
|
||||||
|
groupId: number | null
|
||||||
|
credentialId: number | null
|
||||||
|
tags: string[]
|
||||||
|
notes: string | null
|
||||||
|
color: string | null
|
||||||
|
lastConnectedAt: string | null
|
||||||
|
group: { id: number; name: string } | null
|
||||||
|
}
|
||||||
|
|
||||||
|
interface HostGroup {
|
||||||
|
id: number
|
||||||
|
name: string
|
||||||
|
parentId: number | null
|
||||||
|
children: HostGroup[]
|
||||||
|
hosts: Host[]
|
||||||
|
}
|
||||||
|
|
||||||
|
export const useConnectionStore = defineStore('connections', {
|
||||||
|
state: () => ({
|
||||||
|
hosts: [] as Host[],
|
||||||
|
groups: [] as HostGroup[],
|
||||||
|
search: '',
|
||||||
|
loading: false,
|
||||||
|
}),
|
||||||
|
actions: {
|
||||||
|
headers() {
|
||||||
|
const auth = useAuthStore()
|
||||||
|
return { Authorization: `Bearer ${auth.token}` }
|
||||||
|
},
|
||||||
|
async fetchHosts() {
|
||||||
|
this.loading = true
|
||||||
|
try {
|
||||||
|
this.hosts = await $fetch('/api/hosts', { headers: this.headers() })
|
||||||
|
} finally {
|
||||||
|
this.loading = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async fetchTree() {
|
||||||
|
this.groups = await $fetch('/api/groups/tree', { headers: this.headers() })
|
||||||
|
},
|
||||||
|
async createHost(data: Partial<Host>) {
|
||||||
|
const host = await $fetch<Host>('/api/hosts', {
|
||||||
|
method: 'POST',
|
||||||
|
body: data,
|
||||||
|
headers: this.headers(),
|
||||||
|
})
|
||||||
|
await this.fetchHosts()
|
||||||
|
return host
|
||||||
|
},
|
||||||
|
async updateHost(id: number, data: Partial<Host>) {
|
||||||
|
await $fetch(`/api/hosts/${id}`, {
|
||||||
|
method: 'PUT',
|
||||||
|
body: data,
|
||||||
|
headers: this.headers(),
|
||||||
|
})
|
||||||
|
await this.fetchHosts()
|
||||||
|
},
|
||||||
|
async deleteHost(id: number) {
|
||||||
|
await $fetch(`/api/hosts/${id}`, {
|
||||||
|
method: 'DELETE',
|
||||||
|
headers: this.headers(),
|
||||||
|
})
|
||||||
|
await this.fetchHosts()
|
||||||
|
},
|
||||||
|
async createGroup(data: { name: string; parentId?: number }) {
|
||||||
|
await $fetch('/api/groups', {
|
||||||
|
method: 'POST',
|
||||||
|
body: data,
|
||||||
|
headers: this.headers(),
|
||||||
|
})
|
||||||
|
await this.fetchTree()
|
||||||
|
},
|
||||||
|
async updateGroup(id: number, data: { name?: string; parentId?: number }) {
|
||||||
|
await $fetch(`/api/groups/${id}`, {
|
||||||
|
method: 'PUT',
|
||||||
|
body: data,
|
||||||
|
headers: this.headers(),
|
||||||
|
})
|
||||||
|
await this.fetchTree()
|
||||||
|
},
|
||||||
|
async deleteGroup(id: number) {
|
||||||
|
await $fetch(`/api/groups/${id}`, {
|
||||||
|
method: 'DELETE',
|
||||||
|
headers: this.headers(),
|
||||||
|
})
|
||||||
|
await this.fetchTree()
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||
Loading…
Reference in New Issue
Block a user