fix: inline vault modals to fix rendering issue

Same root cause as host/group dialogs — components in subdirectories
with Teleport don't render at runtime in Nuxt SPA builds. Inlined
CredentialForm and KeyImportDialog directly into their parent pages.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/pages/vault/credentials.vue

@@ -8,6 +8,18 @@ const showForm = ref(false)
 const editingCred = ref<any>(null)
 const deletingId = ref<number | null>(null)
 
+// Inline credential form state
+const credForm = ref({
+  name: '',
+  type: 'password' as 'password' | 'ssh_key',
+  username: '',
+  password: '',
+  sshKeyId: null as number | null,
+  domain: '',
+})
+const credSaving = ref(false)
+const credError = ref('')
+
 async function load() {
   loading.value = true
   try {
@@ -24,14 +36,65 @@ async function load() {
 
 function openCreate() {
   editingCred.value = null
+  credForm.value = { name: '', type: 'password', username: '', password: '', sshKeyId: null, domain: '' }
+  credError.value = ''
   showForm.value = true
 }
 
 function openEdit(cred: any) {
   editingCred.value = cred
+  credForm.value = {
+    name: cred.name || '',
+    type: cred.type || 'password',
+    username: cred.username || '',
+    password: '',
+    sshKeyId: cred.sshKeyId || null,
+    domain: cred.domain || '',
+  }
+  credError.value = ''
   showForm.value = true
 }
 
+function closeForm() {
+  showForm.value = false
+  editingCred.value = null
+}
+
+async function handleCredSubmit() {
+  if (!credForm.value.name.trim()) {
+    credError.value = 'Name is required.'
+    return
+  }
+  credSaving.value = true
+  credError.value = ''
+  try {
+    const payload: any = {
+      name: credForm.value.name.trim(),
+      type: credForm.value.type,
+      username: credForm.value.username.trim() || undefined,
+      domain: credForm.value.domain.trim() || undefined,
+    }
+    if (credForm.value.type === 'password' && credForm.value.password) {
+      payload.password = credForm.value.password
+    }
+    if (credForm.value.type === 'ssh_key' && credForm.value.sshKeyId) {
+      payload.sshKeyId = credForm.value.sshKeyId
+    }
+
+    if (editingCred.value) {
+      await vault.updateCredential(editingCred.value.id, payload)
+    } else {
+      await vault.createCredential(payload)
+    }
+    await load()
+    closeForm()
+  } catch (e: any) {
+    credError.value = e?.data?.message || 'Save failed.'
+  } finally {
+    credSaving.value = false
+  }
+}
+
 async function confirmDelete(cred: any) {
   if (!confirm(`Delete credential "${cred.name}"?`)) return
   deletingId.value = cred.id
@@ -109,11 +172,80 @@ onMounted(load)
       </table>
     </div>
 
-    <CredentialForm
+    <!-- Inline Credential Form Modal -->
-      v-model:visible="showForm"
+    <div v-if="showForm" class="fixed inset-0 flex items-center justify-center" style="z-index: 99999;">
-      :credential="editingCred"
+      <div class="absolute inset-0 bg-black bg-opacity-70" @click="closeForm" />
-      :ssh-keys="sshKeys"
+      <div class="relative w-full max-w-lg mx-4 p-6 rounded-lg shadow-2xl" style="background: #1a1a2e; border: 2px solid #4a9eff;">
-      @saved="load"
+        <h3 class="text-lg font-semibold text-white mb-4">
-    />
+          {{ editingCred ? 'Edit Credential' : 'New Credential' }}
+        </h3>
+
+        <div v-if="credError" class="mb-4 p-3 bg-red-900/50 border border-red-700 rounded text-red-300 text-sm">
+          {{ credError }}
+        </div>
+
+        <div class="space-y-4">
+          <div>
+            <label class="block text-sm text-gray-400 mb-1">Name <span class="text-red-400">*</span></label>
+            <input v-model="credForm.name" type="text" placeholder="e.g. prod-server-admin"
+              class="w-full bg-gray-900 text-white px-3 py-2 rounded border border-gray-600 focus:border-blue-500 focus:outline-none text-sm" />
+          </div>
+
+          <div>
+            <label class="block text-sm text-gray-400 mb-1">Type</label>
+            <select v-model="credForm.type"
+              class="w-full bg-gray-900 text-white px-3 py-2 rounded border border-gray-600 focus:border-blue-500 focus:outline-none text-sm">
+              <option value="password">Password</option>
+              <option value="ssh_key">SSH Key</option>
+            </select>
+          </div>
+
+          <div>
+            <label class="block text-sm text-gray-400 mb-1">Username</label>
+            <input v-model="credForm.username" type="text" placeholder="e.g. admin"
+              class="w-full bg-gray-900 text-white px-3 py-2 rounded border border-gray-600 focus:border-blue-500 focus:outline-none text-sm" />
+          </div>
+
+          <div v-if="credForm.type === 'password'">
+            <label class="block text-sm text-gray-400 mb-1">
+              Password <span v-if="editingCred" class="text-gray-600">(leave blank to keep current)</span>
+            </label>
+            <input v-model="credForm.password" type="password" placeholder="Enter password"
+              class="w-full bg-gray-900 text-white px-3 py-2 rounded border border-gray-600 focus:border-blue-500 focus:outline-none text-sm" />
+          </div>
+
+          <div v-if="credForm.type === 'ssh_key'">
+            <label class="block text-sm text-gray-400 mb-1">SSH Key</label>
+            <select v-model="credForm.sshKeyId"
+              class="w-full bg-gray-900 text-white px-3 py-2 rounded border border-gray-600 focus:border-blue-500 focus:outline-none text-sm">
+              <option :value="null">— Select a key —</option>
+              <option v-for="key in sshKeys" :key="key.id" :value="key.id">
+                {{ key.name }} ({{ key.keyType || 'rsa' }})
+              </option>
+            </select>
+            <p v-if="sshKeys.length === 0" class="text-xs text-gray-500 mt-1">
+              No SSH keys in vault yet.
+              <NuxtLink to="/vault/keys" class="text-blue-400 hover:underline">Import one first.</NuxtLink>
+            </p>
+          </div>
+
+          <div>
+            <label class="block text-sm text-gray-400 mb-1">Domain <span class="text-gray-600">(optional, for RDP)</span></label>
+            <input v-model="credForm.domain" type="text" placeholder="e.g. CORP"
+              class="w-full bg-gray-900 text-white px-3 py-2 rounded border border-gray-600 focus:border-blue-500 focus:outline-none text-sm" />
+          </div>
+        </div>
+
+        <div class="flex justify-end gap-3 mt-6">
+          <button @click="closeForm" class="px-4 py-2 text-sm text-gray-400 hover:text-white rounded border border-gray-600 hover:border-gray-400">
+            Cancel
+          </button>
+          <button @click="handleCredSubmit" :disabled="credSaving"
+            class="px-4 py-2 text-sm bg-blue-600 hover:bg-blue-700 text-white rounded disabled:opacity-50">
+            {{ credSaving ? 'Saving...' : (editingCred ? 'Update' : 'Create') }}
+          </button>
+        </div>
+      </div>
+    </div>
   </div>
 </template>

frontend/pages/vault/keys.vue

@@ -6,6 +6,16 @@ const loading = ref(true)
 const showImport = ref(false)
 const deletingId = ref<number | null>(null)
 
+// Inline import form state
+const importForm = ref({
+  name: '',
+  privateKey: '',
+  publicKey: '',
+  passphrase: '',
+})
+const importSaving = ref(false)
+const importError = ref('')
+
 async function load() {
   loading.value = true
   try {
@@ -15,6 +25,49 @@ async function load() {
   }
 }
 
+function openImport() {
+  importForm.value = { name: '', privateKey: '', publicKey: '', passphrase: '' }
+  importError.value = ''
+  showImport.value = true
+}
+
+function closeImport() {
+  showImport.value = false
+}
+
+async function handleImportSubmit() {
+  if (!importForm.value.name.trim() || !importForm.value.privateKey.trim()) {
+    importError.value = 'Name and private key are required.'
+    return
+  }
+  importSaving.value = true
+  importError.value = ''
+  try {
+    await vault.importKey({
+      name: importForm.value.name.trim(),
+      privateKey: importForm.value.privateKey.trim(),
+      publicKey: importForm.value.publicKey.trim() || undefined,
+      passphrase: importForm.value.passphrase || undefined,
+    })
+    await load()
+    closeImport()
+  } catch (e: any) {
+    importError.value = e?.data?.message || 'Import failed.'
+  } finally {
+    importSaving.value = false
+  }
+}
+
+function handleFileUpload(field: 'privateKey' | 'publicKey', event: Event) {
+  const file = (event.target as HTMLInputElement).files?.[0]
+  if (!file) return
+  const reader = new FileReader()
+  reader.onload = (e) => {
+    importForm.value[field] = e.target?.result as string
+  }
+  reader.readAsText(file)
+}
+
 async function confirmDelete(key: any) {
   if (!confirm(`Delete SSH key "${key.name}"? This cannot be undone.`)) return
   deletingId.value = key.id
@@ -41,7 +94,7 @@ onMounted(load)
         <span class="text-gray-700">/</span>
         <h2 class="text-xl font-bold text-white">SSH Keys</h2>
       </div>
-      <button @click="showImport = true"
+      <button @click="openImport"
         class="px-3 py-1.5 bg-wraith-600 hover:bg-wraith-700 text-white text-sm rounded">
         Import Key
       </button>
@@ -51,7 +104,7 @@ onMounted(load)
 
     <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">
+      <button @click="openImport" class="mt-3 text-wraith-400 hover:text-wraith-300 text-sm">
         Import your first key
       </button>
     </div>
@@ -92,6 +145,66 @@ onMounted(load)
       </table>
     </div>
 
-    <KeyImportDialog v-model:visible="showImport" @imported="load" />
+    <!-- Inline Import Key Modal -->
+    <div v-if="showImport" class="fixed inset-0 flex items-center justify-center" style="z-index: 99999;">
+      <div class="absolute inset-0 bg-black bg-opacity-70" @click="closeImport" />
+      <div class="relative w-full max-w-lg mx-4 p-6 rounded-lg shadow-2xl" style="background: #1a1a2e; border: 2px solid #4a9eff;">
+        <h3 class="text-lg font-semibold text-white mb-4">Import SSH Key</h3>
+
+        <div v-if="importError" class="mb-4 p-3 bg-red-900/50 border border-red-700 rounded text-red-300 text-sm">
+          {{ importError }}
+        </div>
+
+        <div class="space-y-4">
+          <div>
+            <label class="block text-sm text-gray-400 mb-1">Key Name <span class="text-red-400">*</span></label>
+            <input v-model="importForm.name" type="text" placeholder="e.g. my-server-key"
+              class="w-full bg-gray-900 text-white px-3 py-2 rounded border border-gray-600 focus:border-blue-500 focus:outline-none text-sm" />
+          </div>
+
+          <div>
+            <label class="block text-sm text-gray-400 mb-1">Private Key <span class="text-red-400">*</span></label>
+            <textarea v-model="importForm.privateKey" rows="6" placeholder="-----BEGIN RSA PRIVATE KEY-----..."
+              class="w-full bg-gray-900 text-white px-3 py-2 rounded border border-gray-600 focus:border-blue-500 focus:outline-none text-sm font-mono resize-none" />
+            <div class="mt-1 flex items-center gap-2">
+              <label class="text-xs text-gray-500 cursor-pointer hover:text-gray-300">
+                <input type="file" class="hidden" accept=".pem,.key,id_rsa,id_ed25519,id_ecdsa"
+                  @change="handleFileUpload('privateKey', $event)" />
+                Upload from file
+              </label>
+            </div>
+          </div>
+
+          <div>
+            <label class="block text-sm text-gray-400 mb-1">Public Key <span class="text-gray-600">(optional)</span></label>
+            <textarea v-model="importForm.publicKey" rows="2" placeholder="ssh-rsa AAAA..."
+              class="w-full bg-gray-900 text-white px-3 py-2 rounded border border-gray-600 focus:border-blue-500 focus:outline-none text-sm font-mono resize-none" />
+            <div class="mt-1">
+              <label class="text-xs text-gray-500 cursor-pointer hover:text-gray-300">
+                <input type="file" class="hidden" accept=".pub"
+                  @change="handleFileUpload('publicKey', $event)" />
+                Upload from file
+              </label>
+            </div>
+          </div>
+
+          <div>
+            <label class="block text-sm text-gray-400 mb-1">Passphrase <span class="text-gray-600">(optional)</span></label>
+            <input v-model="importForm.passphrase" type="password" placeholder="Leave blank if unencrypted"
+              class="w-full bg-gray-900 text-white px-3 py-2 rounded border border-gray-600 focus:border-blue-500 focus:outline-none text-sm" />
+          </div>
+        </div>
+
+        <div class="flex justify-end gap-3 mt-6">
+          <button @click="closeImport" class="px-4 py-2 text-sm text-gray-400 hover:text-white rounded border border-gray-600 hover:border-gray-400">
+            Cancel
+          </button>
+          <button @click="handleImportSubmit" :disabled="importSaving"
+            class="px-4 py-2 text-sm bg-blue-600 hover:bg-blue-700 text-white rounded disabled:opacity-50">
+            {{ importSaving ? 'Importing...' : 'Import Key' }}
+          </button>
+        </div>
+      </div>
+    </div>
   </div>
 </template>