From 15b6c571d0927731d785b9902ae0f375bff299e3 Mon Sep 17 00:00:00 2001
From: Kevin Midboe <kevin.midboe@gmail.com>
Date: Fri, 27 Feb 2026 17:55:38 +0100
Subject: [PATCH] Fix: Correct event handling between PlexSettings and
 PlexAuthButton
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

**CRITICAL FIX - THIS WAS THE BUG!**

PlexAuthButton emits:
- auth-success (with token)
- auth-error (with error message)

PlexSettings was listening for:
- @authenticate (WRONG - this event doesn't exist!)

Changes:
- Update PlexSettings template to listen for correct events:
  - @auth-success="handleAuthSuccess"
  - @auth-error="handleAuthError"

- Replace authenticatePlex() with two event handlers:
  - handleAuthSuccess(token) - processes successful auth
  - handleAuthError(message) - displays error messages

- Remove unused openAuthPopup import (now handled by button)
- Remove intermediate completePlexAuth function
- Simplified auth flow: Button → Event → Handler

This explains why authentication wasn't working - the click event
was never being handled because the event names didn't match!
---
 src/components/settings/PlexSettings.vue | 47 +++++++-----------------
 src/composables/usePlexApi.ts            |  2 +-
 2 files changed, 15 insertions(+), 34 deletions(-)

diff --git a/src/components/settings/PlexSettings.vue b/src/components/settings/PlexSettings.vue
index 8040d1c..5894fcf 100644
--- a/src/components/settings/PlexSettings.vue
+++ b/src/components/settings/PlexSettings.vue
@@ -3,8 +3,8 @@
     <!-- Unconnected state -->
     <PlexAuthButton
       v-if="!isPlexConnected"
-      :loading="loading"
-      @authenticate="authenticatePlex"
+      @auth-success="handleAuthSuccess"
+      @auth-error="handleAuthError"
     />
 
     <!-- Connected state -->
@@ -118,8 +118,7 @@
   }>();
 
   // Composables
-  const { getCookie, setPlexAuthCookie, openAuthPopup, cleanup } =
-    usePlexAuth();
+  const { getCookie, setPlexAuthCookie, cleanup } = usePlexAuth();
   const {
     fetchPlexUserData,
     fetchPlexServers,
@@ -209,11 +208,11 @@
     }
   }
 
-  // ----- OAuth flow -----
-  async function completePlexAuth(authToken: string) {
+  // ----- OAuth flow (handlers for PlexAuthButton events) -----
+  async function handleAuthSuccess(authToken: string) {
     try {
       console.log(
-        "[PlexSettings] completePlexAuth called with token:",
+        "[PlexSettings] Auth success! Token received:",
         authToken.substring(0, 10) + "..."
       );
       setPlexAuthCookie(authToken);
@@ -245,40 +244,22 @@
         } as IErrorMessage);
       }
     } catch (error) {
-      console.error("[PlexSettings] Error in completePlexAuth:", error);
+      console.error("[PlexSettings] Error in handleAuthSuccess:", error);
       messages.value.push({
         type: ErrorMessageTypes.Error,
         title: "Authentication failed",
         message: "An error occurred while connecting to Plex"
       } as IErrorMessage);
-    } finally {
-      loading.value = false;
     }
   }
 
-  async function authenticatePlex() {
-    console.log("[PlexSettings] Starting authentication flow...");
-    loading.value = true;
-    openAuthPopup(
-      // onSuccess
-      async (authToken: string) => {
-        console.log("[PlexSettings] onSuccess callback triggered with token");
-        await completePlexAuth(authToken);
-      },
-      // onError
-      (errorMessage: string) => {
-        console.error(
-          "[PlexSettings] onError callback triggered:",
-          errorMessage
-        );
-        messages.value.push({
-          type: ErrorMessageTypes.Error,
-          title: "Authentication failed",
-          message: errorMessage
-        } as IErrorMessage);
-        loading.value = false;
-      }
-    );
+  function handleAuthError(errorMessage: string) {
+    console.error("[PlexSettings] Auth error:", errorMessage);
+    messages.value.push({
+      type: ErrorMessageTypes.Error,
+      title: "Authentication failed",
+      message: errorMessage
+    } as IErrorMessage);
   }
 
   // ----- Unlink flow -----
diff --git a/src/composables/usePlexApi.ts b/src/composables/usePlexApi.ts
index 8eda4e9..1402ac2 100644
--- a/src/composables/usePlexApi.ts
+++ b/src/composables/usePlexApi.ts
@@ -3,7 +3,7 @@ import { ref } from "vue";
 // Shared constants - generated once and reused
 export const CLIENT_IDENTIFIER =
   "seasoned-plex-app-" + Math.random().toString(36).substring(7);
-export const APP_NAME = "Seasoned";
+export const APP_NAME = window.location.hostname;
 
 export function usePlexApi() {
   const plexServerUrl = ref("");