flows: use full ShadowDom for flowContainer

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

authentik/core/templates/base/skeleton.html

@@ -11,7 +11,7 @@
         <title>{% block title %}{% trans title|default:config.authentik.branding.title %}{% endblock %}</title>
         <link rel="icon" type="image/png" href="{% static 'dist/assets/icons/icon.png' %}?v={{ ak_version }}">
         <link rel="shortcut icon" type="image/png" href="{% static 'dist/assets/icons/icon.png' %}?v={{ ak_version }}">
-        <link rel="stylesheet" type="text/css" href="{% static 'dist/patternfly.min.css' %}?v={{ ak_version }}">
+        <link rel="stylesheet" type="text/css" href="{% static 'dist/patternfly-base.css' %}?v={{ ak_version }}">
         <link rel="stylesheet" type="text/css" href="{% static 'dist/authentik.css' %}?v={{ ak_version }}">
         <script src="{% url 'javascript-catalog' %}?v={{ ak_version }}"></script>
         {% block head %}

authentik/flows/templates/flows/shell.html

@@ -1,7 +1,6 @@
-{% extends 'login/base_full.html' %}
+{% extends "base/skeleton.html" %}
 
 {% load static %}
-{% load i18n %}
 
 {% block head %}
 {{ block.super }}
@@ -14,7 +13,6 @@
 <script src="{% static 'dist/flow.js' %}?v={{ ak_version }}" type="module"></script>
 {% endblock %}
 
-{% block main_container %}
+{% block body %}
-<ak-flow-executor class="pf-c-login__main" flowSlug="{{ flow_slug }}">
+<ak-flow-executor></ak-flow-executor>
-</ak-flow-executor>
 {% endblock %}

web/rollup.config.js

