From b07f1fd61acd8320d282fe901fac2dbd6673022b Mon Sep 17 00:00:00 2001
From: FragginWagon <greg.r.jacobs@gmail.com>
Date: Wed, 28 Jan 2026 22:42:06 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Refactor=20delete=20confirmation?=
 =?UTF-8?q?=20modal=20to=20use=20BaseModal=20component=20for=20improved=20?=
 =?UTF-8?q?consistency=20and=20reusability?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/ApiKeyManager.vue               | 38 +++++++++----------
 1 file changed, 18 insertions(+), 20 deletions(-)

diff --git a/code/websites/pokedex.online/src/views/ApiKeyManager.vue b/code/websites/pokedex.online/src/views/ApiKeyManager.vue
index 3258ba2..7429821 100644
--- a/code/websites/pokedex.online/src/views/ApiKeyManager.vue
+++ b/code/websites/pokedex.online/src/views/ApiKeyManager.vue
@@ -131,27 +131,25 @@
     </div>
 
     <!-- Delete Confirmation Modal -->
-    <div
-      v-if="showDeleteConfirm"
-      class="modal-overlay"
-      @click="showDeleteConfirm = false"
+    <BaseModal
+      v-model="showDeleteConfirm"
+      title="Delete API Key?"
+      size="small"
+      :close-on-overlay="true"
     >
-      <div class="modal" @click.stop>
-        <h3>Delete API Key?</h3>
-        <p>
-          Are you sure you want to clear the stored API key? You'll need to
-          enter it again to use the tournament tools.
-        </p>
-        <div class="modal-buttons">
-          <button @click="showDeleteConfirm = false" class="btn btn-secondary">
-            Cancel
-          </button>
-          <button @click="handleDeleteKey" class="btn btn-danger">
-            Delete
-          </button>
-        </div>
-      </div>
-    </div>
+      <p>
+        Are you sure you want to clear the stored API key? You'll need to
+        enter it again to use the tournament tools.
+      </p>
+      <template #footer>
+        <button @click="showDeleteConfirm = false" class="btn btn-secondary">
+          Cancel
+        </button>
+        <button @click="handleDeleteKey" class="btn btn-danger">
+          Delete
+        </button>
+      </template>
+    </BaseModal>
     <!-- Challonge API Key Guide Modal -->
     <ChallongeApiKeyGuide v-if="showGuide" @close="showGuide = false" />
   </div>