sources/plex: allow users to connect their plex account without login flow

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

web/src/user/user-settings/sources/SourceSettings.ts

@@ -47,6 +47,7 @@ export class UserSourceSettingsPage extends LitElement {
                 return html`<ak-user-settings-source-plex
                     objectId=${source.objectUid}
                     title=${source.title}
+                    .configureUrl=${source.configureUrl}
                 >
                 </ak-user-settings-source-plex>`;
             default:

web/src/user/user-settings/sources/SourceSettingsPlex.ts

@@ -7,6 +7,8 @@ import { until } from "lit/directives/until";
 import { SourcesApi } from "@goauthentik/api";
 
 import { DEFAULT_CONFIG } from "../../../api/Config";
+import { PlexAPIClient, popupCenterScreen } from "../../../api/Plex";
+import { EVENT_REFRESH } from "../../../constants";
 import { BaseUserSettings } from "../BaseUserSettings";
 
 @customElement("ak-user-settings-source-plex")
@@ -21,6 +23,26 @@ export class SourceSettingsPlex extends BaseUserSettings {
         </div>`;
     }
 
+    async doPlex(): Promise<void> {
+        const authInfo = await PlexAPIClient.getPin(this.configureUrl || "");
+        const authWindow = popupCenterScreen(authInfo.authUrl, "plex auth", 550, 700);
+        PlexAPIClient.pinPoll(this.configureUrl || "", authInfo.pin.id).then((token) => {
+            authWindow?.close();
+            new SourcesApi(DEFAULT_CONFIG).sourcesPlexRedeemTokenAuthenticatedCreate({
+                plexTokenRedeemRequest: {
+                    plexToken: token,
+                },
+                slug: this.objectId,
+            });
+        });
+        this.dispatchEvent(
+            new CustomEvent(EVENT_REFRESH, {
+                bubbles: true,
+                composed: true,
+            }),
+        );
+    }
+
     renderInner(): TemplateResult {
         return html`${until(
             new SourcesApi(DEFAULT_CONFIG)
@@ -43,7 +65,10 @@ export class SourceSettingsPlex extends BaseUserSettings {
                                 ${t`Disconnect`}
                             </button>`;
                     }
-                    return html`<p>${t`Not connected.`}</p>`;
+                    return html`<p>${t`Not connected.`}</p>
+                        <button @click=${this.doPlex} class="pf-c-button pf-m-primary">
+                            ${t`Connect`}
+                        </button>`;
                 }),
         )}`;
     }