@@ -10,7 +10,7 @@ import externalGlobals from "rollup-plugin-external-globals";
 const resources = [
     { src: "node_modules/rapidoc/dist/rapidoc-min.js", dest: "dist/" },
 
-    { src: "node_modules/@patternfly/patternfly/patternfly.min.css", dest: "dist/" },
+    { src: "node_modules/@patternfly/patternfly/patternfly-base.css", dest: "dist/" },
     { src: "src/authentik.css", dest: "dist/" },
 
     { src: "node_modules/@patternfly/patternfly/assets/*", dest: "dist/assets/" },

web/src/authentik.css

@@ -62,11 +62,6 @@ html > input {
     background-position: center;
 }
 
-/* Fix spacing between messages */
-ak-message {
-    display: block;
-}
-
 .pf-m-success {
     color: var(--pf-global--success-color--100);
 }

web/src/elements/messages/MessageContainer.ts

@@ -1,5 +1,5 @@
 import { gettext } from "django";
-import { LitElement, html, customElement, TemplateResult, property, CSSResult } from "lit-element";
+import { LitElement, html, customElement, TemplateResult, property, CSSResult, css } from "lit-element";
 import "./Message";
 import { APIMessage } from "./Message";
 import PFAlertGroup from "@patternfly/patternfly/components/AlertGroup/alert-group.css";
@@ -24,7 +24,12 @@ export class MessageContainer extends LitElement {
     retryDelay = 200;
 
     static get styles(): CSSResult[] {
-        return [PFBase, PFAlertGroup];
+        return [PFBase, PFAlertGroup, css`
+            /* Fix spacing between messages */
+            ak-message {
+                display: block;
+            }
+        `];
     }
 
     constructor() {

web/src/flows/FlowExecutor.ts

@@ -4,6 +4,9 @@ import { LitElement, html, customElement, property, TemplateResult, CSSResult, c
 import PFLogin from "@patternfly/patternfly/components/Login/login.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 import PFTitle from "@patternfly/patternfly/components/Title/title.css";
+import PFBackgroundImage from "@patternfly/patternfly/components/BackgroundImage/background-image.css";
+import PFList from "@patternfly/patternfly/components/List/list.css";
+import AKGlobal from "../authentik.css";
 
 import { unsafeHTML } from "lit-html/directives/unsafe-html";
 import "./stages/authenticator_static/AuthenticatorStaticStage";
@@ -31,13 +34,15 @@ import { WebAuthnAuthenticatorRegisterChallenge } from "./stages/authenticator_w
 import { CaptchaChallenge } from "./stages/captcha/CaptchaStage";
 import { SpinnerSize } from "../elements/Spinner";
 import { StageHost } from "./stages/base";
-import { Challenge, ChallengeTypeEnum, FlowsApi } from "authentik-api";
+import { Challenge, ChallengeTypeEnum, Config, FlowsApi, RootApi } from "authentik-api";
 import { DEFAULT_CONFIG } from "../api/Config";
+import { ifDefined } from "lit-html/directives/if-defined";
+import { until } from "lit-html/directives/until";
 
 @customElement("ak-flow-executor")
 export class FlowExecutor extends LitElement implements StageHost {
-    @property()
+
-    flowSlug = "";
+    flowSlug: string;
 
     @property({attribute: false})
     challenge?: Challenge;
@@ -45,8 +50,11 @@ export class FlowExecutor extends LitElement implements StageHost {
     @property({type: Boolean})
     loading = false;
 
+    @property({ attribute: false })
+    config?: Config;
+
     static get styles(): CSSResult[] {
-        return [PFBase, PFLogin, PFTitle].concat(css`
+        return [PFBase, PFLogin, PFTitle, PFList, PFBackgroundImage, AKGlobal].concat(css`
             .ak-loading {
                 display: flex;
                 height: 100%;
@@ -75,6 +83,7 @@ export class FlowExecutor extends LitElement implements StageHost {
         this.addEventListener("ak-flow-submit", () => {
             this.submit();
         });
+        this.flowSlug = window.location.pathname.split("/")[2];
     }
 
     submit<T>(formData?: T): Promise<void> {
@@ -94,6 +103,9 @@ export class FlowExecutor extends LitElement implements StageHost {
     }
 
     firstUpdated(): void {
+        new RootApi(DEFAULT_CONFIG).rootConfigList().then((config) => {
+            this.config = config;
+        });
         this.loading = true;
         new FlowsApi(DEFAULT_CONFIG).flowsExecutorGetRaw({
             flowSlug: this.flowSlug
@@ -176,7 +188,7 @@ export class FlowExecutor extends LitElement implements StageHost {
         return html``;
     }
 
-    render(): TemplateResult {
+    renderChallengeWrapper(): TemplateResult {
         if (!this.challenge) {
             return this.renderLoading();
         }
@@ -185,4 +197,47 @@ export class FlowExecutor extends LitElement implements StageHost {
             ${this.renderChallenge()}
         `;
     }
+
+    render(): TemplateResult {
+        return html`<div class="pf-c-background-image">
+            <svg xmlns="http://www.w3.org/2000/svg" class="pf-c-background-image__filter" width="0" height="0">
+                <filter id="image_overlay">
+                    <feColorMatrix in="SourceGraphic" type="matrix" values="1.3 0 0 0 0 0 1.3 0 0 0 0 0 1.3 0 0 0 0 0 1 0" />
+                    <feComponentTransfer color-interpolation-filters="sRGB" result="duotone">
+                        <feFuncR type="table" tableValues="0.086274509803922 0.43921568627451"></feFuncR>
+                        <feFuncG type="table" tableValues="0.086274509803922 0.43921568627451"></feFuncG>
+                        <feFuncB type="table" tableValues="0.086274509803922 0.43921568627451"></feFuncB>
+                        <feFuncA type="table" tableValues="0 1"></feFuncA>
+                    </feComponentTransfer>
+                </filter>
+            </svg>
+        </div>
+        <ak-message-container></ak-message-container>
+        <div class="pf-c-login">
+            <div class="ak-login-container">
+                <header class="pf-c-login__header">
+                    <div class="pf-c-brand ak-brand">
+                        <img src="${ifDefined(this.config?.brandingLogo)}" alt="authentik icon" />
+                    </div>
+                </header>
+                <div class="pf-c-login__main">
+                    ${this.renderChallengeWrapper()}
+                </div>
+                <footer class="pf-c-login__footer">
+                    <p></p>
+                    <ul class="pf-c-list pf-m-inline">
+                        ${until(this.config?.uiFooterLinks?.map((link) => {
+                            return html`<li>
+                                <a href="${link.href || ""}">${link.name}</a>
+                            </li>`;
+                        }))}
+                        ${this.config?.brandingTitle != "authentik" ? html`
+                        <li><a href="https://goauthentik.io">${gettext("Powered by authentik")}</a></li>
+                        ` : html``}
+                    </ul>
+                </footer>
+            </div>
+        </div>`;
+    }
+
 }

web/src/flows/stages/identification/IdentificationStage.ts

@@ -51,7 +51,7 @@ export class IdentificationStage extends BaseStage {
                 /* login page's icons */
                 .pf-c-login__main-footer-links-item-link img {
                     fill: var(--pf-c-login__main-footer-links-item-link-svg--Fill);
-                    width: 100%;
+                    width: 100px;
                     max-width: var(--pf-c-login__main-footer-links-item-link-svg--Width);
                     height: 100%;
                     max-height: var(--pf-c-login__main-footer-links-item-link-svg--Height);