diff --git a/web/src/admin/sources/plex/PlexSourceForm.ts b/web/src/admin/sources/plex/PlexSourceForm.ts index 90b1acb51..6a04ea262 100644 --- a/web/src/admin/sources/plex/PlexSourceForm.ts +++ b/web/src/admin/sources/plex/PlexSourceForm.ts @@ -62,7 +62,7 @@ export class PlexSourceForm extends ModelForm { send = async (data: PlexSource): Promise => { data.plexToken = this.plexToken || ""; let source: PlexSource; - if (this.instance) { + if (this.instance?.pk) { source = await new SourcesApi(DEFAULT_CONFIG).sourcesPlexUpdate({ slug: this.instance.slug, plexSourceRequest: data, @@ -95,7 +95,7 @@ export class PlexSourceForm extends ModelForm { async doAuth(): Promise { const authInfo = await PlexAPIClient.getPin(this.instance?.clientId || ""); - const authWindow = popupCenterScreen(authInfo.authUrl, "plex auth", 550, 700); + const authWindow = await popupCenterScreen(authInfo.authUrl, "plex auth", 550, 700); PlexAPIClient.pinPoll(this.instance?.clientId || "", authInfo.pin.id).then((token) => { authWindow?.close(); this.plexToken = token; diff --git a/web/src/common/helpers/plex.ts b/web/src/common/helpers/plex.ts index 6da06f078..6e9639934 100644 --- a/web/src/common/helpers/plex.ts +++ b/web/src/common/helpers/plex.ts @@ -23,15 +23,24 @@ export const DEFAULT_HEADERS = { "X-Plex-Device-Vendor": "goauthentik.io", }; -export function popupCenterScreen(url: string, title: string, w: number, h: number): Window | null { +export async function popupCenterScreen( + url: string, + title: string, + w: number, + h: number, +): Promise { 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; + return new Promise((resolve) => { + setTimeout(() => { + const popup = window.open( + url, + title, + `scrollbars=yes,width=${w},height=${h},top=${top},left=${left}`, + ); + resolve(popup); + }); + }); } export class PlexAPIClient { diff --git a/web/src/flow/sources/plex/PlexLoginInit.ts b/web/src/flow/sources/plex/PlexLoginInit.ts index e375fafb6..4f9213423 100644 --- a/web/src/flow/sources/plex/PlexLoginInit.ts +++ b/web/src/flow/sources/plex/PlexLoginInit.ts @@ -8,7 +8,7 @@ import { t } from "@lingui/macro"; import { CSSResult } from "lit"; import { TemplateResult, html } from "lit"; -import { customElement } from "lit/decorators.js"; +import { customElement, state } from "lit/decorators.js"; import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css"; @@ -30,13 +30,17 @@ export class PlexLoginInit extends BaseStage< PlexAuthenticationChallenge, PlexAuthenticationChallengeResponseRequest > { + @state() + authUrl?: string; + static get styles(): CSSResult[] { return [PFBase, PFLogin, PFForm, PFFormControl, PFButton, PFTitle, AKGlobal]; } async firstUpdated(): Promise { const authInfo = await PlexAPIClient.getPin(this.challenge?.clientId || ""); - const authWindow = popupCenterScreen(authInfo.authUrl, "plex auth", 550, 700); + this.authUrl = authInfo.authUrl; + const authWindow = await popupCenterScreen(authInfo.authUrl, "plex auth", 550, 700); PlexAPIClient.pinPoll(this.challenge?.clientId || "", authInfo.pin.id).then((token) => { authWindow?.close(); new SourcesApi(DEFAULT_CONFIG) @@ -69,7 +73,19 @@ export class PlexLoginInit extends BaseStage<