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

@ -97,7 +97,8 @@ class OAuthSourceFlowManager(SourceFlowManager):
connection_type = UserOAuthSourceConnection connection_type = UserOAuthSourceConnection
def update_connection( def update_connection(
self, connection: UserOAuthSourceConnection, self,
connection: UserOAuthSourceConnection,
access_token: Optional[str] = None, access_token: Optional[str] = None,
) -> UserOAuthSourceConnection: ) -> UserOAuthSourceConnection:
"""Set the access_token on the connection""" """Set the access_token on the connection"""

View file

@ -6,7 +6,8 @@
"extends": [ "extends": [
"eslint:recommended", "eslint:recommended",
"plugin:@typescript-eslint/recommended", "plugin:@typescript-eslint/recommended",
"plugin:lit/recommended" "plugin:lit/recommended",
"plugin:custom-elements/recommended"
], ],
"parser": "@typescript-eslint/parser", "parser": "@typescript-eslint/parser",
"parserOptions": { "parserOptions": {
@ -15,7 +16,8 @@
}, },
"plugins": [ "plugins": [
"@typescript-eslint", "@typescript-eslint",
"lit" "lit",
"custom-elements"
], ],
"rules": { "rules": {
"indent": "off", "indent": "off",

13
web/package-lock.json generated
View file

@ -3723,6 +3723,14 @@
"resolved": "https://registry.npmjs.org/eslint-config-google/-/eslint-config-google-0.14.0.tgz", "resolved": "https://registry.npmjs.org/eslint-config-google/-/eslint-config-google-0.14.0.tgz",
"integrity": "sha512-WsbX4WbjuMvTdeVL6+J3rK1RGhCTqjsFjX7UMSMgZiyxxaNLkoJENbrGExzERFeoTpGw3F3FypTiWAP9ZXzkEw==" "integrity": "sha512-WsbX4WbjuMvTdeVL6+J3rK1RGhCTqjsFjX7UMSMgZiyxxaNLkoJENbrGExzERFeoTpGw3F3FypTiWAP9ZXzkEw=="
}, },
"eslint-plugin-custom-elements": {
"version": "0.0.2",
"resolved": "https://registry.npmjs.org/eslint-plugin-custom-elements/-/eslint-plugin-custom-elements-0.0.2.tgz",
"integrity": "sha512-lIRBhxh0M/1seyMzSPJwdfdNtlVSPArJ+erF2xqjPsd/6SdCuT43hCQNV2A2te3GqBWhgh/unXSVRO09c1kyPA==",
"requires": {
"eslint-rule-documentation": ">=1.0.0"
}
},
"eslint-plugin-lit": { "eslint-plugin-lit": {
"version": "1.3.0", "version": "1.3.0",
"resolved": "https://registry.npmjs.org/eslint-plugin-lit/-/eslint-plugin-lit-1.3.0.tgz", "resolved": "https://registry.npmjs.org/eslint-plugin-lit/-/eslint-plugin-lit-1.3.0.tgz",
@ -3733,6 +3741,11 @@
"requireindex": "^1.2.0" "requireindex": "^1.2.0"
} }
}, },
"eslint-rule-documentation": {
"version": "1.0.23",
"resolved": "https://registry.npmjs.org/eslint-rule-documentation/-/eslint-rule-documentation-1.0.23.tgz",
"integrity": "sha512-pWReu3fkohwyvztx/oQWWgld2iad25TfUdi6wvhhaDPIQjHU/pyvlKgXFw1kX31SQK2Nq9MH+vRDWB0ZLy8fYw=="
},
"eslint-scope": { "eslint-scope": {
"version": "5.1.1", "version": "5.1.1",
"resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz", "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",

View file

@ -67,6 +67,7 @@
"construct-style-sheets-polyfill": "^2.4.16", "construct-style-sheets-polyfill": "^2.4.16",
"eslint": "^7.25.0", "eslint": "^7.25.0",
"eslint-config-google": "^0.14.0", "eslint-config-google": "^0.14.0",
"eslint-plugin-custom-elements": "0.0.2",
"eslint-plugin-lit": "^1.3.0", "eslint-plugin-lit": "^1.3.0",
"flowchart.js": "^1.15.0", "flowchart.js": "^1.15.0",
"lit-element": "^2.5.0", "lit-element": "^2.5.0",

View file

@ -1,7 +1,14 @@
import { t } from "@lingui/macro";
import { Challenge } from "authentik-api"; import { Challenge } from "authentik-api";
import {customElement, property} from "lit-element"; 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 { html, TemplateResult } from "lit-html";
import { PFSize } from "../../../elements/Spinner";
import { BaseStage } from "../../stages/base"; import { BaseStage } from "../../stages/base";
import { PlexAPIClient, popupCenterScreen } from "./API"; import { PlexAPIClient, popupCenterScreen } from "./API";
import { DEFAULT_CONFIG } from "../../../api/Config"; import { DEFAULT_CONFIG } from "../../../api/Config";
@ -20,6 +27,10 @@ export class PlexLoginInit extends BaseStage {
@property({ attribute: false }) @property({ attribute: false })
challenge?: PlexAuthenticationChallenge; challenge?: PlexAuthenticationChallenge;
static get styles(): CSSResult[] {
return [PFBase, PFLogin, PFForm, PFFormControl, PFButton, PFTitle, AKGlobal];
}
async firstUpdated(): Promise<void> { async firstUpdated(): Promise<void> {
const authInfo = await PlexAPIClient.getPin(this.challenge?.client_id || ""); const authInfo = await PlexAPIClient.getPin(this.challenge?.client_id || "");
const authWindow = popupCenterScreen(authInfo.authUrl, "plex auth", 550, 700); const authWindow = popupCenterScreen(authInfo.authUrl, "plex auth", 550, 700);
@ -36,10 +47,23 @@ export class PlexLoginInit extends BaseStage {
}); });
} }
renderLoading(): TemplateResult { render(): TemplateResult {
return html`<div class="ak-loading"> return html`<header class="pf-c-login__main-header">
<ak-spinner size=${PFSize.XLarge}></ak-spinner> <h1 class="pf-c-title pf-m-3xl">
</div>`; ${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" msgid "Audience"
msgstr "Audience" msgstr "Audience"
#: src/flows/sources/plex/PlexLoginInit.ts:56
msgid "Authenticating with Plex..."
msgstr "Authenticating with Plex..."
#: src/pages/flows/FlowForm.ts:55 #: src/pages/flows/FlowForm.ts:55
msgid "Authentication" msgid "Authentication"
msgstr "Authentication" msgstr "Authentication"

View file

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