sources/plex: initial plex source implementation

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

web/src/flows/sources/plex/API.ts

@@ -0,0 +1,65 @@
+import { VERSION } from "../../../constants";
+
+export interface PlexPinResponse {
+    // Only has the fields we care about
+    authToken?: string;
+    code: string;
+    id: number;
+}
+
+export interface PlexResource {
+    name: string;
+    provides: string;
+    clientIdentifier: string;
+}
+
+export const DEFAULT_HEADERS = {
+    "Accept": "application/json",
+    "Content-Type": "application/json",
+    "X-Plex-Product": "authentik",
+    "X-Plex-Version": VERSION,
+    "X-Plex-Device-Vendor": "BeryJu.org",
+};
+
+export class PlexAPIClient {
+
+    token: string;
+
+    constructor(token: string) {
+        this.token = token;
+    }
+
+    static async getPin(clientIdentifier: string): Promise<{ authUrl: string, pin: PlexPinResponse }> {
+        const headers = { ...DEFAULT_HEADERS, ...{
+            "X-Plex-Client-Identifier": clientIdentifier
+        }};
+        const pinResponse = await fetch("https://plex.tv/api/v2/pins.json?strong=true", {
+            method: "POST",
+            headers: headers
+        });
+        const pin: PlexPinResponse = await pinResponse.json();
+        return {
+            authUrl: `https://app.plex.tv/auth#!?clientID=${encodeURIComponent(clientIdentifier)}&code=${pin.code}`,
+            pin: pin
+        };
+    }
+
+    static async pinStatus(id: number): Promise<string> {
+        const pinResponse = await fetch(`https://plex.tv/api/v2/pins/${id}`, {
+            headers: DEFAULT_HEADERS
+        });
+        const pin: PlexPinResponse = await pinResponse.json();
+        return pin.authToken || "";
+    }
+
+    async getServers(): Promise<PlexResource[]> {
+        const resourcesResponse = await fetch(`https://plex.tv/api/v2/resources?X-Plex-Token=${this.token}&X-Plex-Client-Identifier=authentik`, {
+            headers: DEFAULT_HEADERS
+        });
+        const resources: PlexResource[] = await resourcesResponse.json();
+        return resources.filter(r => {
+            return r.provides === "server";
+        });
+    }
+
+}

web/src/flows/sources/plex/PlexLoginInit.ts

@@ -0,0 +1,11 @@
+import {customElement, LitElement} from "lit-element";
+import {html, TemplateResult} from "lit-html";
+
+@customElement("ak-flow-sources-plex")
+export class PlexLoginInit extends LitElement {
+
+    render(): TemplateResult {
+        return html``;
+    }
+
+}

web/src/pages/sources/SourcesListPage.ts

@@ -17,6 +17,7 @@ import { ifDefined } from "lit-html/directives/if-defined";
 import "./ldap/LDAPSourceForm";
 import "./saml/SAMLSourceForm";
 import "./oauth/OAuthSourceForm";
