47 lines
1.4 KiB
Vue
47 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
const input = ref('')
|
|
const protocol = ref<'ssh' | 'rdp'>('ssh')
|
|
|
|
const emit = defineEmits<{
|
|
connect: [{ hostname: string; port: number; username: string; protocol: 'ssh' | 'rdp' }]
|
|
}>()
|
|
|
|
function handleConnect() {
|
|
const raw = input.value.trim()
|
|
if (!raw) return
|
|
|
|
// Parse user@hostname:port format
|
|
let username = ''
|
|
let hostname = raw
|
|
let port = protocol.value === 'rdp' ? 3389 : 22
|
|
|
|
if (hostname.includes('@')) {
|
|
[username, hostname] = hostname.split('@')
|
|
}
|
|
if (hostname.includes(':')) {
|
|
const parts = hostname.split(':')
|
|
hostname = parts[0]
|
|
port = parseInt(parts[1], 10)
|
|
}
|
|
|
|
emit('connect', { hostname, port, username, protocol: protocol.value })
|
|
input.value = ''
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex items-center gap-2 px-3 py-2 bg-gray-800 border-b border-gray-700">
|
|
<select v-model="protocol" class="bg-gray-700 text-gray-300 text-xs rounded px-2 py-1.5 border-none">
|
|
<option value="ssh">SSH</option>
|
|
<option value="rdp">RDP</option>
|
|
</select>
|
|
<input
|
|
v-model="input"
|
|
@keydown.enter="handleConnect"
|
|
:placeholder="`user@hostname:${protocol === 'rdp' ? '3389' : '22'}`"
|
|
class="flex-1 bg-gray-900 text-white px-3 py-1.5 rounded text-sm border border-gray-700 focus:border-wraith-500 focus:outline-none"
|
|
/>
|
|
<button @click="handleConnect" class="text-sm text-wraith-400 hover:text-wraith-300 px-2">Connect</button>
|
|
</div>
|
|
</template>
|