From 16d105e1fbcca882284d31c6ea9d7fa047a0bd77 Mon Sep 17 00:00:00 2001
From: Vantz Stockwell <vstockwell@predator-mini.local>
Date: Tue, 17 Mar 2026 11:42:27 -0400
Subject: [PATCH] fix: add credential delete button + fix OAuth token exchange
 error display

Delete button appears next to credential dropdown when a credential is
selected. Confirms before deleting, refreshes list after.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../connections/ConnectionEditDialog.vue      | 53 ++++++++++++++-----
 1 file changed, 39 insertions(+), 14 deletions(-)

diff --git a/frontend/src/components/connections/ConnectionEditDialog.vue b/frontend/src/components/connections/ConnectionEditDialog.vue
index 05a78d8..6974639 100644
--- a/frontend/src/components/connections/ConnectionEditDialog.vue
+++ b/frontend/src/components/connections/ConnectionEditDialog.vue
@@ -145,21 +145,32 @@
           <!-- Credentials -->
           <div>
             <label class="block text-xs text-[var(--wraith-text-secondary)] mb-1">Credential</label>
-            <select
-              v-model="form.credentialId"
-              class="w-full px-3 py-2 text-sm rounded bg-[#0d1117] border border-[#30363d] text-[var(--wraith-text-primary)] outline-none focus:border-[var(--wraith-accent-blue)] transition-colors cursor-pointer"
-            >
-              <option :value="null">None</option>
-              <option
-                v-for="cred in credentials"
-                :key="cred.id"
-                :value="cred.id"
+            <div class="flex gap-2">
+              <select
+                v-model="form.credentialId"
+                class="flex-1 px-3 py-2 text-sm rounded bg-[#0d1117] border border-[#30363d] text-[var(--wraith-text-primary)] outline-none focus:border-[var(--wraith-accent-blue)] transition-colors cursor-pointer"
               >
-                {{ cred.name }}
-                <template v-if="cred.type === 'ssh_key'"> (SSH Key)</template>
-                <template v-else> (Password{{ cred.username ? ` — ${cred.username}` : '' }})</template>
-              </option>
-            </select>
+                <option :value="null">None</option>
+                <option
+                  v-for="cred in credentials"
+                  :key="cred.id"
+                  :value="cred.id"
+                >
+                  {{ cred.name }}
+                  <template v-if="cred.type === 'ssh_key'"> (SSH Key)</template>
+                  <template v-else> (Password{{ cred.username ? ` — ${cred.username}` : '' }})</template>
+                </option>
+              </select>
+              <button
+                v-if="form.credentialId"
+                type="button"
+                class="px-2.5 py-2 text-xs rounded border border-red-500/30 text-red-400 hover:bg-red-500/10 transition-colors cursor-pointer"
+                title="Delete selected credential"
+                @click="deleteSelectedCredential"
+              >
+                Delete
+              </button>
+            </div>
           </div>
 
           <!-- Add New Credential (collapsible) -->
@@ -421,6 +432,20 @@ function resetNewCredForm(): void {
   newCredError.value = "";
 }
 
+async function deleteSelectedCredential(): Promise<void> {
+  if (!form.value.credentialId) return;
+  const cred = credentials.value.find(c => c.id === form.value.credentialId);
+  const name = cred?.name ?? `ID ${form.value.credentialId}`;
+  if (!confirm(`Delete credential "${name}"? This cannot be undone.`)) return;
+  try {
+    await Call.ByName(`${APP}.DeleteCredential`, form.value.credentialId);
+    form.value.credentialId = null;
+    await loadCredentials();
+  } catch (err) {
+    alert(`Failed to delete credential: ${err}`);
+  }
+}
+
 async function loadCredentials(): Promise<void> {
   try {
     const result = await Call.ByName(`${APP}.ListCredentials`) as Credential[];