+import "./plex/PlexSourceForm";
 
 @customElement("ak-source-list")
 export class SourceListPage extends TablePage<Source> {

web/src/pages/sources/plex/PlexSourceForm.ts

@@ -0,0 +1,193 @@
+import { PlexSource, SourcesApi, FlowsApi, FlowDesignationEnum } from "authentik-api";
+import { t } from "@lingui/macro";
+import { customElement, property } from "lit-element";
+import { html, TemplateResult } from "lit-html";
+import { DEFAULT_CONFIG } from "../../../api/Config";
+import { Form } from "../../../elements/forms/Form";
+import "../../../elements/forms/FormGroup";
+import "../../../elements/forms/HorizontalFormElement";
+import { ifDefined } from "lit-html/directives/if-defined";
+import { until } from "lit-html/directives/until";
+import { first, randomString } from "../../../utils";
+import { PlexAPIClient, PlexResource} from "../../../flows/sources/plex/API";
+
+
+function popupCenterScreen(url: string, title: string, w: number, h: number): Window | null {
+    const top = (screen.height - h) / 4, left = (screen.width - w) / 2;
+    const popup = window.open(url, title, `scrollbars=yes,width=${w},height=${h},top=${top},left=${left}`);
+    return popup;
+}
+
+@customElement("ak-source-plex-form")
+export class PlexSourceForm extends Form<PlexSource> {
+
+    set sourceSlug(value: string) {
+        new SourcesApi(DEFAULT_CONFIG).sourcesPlexRead({
+            slug: value,
+        }).then(source => {
+            this.source = source;
+        });
+    }
+
+    @property({attribute: false})
+    source: PlexSource = {
+        clientId: randomString(40)
+    } as PlexSource;
+
+    @property()
+    plexToken?: string;
+
+    @property({attribute: false})
+    plexResources?: PlexResource[];
+
+    getSuccessMessage(): string {
+        if (this.source) {
+            return t`Successfully updated source.`;
+        } else {
+            return t`Successfully created source.`;
+        }
+    }
+
+    send = (data: PlexSource): Promise<PlexSource> => {
+        if (this.source.slug) {
+            return new SourcesApi(DEFAULT_CONFIG).sourcesPlexUpdate({
+                slug: this.source.slug,
+                data: data
+            });
+        } else {
+            return new SourcesApi(DEFAULT_CONFIG).sourcesPlexCreate({
+                data: data
+            });
+        }
+    };
+
+    async doAuth(): Promise<void> {
+        const authInfo = await PlexAPIClient.getPin(this.source?.clientId);
+        const authWindow = popupCenterScreen(authInfo.authUrl, "plex auth", 550, 700);
+        const timer = setInterval(() => {
+            if (authWindow?.closed) {
+                clearInterval(timer);
+                PlexAPIClient.pinStatus(authInfo.pin.id).then((token: string) => {
+                    this.plexToken = token;
+                    this.loadServers();
+                });
+            }
+        }, 500);
+    }
+
+    async loadServers(): Promise<void> {
+        if (!this.plexToken) {
+            return;
+        }
+        this.plexResources = await new PlexAPIClient(this.plexToken).getServers();
+    }
+
+    renderForm(): TemplateResult {
+        return html`<form class="pf-c-form pf-m-horizontal">
+            <ak-form-element-horizontal
+                label=${t`Name`}
+                ?required=${true}
+                name="name">
+                <input type="text" value="${ifDefined(this.source?.name)}" class="pf-c-form-control" required>
+            </ak-form-element-horizontal>
+            <ak-form-element-horizontal
+                label=${t`Slug`}
+                ?required=${true}
+                name="slug">
+                <input type="text" value="${ifDefined(this.source?.slug)}" class="pf-c-form-control" required>
+            </ak-form-element-horizontal>
+            <ak-form-element-horizontal name="enabled">
+                <div class="pf-c-check">
+                    <input type="checkbox" class="pf-c-check__input" ?checked=${first(this.source?.enabled, true)}>
+                    <label class="pf-c-check__label">
+                        ${t`Enabled`}
+                    </label>
+                </div>
+            </ak-form-element-horizontal>
+
+            <ak-form-group .expanded=${true}>
+                <span slot="header">
+                    ${t`Protocol settings`}
+                </span>
+                <div slot="body" class="pf-c-form">
+                    <ak-form-element-horizontal
+                        label=${t`Client ID`}
+                        ?required=${true}
+                        name="clientId">
+                        <input type="text" value="${first(this.source?.clientId)}" class="pf-c-form-control" required>
+                    </ak-form-element-horizontal>
+                    <ak-form-element-horizontal
+                        label=${t`Allowed servers`}
+                        ?required=${true}
+                        name="allowedServers">
+                        <select class="pf-c-form-control" multiple>
+                            ${this.plexResources?.map(r => {
+                                const selected = Array.from(this.source?.allowedServers || []).some(server => {
+                                    return server == r.clientIdentifier;
+                                });
+                                return html`<option value=${r.clientIdentifier} ?selected=${selected}>${r.name}</option>`;
+                            })}
+                        </select>
+                        <p class="pf-c-form__helper-text">${t`Select which server a user has to be a member of to be allowed to authenticate.`}</p>
+                        <p class="pf-c-form__helper-text">${t`Hold control/command to select multiple items.`}</p>
+                        <p class="pf-c-form__helper-text">
+                            <button class="pf-c-button pf-m-primary" type="button" @click=${() => {
+                                this.doAuth();
+                            }}>
+                                ${t`Load servers`}
+                            </button>
+                        </p>
+                    </ak-form-element-horizontal>
+                </div>
+            </ak-form-group>
+            <ak-form-group>
+                <span slot="header">
+                    ${t`Flow settings`}
+                </span>
+                <div slot="body" class="pf-c-form">
+                    <ak-form-element-horizontal
+                        label=${t`Authentication flow`}
+                        ?required=${true}
+                        name="authenticationFlow">
+                        <select class="pf-c-form-control">
+                            ${until(new FlowsApi(DEFAULT_CONFIG).flowsInstancesList({
+                                ordering: "pk",
+                                designation: FlowDesignationEnum.Authentication,
+                            }).then(flows => {
+                                return flows.results.map(flow => {
+                                    let selected = this.source?.authenticationFlow === flow.pk;
+                                    if (!this.source?.pk && !this.source?.authenticationFlow && flow.slug === "default-source-authentication") {
+                                        selected = true;
+                                    }
+                                    return html`<option value=${ifDefined(flow.pk)} ?selected=${selected}>${flow.name} (${flow.slug})</option>`;
+                                });
+                            }), html`<option>${t`Loading...`}</option>`)}
+                        </select>
+                        <p class="pf-c-form__helper-text">${t`Flow to use when authenticating existing users.`}</p>
+                    </ak-form-element-horizontal>
+                    <ak-form-element-horizontal
+                        label=${t`Enrollment flow`}
+                        ?required=${true}
+                        name="enrollmentFlow">
+                        <select class="pf-c-form-control">
+                            ${until(new FlowsApi(DEFAULT_CONFIG).flowsInstancesList({
+                                ordering: "pk",
+                                designation: FlowDesignationEnum.Enrollment,
+                            }).then(flows => {
+                                return flows.results.map(flow => {
+                                    let selected = this.source?.enrollmentFlow === flow.pk;
+                                    if (!this.source?.pk && !this.source?.enrollmentFlow && flow.slug === "default-source-enrollment") {
+                                        selected = true;
+                                    }
+                                    return html`<option value=${ifDefined(flow.pk)} ?selected=${selected}>${flow.name} (${flow.slug})</option>`;
+                                });
+                            }), html`<option>${t`Loading...`}</option>`)}
+                        </select>
+                        <p class="pf-c-form__helper-text">${t`Flow to use when enrolling new users.`}</p>
+                    </ak-form-element-horizontal>
+                </div>
+            </ak-form-group>
+        </form>`;
+    }
+
+}