web/flows: fix rendering for plex login

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer
2021-05-03 22:08:25 +02:00
parent be21a5d172
commit d330e9ee7f
7 changed files with 61 additions and 12 deletions

View File

@ -1,10 +1,17 @@
import { t } from "@lingui/macro";
import { Challenge } from "authentik-api";
import {customElement, property} from "lit-element";
import {html, TemplateResult} from "lit-html";
import { PFSize } from "../../../elements/Spinner";
import PFLogin from "@patternfly/patternfly/components/Login/login.css";
import PFForm from "@patternfly/patternfly/components/Form/form.css";
import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
import PFTitle from "@patternfly/patternfly/components/Title/title.css";
import PFButton from "@patternfly/patternfly/components/Button/button.css";
import PFBase from "@patternfly/patternfly/patternfly-base.css";
import AKGlobal from "../../../authentik.css";
import { CSSResult, customElement, property } from "lit-element";
import { html, TemplateResult } from "lit-html";
import { BaseStage } from "../../stages/base";
import {PlexAPIClient, popupCenterScreen} from "./API";
import {DEFAULT_CONFIG} from "../../../api/Config";
import { PlexAPIClient, popupCenterScreen } from "./API";
import { DEFAULT_CONFIG } from "../../../api/Config";
import { SourcesApi } from "authentik-api";
export interface PlexAuthenticationChallenge extends Challenge {
@ -20,6 +27,10 @@ export class PlexLoginInit extends BaseStage {
@property({ attribute: false })
challenge?: PlexAuthenticationChallenge;
static get styles(): CSSResult[] {
return [PFBase, PFLogin, PFForm, PFFormControl, PFButton, PFTitle, AKGlobal];
}
async firstUpdated(): Promise<void> {
const authInfo = await PlexAPIClient.getPin(this.challenge?.client_id || "");
const authWindow = popupCenterScreen(authInfo.authUrl, "plex auth", 550, 700);
@ -36,10 +47,23 @@ export class PlexLoginInit extends BaseStage {
});
}
renderLoading(): TemplateResult {
return html`<div class="ak-loading">
<ak-spinner size=${PFSize.XLarge}></ak-spinner>
</div>`;
render(): TemplateResult {
return html`<header class="pf-c-login__main-header">
<h1 class="pf-c-title pf-m-3xl">
${t`Authenticating with Plex...`}
</h1>
</header>
<div class="pf-c-login__main-body">
<form class="pf-c-form">
<ak-empty-state
?loading="${true}">
</ak-empty-state>
</form>
</div>
<footer class="pf-c-login__main-footer">
<ul class="pf-c-login__main-footer-links">
</ul>
</footer>`;
}
}

View File

@ -281,6 +281,10 @@ msgstr "Attributes"
msgid "Audience"
msgstr "Audience"
#: src/flows/sources/plex/PlexLoginInit.ts:56
msgid "Authenticating with Plex..."
msgstr "Authenticating with Plex..."
#: src/pages/flows/FlowForm.ts:55
msgid "Authentication"
msgstr "Authentication"

View File

@ -277,6 +277,10 @@ msgstr ""
msgid "Audience"
msgstr ""
#: src/flows/sources/plex/PlexLoginInit.ts:56
msgid "Authenticating with Plex..."
msgstr ""
#: src/pages/flows/FlowForm.ts:55
msgid "Authentication"
msgstr ""