web/flows: fix rendering for plex login

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

authentik/sources/oauth/views/callback.py

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

web/.eslintrc.json

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

web/package-lock.json

@@ -3723,6 +3723,14 @@
             "resolved": "https://registry.npmjs.org/eslint-config-google/-/eslint-config-google-0.14.0.tgz",
             "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": {
             "version": "1.3.0",
             "resolved": "https://registry.npmjs.org/eslint-plugin-lit/-/eslint-plugin-lit-1.3.0.tgz",
@@ -3733,6 +3741,11 @@
                 "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": {
             "version": "5.1.1",
             "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",

web/package.json

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

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

@@ -1,7 +1,14 @@
+import { t } from "@lingui/macro";
 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 { PFSize } from "../../../elements/Spinner";
 import { BaseStage } from "../../stages/base";
 import { PlexAPIClient, popupCenterScreen } from "./API";
 import { DEFAULT_CONFIG } from "../../../api/Config";
@@ -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 {
+    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>`;
     }
 
 }

web/src/locales/en.po

@@ -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"

web/src/locales/pseudo-LOCALE.po

@@ -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 ""