web: add plex connection deletion support

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

authentik/sources/plex/models.py

@@ -1,4 +1,5 @@
 """Plex source"""
+from typing import Optional
 from django.contrib.postgres.fields import ArrayField
 from django.db import models
 from django.templatetags.static import static
@@ -7,7 +8,7 @@ from rest_framework.fields import CharField
 from rest_framework.serializers import BaseSerializer
 
 from authentik.core.models import Source, UserSourceConnection
-from authentik.core.types import UILoginButton
+from authentik.core.types import UILoginButton, UserSettingSerializer
 from authentik.flows.challenge import Challenge, ChallengeResponse, ChallengeTypes
 from authentik.providers.oauth2.generators import generate_client_id
 
@@ -75,6 +76,15 @@ class PlexSource(Source):
             name=self.name,
         )
 
+    @property
+    def ui_user_settings(self) -> Optional[UserSettingSerializer]:
+        return UserSettingSerializer(
+            data={
+                "title": f"Plex {self.name}",
+                "component": "ak-user-settings-source-plex",
+            }
+        )
+
     class Meta:
 
         verbose_name = _("Plex Source")

web/src/pages/user-settings/UserSettingsPage.ts

@@ -27,6 +27,7 @@ import "./settings/UserSettingsAuthenticatorTOTP";
 import "./settings/UserSettingsAuthenticatorWebAuthn";
 import "./settings/UserSettingsPassword";
 import "./settings/SourceSettingsOAuth";
+import "./settings/SourceSettingsPlex";
 import { EVENT_REFRESH } from "../../constants";
 
 @customElement("ak-user-settings")
@@ -112,6 +113,12 @@ export class UserSettingsPage extends LitElement {
                     .configureUrl=${source.configureUrl}
                 >
                 </ak-user-settings-source-oauth>`;
+            case "ak-user-settings-source-plex":
+                return html`<ak-user-settings-source-plex
+                    objectId=${source.objectUid}
+                    title=${source.title}
+                >
+                </ak-user-settings-source-plex>`;
             default:
                 return html`<p>${t`Error: unsupported source settings: ${source.component}`}</p>`;
         }

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

@@ -0,0 +1,46 @@
+import { customElement, html, property, TemplateResult } from "lit-element";
+import { BaseUserSettings } from "./BaseUserSettings";
+import { SourcesApi } from "authentik-api";
+import { until } from "lit-html/directives/until";
+import { DEFAULT_CONFIG } from "../../../api/Config";
+import { t } from "@lingui/macro";
+
+@customElement("ak-user-settings-source-plex")
+export class SourceSettingsPlex extends BaseUserSettings {
+    @property()
+    title!: string;
+
+    render(): TemplateResult {
+        return html`<div class="pf-c-card">
+            <div class="pf-c-card__title">${t`Source ${this.title}`}</div>
+            <div class="pf-c-card__body">${this.renderInner()}</div>
+        </div>`;
+    }
+
+    renderInner(): TemplateResult {
+        return html`${until(
+            new SourcesApi(DEFAULT_CONFIG)
+                .sourcesUserConnectionsPlexList({
+                    sourceSlug: this.objectId,
+                })
+                .then((connection) => {
+                    if (connection.results.length > 0) {
+                        return html`<p>${t`Connected.`}</p>
+                            <button
+                                class="pf-c-button pf-m-danger"
+                                @click=${() => {
+                                    return new SourcesApi(
+                                        DEFAULT_CONFIG,
+                                    ).sourcesUserConnectionsPlexDestroy({
+                                        id: connection.results[0].pk || 0,
+                                    });
+                                }}
+                            >
+                                ${t`Disconnect`}
+                            </button>`;
+                    }
+                    return html`<p>${t`Not connected.`}</p>`;
+                }),
+        )}`;
+    }
+}