From e3dd5727d8133f87e0b3e60bbe786a452bdc834a Mon Sep 17 00:00:00 2001
From: elmerohueso <elmerohueso@gmail.com>
Date: Mon, 20 Apr 2026 22:00:18 -0600
Subject: [PATCH] Cancel button when manually configuring plex

---
 webui/index.html       |  4 ++--
 webui/static/script.js | 33 +++++++++++++++++++++++++++++++--
 2 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/webui/index.html b/webui/index.html
index d60dc5f5..e8d14fc7 100644
--- a/webui/index.html
+++ b/webui/index.html
@@ -4343,13 +4343,13 @@
                                             </small>
                                         </div>
                                         <div class="form-actions">
-                                            <button class="detect-button" onclick="clearPlexConfiguration()">Clear Configuration</button>
+                                            <button id="plex-config-action-button" class="detect-button" onclick="clearPlexConfiguration()">Clear Configuration</button>
                                         </div>
                                     </div>
                                     <div id="plex-setup">
                                         <div id="plex-setup-buttons" class="form-actions">
                                             <button id="plex-link-to-plex-button" class="detect-button" onclick="startPlexPinAuth()">Link to Plex (OAuth)</button>
-                                            <button id="plex-manual-config-button" class="detect-button" onclick="showPlexConfiguration()">Manually Configure Plex</button>
+                                            <button id="plex-manual-config-button" class="detect-button" onclick="showPlexConfiguration(false, true)">Manually Configure Plex</button>
                                             <button id="plex-view-config-button" class="detect-button view-config-button" onclick="showPlexConfiguration()">View Configuration</button>
                                         </div>
                                         <div id="plex-pin-auth-flow" style="display: none; padding: 16px; border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; margin-top: 12px;">
diff --git a/webui/static/script.js b/webui/static/script.js
index 685f888f..15182a09 100644
--- a/webui/static/script.js
+++ b/webui/static/script.js
@@ -6443,7 +6443,7 @@ function updateMediaServerFields() {
 let _plexPinAuthRequestId = null;
 let _plexPinAuthPollInterval = null;
 
-function showPlexConfiguration(disableFields = false) {
+function showPlexConfiguration(disableFields = false, isManualConfig = false) {
     stopPlexPinAuthPolling();
     const plexConfig = document.getElementById('plex-configuration');
     const plexSetup = document.getElementById('plex-setup');
@@ -6457,12 +6457,41 @@ function showPlexConfiguration(disableFields = false) {
     if (plexPinAuthFlow) plexPinAuthFlow.style.display = 'none';
     if (plexUrl) plexUrl.disabled = disableFields;
     if (plexToken) plexToken.disabled = disableFields;
-    if (plexLibraryContainer && !disableFields) {
+    if (plexLibraryContainer && isManualConfig) {
         plexLibraryContainer.style.display = 'none';
     }
+    setPlexConfigActionButton(isManualConfig);
     updatePlexConfigurationButtons();
 }
 
+function showPlexSetup() {
+    const plexConfig = document.getElementById('plex-configuration');
+    const plexSetup = document.getElementById('plex-setup');
+    const plexPinAuthFlow = document.getElementById('plex-pin-auth-flow');
+    const plexLibraryContainer = document.getElementById('plex-library-selector-container');
+
+    if (plexConfig) plexConfig.style.display = 'none';
+    if (plexSetup) plexSetup.style.display = '';
+    if (plexPinAuthFlow) plexPinAuthFlow.style.display = 'none';
+    if (plexLibraryContainer) plexLibraryContainer.style.display = 'none';
+    setPlexConfigActionButton(false);
+}
+
+function setPlexConfigActionButton(isManualConfig) {
+    const actionButton = document.getElementById('plex-config-action-button');
+    if (!actionButton) return;
+
+    if (isManualConfig) {
+        actionButton.textContent = 'Cancel';
+        actionButton.onclick = showPlexSetup;
+        actionButton.title = 'Cancel manual Plex configuration';
+    } else {
+        actionButton.textContent = 'Clear Configuration';
+        actionButton.onclick = clearPlexConfiguration;
+        actionButton.title = 'Clear saved Plex configuration';
+    }
+}
+
 async function startPlexPinAuth() {
     const setupButtons = document.getElementById('plex-setup-buttons');
     const authFlow = document.getElementById('plex-pin-auth-flow');